New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
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.
Razor
@(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>
Handling Events by Template Delegate
The following example demonstrates how to subscribe to events by a template delegate.
Razor
@(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>)
)
)