Centering a Marker in Kendo UI Map on Zoom or Pan
Environment
| Product | Progress® Kendo UI® Map |
| Version | 2024.4.1112 |
Description
Centering a marker in the visible view of the map, including when zooming or panning, is a common requirement for applications using maps to ensure that a specific location remains in focus. This knowledge base article also answers the following questions:
- How do I ensure a marker stays centered in Kendo UI Map?
- What is the method to keep a marker centered during map navigation?
- Can I auto-center a marker on map zoom or pan events?
Solution
To center a marker in the Kendo UI Map and keep it centered during zoom and pan operations, use the center() method of the map. This method allows you to set or get the center of the map. To maintain the centered marker when the map is zoomed or panned, apply logic inside the zoomEnd and panEnd event handlers of the map.
Below is the JavaScript code that demonstrates how to implement this functionality:
<div id="map"></div>
<script>
function createMap() {
$("#map").kendoMap({
center: [30.268107, -97.744821],
zoom: 3,
layers: [{
type: "tile",
urlTemplate: "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
subdomains: ["a", "b", "c"],
attribution: "© <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>"
}],
markers: [{
location: [30.268107, -97.744821],
shape: "pinTarget",
tooltip: {
content: "Austin, TX"
}
}],
zoomEnd: onZoomEnd,
panEnd: onPanEnd
});
let map = $("#map").data("kendoMap");
map.markers.clear();
map.markers.add({location: map.center()});
function onZoomEnd(e) {
let mapCenter = e.sender.center();
setCenterMarker(mapCenter);
}
function onPanEnd(e) {
let mapCenter = e.sender.center();
setCenterMarker(mapCenter);
}
function setCenterMarker(mapCenter) {
let map = $("#map").data("kendoMap");
map.markers.clear();
map.markers.add({location: mapCenter});
}
}
$(document).ready(createMap);
</script>
This script first clears any existing markers and places a new marker at the center of the map. It then defines functions to handle the zoomEnd and panEnd events, ensuring the marker remains centered by setting it to the new center after each event. The setCenterMarker function updates the marker's position to the map's center.