Animate Panning to Location on the Map
Environment
Product | Progress® Kendo UI® Map for jQuery |
Product Version | Created with the 2021.3.1109 version |
Description
How can I animate the Kendo UI Map
to pan to a certain location smoothly?
Solution
- Create the map and retrieve the current longitude and latitude coordinates using the
viewToLocation
method. - Use the current coordinates to determine if the map must be panned to the West or to the East to reach the destination.
- Use the current coordinates to determine if the map must be panned to the North or to the South to reach the destination.
- Change the default
pan step
of the map navigator to reduce the speed at which the map is panned. - Use the JavaScript
setInterval
function alongside the internal_pan
method to smoothly pan the map in the desired location.
The following example demonstrates the full implementation of the suggested approach.
<input id="country" />
<div id="map" style="width: 950px; height: 750px;"></div>
<script>
let coordinates = [{
country: "United States",
lat: 39.7837304,
long: -100.445882
}, {
country: "China",
lat: 35.000074,
long: 104.999927
}, {
country: "United Kingdom",
lat: 54.7023545,
long: -3.2765753
}];
$("#country").kendoDropDownList({
dataSource: coordinates,
dataTextField: "country",
change: function (e) {
let lat = this.dataItem().lat;
let long = this.dataItem().long;
animateMap(lat, long);
}
});
$("#map").kendoMap({
zoom: 4,
center: [0, 0],
layers: [{
type: "tile",
urlTemplate: "http://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
attribution: "© OpenStreetMap"
}]
});
function animateMap(countryLat, countryLong) {
var map = $("#map").data("kendoMap");
// Get the current long and lat.
let lng = map.viewToLocation([475, 325]).round().lng;
let lat = map.viewToLocation([475, 325]).round().lat;
// Find out if the map will be panned to the West or to the East.
let lngStep = lng > countryLong ? -10 : 10;
// Find out if the map will be panned to the North or to the South.
let latStep = lat > countryLat ? -10 : 10;
// The default pan step is 100. Increasing this value will increase the speed at which the map is panned.
map.navigator.options.panStep = 0.5;
var lngPanning = window.setInterval(function () {
map.navigator._pan(lngStep, 0);
if (lngStep > 0) {
if (lng >= countryLong) {
clearInterval(lngPanning);
}
} else {
if (lng <= countryLong) {
clearInterval(lngPanning);
}
}
lng = map.viewToLocation([475, 325]).round().lng;
}, 0);
var latPanning = window.setInterval(function () {
map.navigator._pan(0, latStep);
if (latStep > 0) {
if (lat >= countryLat) {
clearInterval(latPanning);
}
} else {
if (lat <= countryLat) {
clearInterval(latPanning);
}
}
lat = map.viewToLocation([475, 325]).round().lat;
}, 0);
};
</script>