Configure the built-in zoom control plus/minus buttons

Environment

Product Version 2020.1.114
Product Map for Progress® Kendo UI®

Description

Is it possible to customize how large the zoom step is when pressing the zoom buttons for a Kendo UI Map?

Solution

One way the amount of zoom can be modified when pressing the plus or minus buttons is to take advantage of the zoomStart event. When the user presses the zoom button, make a reference to the Map's current zoom. If the originalEvent's delta is 1 and it exists, use the Kendo UI Map's zoom method to increment to the preferred number. Otherwise, if the delta is -1, reduce the zoom.

  zoomStart: function(e) {
    var zoom = e.sender.zoom();

    //if the plus is clicked
    if(e.originalEvent.delta && e.originalEvent.delta == 1){

      e.sender.zoom(zoom + 2);

    //if the minus is clicked  
    } else if(e.originalEvent.delta && e.originalEvent.delta == -1){

      e.sender.zoom(zoom - 2);
    } 
  }

Example

    <div id="map"></div>
    <script>
      $("#map").kendoMap({
        zoom: 3,
        center: [0, 0],
        layers: [{
          type: "tile",
          urlTemplate: "http://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
          attribution: "&copy; OpenStreetMap"
        }],
        zoomStart: function(e) {
          var zoom = e.sender.zoom();

          //if the plus is clicked
          if(e.originalEvent.delta && e.originalEvent.delta == 1){

            e.sender.zoom(zoom + 2);

            //if the minus is clicked  
          } else if(e.originalEvent.delta && e.originalEvent.delta == -1){

            e.sender.zoom(zoom - 2);
          } 
        }
      });
    </script>

See Also

In this article
Not finding the help you need? Improve this article