Configure the built-in zoom control plus/minus buttons

Updated on Dec 10, 2025

Environment

Product Version	2020.1.114
Product	Progress® Kendo UI® Map for jQuery

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.

javascript

  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: "https://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

• zoomStart Event - API Reference
• zoom Method - API Reference