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 ts
| |
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. | |||||||||
| |||||||||
|