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.
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="© <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].
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).
19
minSize?
number
The size of the map in pixels at zoom level 0.
256
minZoom
number
The minimum zoom level. Typical web maps use zoom levels from 0 (whole world) to 19 (sub-meter features).
1
pannable
boolean
Controls whether the user can pan the map.
true
popupSettings
PopupSettings
The settings for the tooltip popup.
resizeRateLimit
number
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.
10
wraparound
boolean
Specifies whether the map should wrap around the east-west edges.
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.
3
zoomable
boolean
Determines whether users can change the map zoom level.
true
Fields
Events
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.
Fires when the user clicks on the map.
Fires when a marker appears on the map and its DOM element becomes available.
Fires when the user clicks or taps a marker.
Fires once the map has created a marker, and just before the map displays it.
Cancelling the event prevents displaying the marker.
Fires while the map viewport is being moved.
Fires after the map viewport completes panning.
Fires when the map resets.
This typically occurs on initial load and after a zoom/center change.
Fires when a shape is clicked or tapped.
Fires when a shape is created, but is not rendered yet.
Fires when a GeoJSON Feature is created on a shape layer.
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.
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.
Fires when the map zoom level changes.
Fires when the map zoom level is about to change.
Cancelling the event will prevent the user action.
Methods
Gets event coordinates relative to the map element. Offset coordinates do not sync to a specific map location.
Gets projected layer coordinates for this mouse event. Layer coordinates are absolute and change only when zoom level changes.
Gets the geographic location for this mouse event.
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.
Detects the container size and redraws the Map.
Resizing happens automatically unless you set resizeRateLimit to 0.
Gets the size of the visible map area.
{ width: number; height: number }
The width and height of the visible map area.