New to Kendo UI for Angular? Start a free 30-day trial

MapComponent

Component

Represents the Kendo UI Map component for Angular.

Use this component to display interactive maps with markers, layers, and controls. Configure zoom levels, center coordinates, and user interactions like panning and zooming.

Definition

Package:@progress/kendo-angular-map

Selector:kendo-map

Export Name:Accessible in templates as #kendoMapInstance="kendoMap"

Syntax:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
     <kendo-map [center]="center" [zoom]="15">
         <kendo-map-layers>
         <kendo-map-tile-layer
             [subdomains]="tileSubdomains"
             [urlTemplate]="tileUrl"
             attribution="&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>"
         >
         </kendo-map-tile-layer>
         <kendo-map-marker-layer
             [data]="markers"
             locationField="latlng"
             titleField="name"
         >
         </kendo-map-marker-layer>
         </kendo-map-layers>
     </kendo-map>
  `
})
class AppComponent {
 tileSubdomains = ["a", "b", "c"];
 tileUrl = (e: TileUrlTemplateArgs): string =>
     `https://${e.subdomain}.tile.openstreetmap.org/${e.zoom}/${e.x}/${e.y}.png`;

 center = [30.2675, -97.7409];
 markers = [{ latlng: [30.2675, -97.7409], name: "Zevo Toys" }];
}

Inputs

center

number[]

Specifies the map center coordinates. Provide coordinates as [Latitude, Longitude].

controls

MapControls

Specifies the configuration for built-in map controls.

maxZoom

number

The maximum zoom level. Typical web maps use zoom levels from 0 (whole world) to 19 (sub-meter features).

Default:

minSize?

number

The size of the map in pixels at zoom level 0.

Default:

256

minZoom

number

The minimum zoom level. Typical web maps use zoom levels from 0 (whole world) to 19 (sub-meter features).

Default:

pannable

boolean

Controls whether the user can pan the map.

Default:

true

popupSettings

PopupSettings

The settings for the tooltip popup.

Limits the automatic resizing of the Map. Sets the maximum number of times per second that the component redraws its content when the size of its container changes. To disable the automatic resizing, set it to 0.

Default:

Example:

@Component({
    selector: 'my-app',
    template: `
        <kendo-map [resizeRateLimit]="2">
      </kendo-map>
  `
})
export class AppComponent {
}

wraparound

boolean

Specifies whether the map should wrap around the east-west edges.

Default:

true

zoom

number

Specifies the initial zoom level. Use values from 0 (whole world) to 19 (sub-meter features). The map size derives from the zoom level and minScale options: size = (2 ^ zoom) * minSize. Map zoom rounds floating point numbers to use whole zoom levels 0 through 19.

Default:

zoomable

boolean

Determines whether users can change the map zoom level.

Default:

true

Fields

extent

Extent

Sets the extent (visible area) of the map.

layers

MapLayer[]

Gets the marker layers instances.

Events

beforeReset

EventEmitter<BeforeResetEvent>

Fires immediately before the map resets. This event is typically used for cleanup by layer implementers.

centerChange

EventEmitter<number[]>

Fires when the map center has been changed.

mapClick

EventEmitter<MapClickEvent>

Fires when the user clicks on the map.

markerActivate

EventEmitter<MarkerActivateEvent>

Fires when a marker appears on the map and its DOM element becomes available.

markerClick

EventEmitter<MarkerClickEvent>

Fires when the user clicks or taps a marker.

markerCreated

EventEmitter<MarkerCreatedEvent>

Fires once the map has created a marker, and just before the map displays it.

Cancelling the event prevents displaying the marker.

pan

EventEmitter<PanEvent>

Fires while the map viewport is being moved.

panEnd

EventEmitter<PanEndEvent>

Fires after the map viewport completes panning.

reset

EventEmitter<ResetEvent>

Fires when the map resets.

This typically occurs on initial load and after a zoom/center change.

shapeClick

EventEmitter<ShapeClickEvent>

Fires when a shape is clicked or tapped.

shapeCreated

EventEmitter<ShapeCreatedEvent>

Fires when a shape is created, but is not rendered yet.

shapeFeatureCreated

EventEmitter<ShapeFeatureCreatedEvent>

Fires when a GeoJSON Feature is created on a shape layer.

shapeMouseEnter

EventEmitter<ShapeMouseEnterEvent>

Fires when the mouse enters a shape.

This event will fire reliably only for shapes that have set fill color. The opacity can still be set to 0 so the shapes appear to have no fill.

shapeMouseLeave

EventEmitter<ShapeMouseLeaveEvent>

Fires when the mouse leaves a shape.

This event will fire reliably only for shapes that have set fill color. The opacity can still be set to 0 so the shapes appear to have no fill.

zoomChange

EventEmitter<number>

Fires when the map zoom level has been changed.

zoomEnd

EventEmitter<ZoomEndEvent>

Fires when the map zoom level changes.

zoomStart

The layer coordinates. Arrays use x, y order.

zoom?number

Optional. Zoom level to use. Defaults to current zoom level.

Returns:

Location

The geographic location for the layer coordinates.

locationToLayer

Gets layer coordinates for a geographic location.

Parameters:locationLocation | number[]

The geographic location. Arrays use [Latitude, Longitude] order.

zoom?number

Optional. Zoom level to use. Defaults to current zoom level.

Returns:

Point

The layer coordinates.

locationToView

Gets view coordinates for a geographic location.

Parameters:locationLocation | number[]

The geographic location. Arrays use [Latitude, Longitude] order.

Returns:

Point

The view coordinates for the geographic location.

resize

Detects the container size and redraws the Map. Resizing happens automatically unless you set resizeRateLimit to 0.

viewSize

Gets the size of the visible map area.

Returns:

{ width: number; height: number }

The width and height of the visible map area.

viewToLocation

Gets the geographic location for view coordinates.

Parameters:pointnumber[] | Point

The view coordinates. Arrays use x, y order.

zoom?number

Optional. Zoom level to use. Defaults to current zoom level.

Returns:

Location

The geographic location for the view coordinates.