zoomStart

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

Example - bind to the map zoomStart event on initialization

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

Example - bind to the map zoomStart event after initialization

<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"
        }]
    });

    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>

Example - cancel zoom

<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) {
            e.preventDefault();
        }
    });
</script>