Configure the built-in zoom control plus/minus buttons

Updated on Jun 17, 2026

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

The following example initializes a Map and uses the zoomStart event to intercept the built-in zoom buttons and apply a step of 2 instead of 1 for each click.

    <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