Configure the built-in zoom control plus/minus buttons
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.
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: "© 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>