Zoom the Map on Double Click

Environment

Product	Progress® Kendo UI® Map for jQuery
Operating System	Windows 10 64bit
Visual Studio Version	Visual Studio 2017
Preferred Language	JavaScript

Description

How can I zoom the Kendo UI for jQuery Map upon a double click?

Solution

In the following example, which demonstrates how to achieve the desired scenario, the event coordinates are mapped to the location by using the eventToLocation method.

<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

• Basic Usage of the Map (Demo)
• Using the API of the Map (Demo)
• JavaScript API Reference of the Map