MapComponent
Represents the Kendo UI Map component for Angular.
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" }];
}
Selector
kendo-map
Export Name
Accessible in templates as #kendoMapInstance="kendoMap"
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
center |
|
The map center. Coordinates are listed as | |
controls |
|
The configuration of built-in map controls. | |
maxZoom |
|
|
The maximum zoom level. Typical web maps use zoom levels from 0 (whole world) to 19 (sub-meter features). |
minSize? |
|
|
The size of the map in pixels at zoom level 0. |
minZoom |
|
|
The minimum zoom level. Typical web maps use zoom levels from 0 (whole world) to 19 (sub-meter features). |
pannable |
|
|
Controls whether the user can pan the map. |
popupSettings |
|
The settings for the tooltip popup. | |
resizeRateLimit |
|
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.
Defaults to | |
wraparound |
|
|
Specifies whether the map should wrap around the east-west edges. |
zoom |
|
|
The initial zoom level. Typical web maps use zoom levels from 0 (whole world) to 19 (sub-meter features). The map size is derived from the zoom level and minScale options:
|
zoomable |
|
|
Controls whether the map zoom level can be changed by the user. |
Fields
| Name | Type | Default | Description |
|---|---|---|---|
extent |
|
Sets the extent (visible area) of the map. | |
layers |
|
The marker layers instances. |
Events
| Name | Type | Description |
|---|---|---|
beforeReset |
|
Fired immediately before the map is reset. This event is typically used for cleanup by layer implementers. |
centerChange |
|
Fired when the map center has been changed. |
mapClick |
|
Fired when the user clicks on the map. |
markerActivate |
|
Fired when a marker has been displayed and has a DOM element assigned. |
markerClick |
|
Fired when a marker has been clicked or tapped. |
markerCreated |
|
Fired when a marker has been created and is about to be displayed. Cancelling the event will prevent the marker from being shown. |
pan |
|
Fired while the map viewport is being moved. |
panEnd |
|
Fires after the map viewport has been moved. |
reset |
|
Fired when the map is reset. This typically occurs on initial load and after a zoom/center change. |
shapeClick |
|
Fired when a shape is clicked or tapped. |
shapeCreated |
|
Fired when a shape is created, but is not rendered yet. |
shapeFeatureCreated |
|
Fired when a GeoJSON Feature is created on a shape layer. |
shapeMouseEnter |
|
Fired when the mouse enters a shape.
|
shapeMouseLeave |
|
Fired when the mouse leaves a shape.
|
zoomChange |
|
Fired when the map zoom level has been changed. |
zoomEnd |
|
Fired when the map zoom level has changed. |
zoomStart |
|
Fired when the map zoom level is about to change. Cancelling the event will prevent the user action. |
Methods
eventOffset | ||||||
|---|---|---|---|---|---|---|
|
Returns the event coordinates relative to the map element. Offset coordinates are not synchronized to a particular location on the map. | ||||||
| ||||||
|
eventToLayer | ||||||
|---|---|---|---|---|---|---|
|
Retrieves projected (layer) coordinates that correspond to this mouse event. Layer coordinates are absolute and change only when the zoom level is changed. | ||||||
| ||||||
|
eventToLocation | ||||||
|---|---|---|---|---|---|---|
|
Retrieves the geographic location that correspond to this mouse event. | ||||||
| ||||||
|
eventToView | ||||||
|---|---|---|---|---|---|---|
|
Retrieves relative (view) coordinates that correspond to this mouse event. Layer elements positioned on these coordinates will appear under the mouse cursor. View coordinates are no longer valid after a map reset. | ||||||
| ||||||
|
layerToLocation | |||||||||
|---|---|---|---|---|---|---|---|---|---|
|
Transforms layer (projected) coordinates to geographical location. | |||||||||
| |||||||||
|
locationToLayer | |||||||||
|---|---|---|---|---|---|---|---|---|---|
|
Returns the layer (projected) coordinates that correspond to a geographical location. | |||||||||
| |||||||||
|
locationToView | ||||||
|---|---|---|---|---|---|---|
|
Returns the view (relative) coordinates that correspond to a geographical location. | ||||||
| ||||||
|
resize |
|---|
|
Detects the size of the container and redraws the Map.
Resizing is automatic unless you set the |
viewSize | ||||
|---|---|---|---|---|
|
Retrieves the size of the visible portion of the map. | ||||
|
viewToLocation | |||||||||
|---|---|---|---|---|---|---|---|---|---|
|
Returns the geographical location that correspond to the view (relative) coordinates. | |||||||||
| |||||||||
|
