Events
You can subscribe to the following Map events and further customize the functionality of the component:
-
BeforeReset—Fired immediately before the map is reset. This event is used for cleanup by layer implementer. -
Click—Fired when the user clicks on the map. -
MarkerActivate—Fired when a marker has been displayed and has a DOM element assigned. -
MarkerCreated—Fired when a marker has been created and is about to be displayed. -
MarkerClick—Fired when a marker has been clicked or tapped. -
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 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. -
ZoomStart—Fired when the map zoom level is about to change. -
ZoomEnd—Fired when the map zoom level has changed.
Handling Events by Handler Name
The following example demonstrates how to subscribe to events by a handler name.
@(Html.Kendo().Map()
.Name("map")
.HtmlAttributes(new { style = "height: 300px;" })
.Center(39.6924, -97.3370)
.Zoom(4)
.Layers(layers =>
{
layers.Add()
.Style(style => style
.Fill(fill => fill.Color("#b3cde3"))
.Stroke(stroke => stroke.Color("#cceebc5"))
)
.Type(MapLayerType.Shape)
.DataSource(dataSource => dataSource
.GeoJson()
.Read(read => read.Url(Url.Content("~/shared/dataviz/map/us.geo.json")))
);
})
.Events(events => events
.Click("onClick")
.Reset("onReset")
.Pan("onPan")
.PanEnd("onPanEnd")
.ShapeClick("onShapeClick")
.ShapeCreated("onShapeCreated")
.ShapeFeatureCreated("onShapeFeatureCreated")
.ShapeMouseEnter("onShapeMouseEnter")
.ShapeMouseLeave("onShapeMouseLeave")
.ZoomStart("onZoomStart")
.ZoomEnd("onZoomEnd")
)
)
<script>
function onClick(e) {
kendoConsole.log("Click at ...");
}
function onReset(e) {
kendoConsole.log("Reset");
}
function onPan(e) {
kendoConsole.log("Pan");
}
function onPanEnd(e) {
kendoConsole.log("Pan end");
}
function onShapeClick(e) {
kendoConsole.log(kendo.format(
"Shape click :: {0}", e.shape.dataItem.properties.name
));
}
function onShapeCreated(e) {
kendoConsole.log(kendo.format(
"Shape created :: {0}", e.shape.dataItem.properties.name
));
}
function onShapeFeatureCreated(e) {
kendoConsole.log(kendo.format(
"Feature created :: {0} with {1} child shape(s)",
e.properties.name,
e.group.children.length
));
}
function onShapeMouseEnter(e) {
kendoConsole.log(kendo.format(
"Shape mouseEnter :: {0}", e.shape.dataItem.properties.name
));
}
function onShapeMouseLeave(e) {
kendoConsole.log(kendo.format(
"Shape mouseLeave :: {0}", e.shape.dataItem.properties.name
));
}
function onZoomStart(e) {
kendoConsole.log("Zoom start");
}
function onZoomEnd(e) {
kendoConsole.log("Zoom end");
}
</script>
<kendo-map name="map" center="coordinates"
style="height:300px"
zoom="4"
on-click="onClick"
on-reset="onReset"
on-pan="onPan"
on-pan-end="onPanEnd"
on-shape-click="onShapeClick"
on-shape-created="onShapeCreated"
on-shape-feature-created="onShapeFeatureCreated"
on-shape-mouse-enter="onShapeMouseEnter"
on-shape-mouse-leave="onShapeMouseLeave"
on-zoom-start="onZoomStart"
on-zoom-end="onZoomEnd">
<layers>
<layer type="MapLayerType.Shape">
<map-style>
<fill color="#b3cde3" />
<stroke color="#cceebc5" />
</map-style>
<datasource custom-type="geojson">
<transport>
<read url="@Url.Content("~/shared/dataviz/map/us.geo.json")" />
</transport>
</datasource>
</layer>
</layers>
</kendo-map>
<script>
function onClick(e) {
kendoConsole.log("Click at ...");
}
function onReset(e) {
kendoConsole.log("Reset");
}
function onPan(e) {
kendoConsole.log("Pan");
}
function onPanEnd(e) {
kendoConsole.log("Pan end");
}
function onShapeClick(e) {
kendoConsole.log(kendo.format(
"Shape click :: {0}", e.shape.dataItem.properties.name
));
}
function onShapeCreated(e) {
kendoConsole.log(kendo.format(
"Shape created :: {0}", e.shape.dataItem.properties.name
));
}
function onShapeFeatureCreated(e) {
kendoConsole.log(kendo.format(
"Feature created :: {0} with {1} child shape(s)",
e.properties.name,
e.group.children.length
));
}
function onShapeMouseEnter(e) {
kendoConsole.log(kendo.format(
"Shape mouseEnter :: {0}", e.shape.dataItem.properties.name
));
}
function onShapeMouseLeave(e) {
kendoConsole.log(kendo.format(
"Shape mouseLeave :: {0}", e.shape.dataItem.properties.name
));
}
function onZoomStart(e) {
kendoConsole.log("Zoom start");
}
function onZoomEnd(e) {
kendoConsole.log("Zoom end");
}
</script>
Handling Events by Template Delegate
The following example demonstrates how to subscribe to events by a template delegate.
@(Html.Kendo().Map()
.Name("map")
.HtmlAttributes(new { style = "height: 300px;" })
.Center(39.6924, -97.3370)
.Zoom(4)
.Layers(layers =>
{
layers.Add()
.Style(style => style
.Fill(fill => fill.Color("#b3cde3"))
.Stroke(stroke => stroke.Color("#cceebc5"))
)
.Type(MapLayerType.Shape)
.DataSource(dataSource => dataSource
.GeoJson()
.Read(read => read.Url(Url.Content("~/shared/dataviz/map/us.geo.json")))
);
})
.Events(events => events
.Click(@<text>
function(){
// Handle the click event inline.
}
</text>)
.Reset(@<text>
function(){
// Handle the reset event inline.
}
</text>)
.Pan("@<text>
function(){
// Handle the pan event inline.
}
</text>")
.PanEnd(@<text>
function(){
// Handle the panEnd event inline.
}
</text>)
.ShapeClick(@<text>
function(){
// Handle the shapeClick event inline.
}
</text>)
.ShapeCreated(@<text>
function(){
// Handle the shapeCreated event inline.
}
</text>)
.ShapeFeatureCreated(@<text>
function(){
// Handle the shapeFeatureCreated event inline.
}
</text>)
.ShapeMouseEnter(@<text>
function(){
// Handle the shapeMouseEnter event inline.
}
</text>)
.ShapeMouseLeave(@<text>
function(){
// Handle the shapeMouseLeave event inline.
}
</text>)
.ZoomStart(@<text>
function(){
// Handle the zoomStart event inline.
}
</text>)
.ZoomEnd(@<text>
function(){
// Handle the zoomEnd event inline.
}
</text>)
)
)
<kendo-map name="map" center="coordinates"
style="height:300px"
zoom="4"
on-click="
function(){
// Handle the click event inline.
}"
on-reset="
function(){
// Handle the reset event inline.
}"
on-pan="
function(){
// Handle the pan event inline.
}"
on-pan-end="
function(){
// Handle the panEnd event inline.
}"
on-shape-click="
function(){
// Handle the shapeClick event inline.
}"
on-shape-created="
function(){
// Handle the shapeCreated event inline.
}"
on-shape-feature-created="
function(){
// Handle the shapeFeatureCreated event inline.
}"
on-shape-mouse-enter="
function(){
// Handle the shapeMouseEnter event inline.
}"
on-shape-mouse-leave="
function(){
// Handle the shapeMouseLeave event inline.
}"
on-zoom-start="
function(){
// Handle the zoomStart event inline.
}"
on-zoom-end="
function(){
// Handle the zoomEnd event inline.
}">
<layers>
<layer type="MapLayerType.Shape">
<map-style>
<fill color="#b3cde3" />
<stroke color="#cceebc5" />
</map-style>
<datasource custom-type="geojson">
<transport>
<read url="@Url.Content("~/shared/dataviz/map/us.geo.json")" />
</transport>
</datasource>
</layer>
</layers>
</kendo-map>