New to Kendo UI for jQuery? Start a free 30-day trial

ZoomStart

events

Fired when the map zoom level is about to change. Cancelling the event will prevent the user action.

Event Data

e.sender kendo.dataviz.ui.Map

The source widget instance.

e.originalEvent Object

The source jQuery event instance

<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() {
/* The result can be observed in the DevTools(F12) console of the browser. */
            console.log("zoom start");
        }
    });
</script>
<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"
        }]
    });

    var map = $("#map").data("kendoMap");
    map.bind("zoomStart", function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log("zoom start");
    });
</script>
<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) {
            e.preventDefault();
        }
    });
</script>
Not finding the help you need?
Contact Support