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>)
      )
)

See Also

• Using the API of the Map for ASP.NET MVC (Demo)
• Map Server-Side API
• Map Client-Side API