Edit this page

Zoom on Double Click

The following example demonstrates how to zoom the Map upon a double click.

The event coordinates are mapped to the location by using the eventToLocation method.

Example
<div id="map"></div>
<script>
  function createMap() {
    $("#map").kendoMap({
      center: [51.505, -0.09],
      zoom: 3,
      layers: [{
          type: "tile",
          urlTemplate: "http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
          subdomains: ["a", "b", "c"],
          attribution: "&copy; <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>"
      }]
    });

    $("#map").bind("dblclick", function(e) {
      var map = $(this).data("kendoMap");
      var center = map.eventToLocation(e);
      map.center(center);
      map.zoom(map.zoom() + 1);
    });
  }

  $(document).ready(createMap);
</script>

See Also

For more runnable examples on the Kendo UI Map, browse the How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy