MapComponent

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.

ts

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" }];
}

Selector

kendo-map

Export Name

Accessible in templates as #kendoMapInstance="kendoMap"

Inputs

Name	Type	Default	Description
center	number[]		Specifies the map center coordinates. Provide coordinates as [Latitude, Longitude].
controls	MapControls		Specifies the configuration for built-in map controls.
maxZoom	number	19	The maximum zoom level. Typical web maps use zoom levels from 0 (whole world) to 19 (sub-meter features).
minSize?	number	256	The size of the map in pixels at zoom level 0.
minZoom	number	1	The minimum zoom level. Typical web maps use zoom levels from 0 (whole world) to 19 (sub-meter features).
pannable	boolean	true	Controls whether the user can pan the map.
popupSettings	PopupSettings		The settings for the tooltip popup.
resizeRateLimit	number	10	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. ts @Component({ selector: 'my-app', template: ` <kendo-map [resizeRateLimit]="2"> </kendo-map> ` }) export class AppComponent { }
wraparound	boolean	true	Specifies whether the map should wrap around the east-west edges.
zoom	number	3	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.
zoomable	boolean	true	Determines whether users can change the map zoom level.

Fields

Name	Type	Default	Description
extent	Extent		Sets the extent (visible area) of the map.
layers	MapLayer[]		Gets the marker layers instances.

Events

Name	Type	Description
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	EventEmitter<ZoomStartEvent>	Fires when the map zoom level is about to change. Cancelling the event will prevent the user action.

Methods

eventOffset
Gets event coordinates relative to the map element. Offset coordinates do not sync to a specific map location.
Parameters e any The mouse event.
Returns Point The event coordinates relative to the map element.

eventToLayer
Gets projected layer coordinates for this mouse event. Layer coordinates are absolute and change only when zoom level changes.
Parameters e any The mouse event.
Returns Point The projected layer coordinates for this event.

eventToLocation
Gets the geographic location for this mouse event.
Parameters e any The mouse event.
Returns Point The geographic location for this mouse event.

eventToView
Gets relative view coordinates for this mouse event. Layer elements positioned on these coordinates appear under the mouse cursor. View coordinates become invalid after a map reset.
Parameters e any The mouse event.
Returns Point The relative view coordinates for this mouse event.

layerToLocation
Converts layer coordinates to geographic location.
Parameters point number[] | Point 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 location Location | 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 location Location | 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 { height: number; width: number; } The width and height of the visible map area.

viewToLocation
Gets the geographic location for view coordinates.
Parameters point number[] | 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.