pan

Fired while the map viewport is being moved.

Event Data

e.origin kendo.dataviz.map.Location

The map origin (top left or NW corner).

e.center kendo.dataviz.map.Location

The current map center.

e.sender kendo.dataviz.ui.Map

The source widget instance.

e.originalEvent Object

The source jQuery event instance

Example - bind to the map pan 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"
        }],
        pan: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
            console.log("pan to " + e.center.toString());
        }
    });
</script>

Example - bind to the map pan 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("pan", function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log("pan to " + e.center.toString());
    });
</script>
In this article