|
| 1 | +--- |
| 2 | +title: Centering a Marker in Kendo UI Map on Zoom or Pan |
| 3 | +description: Learn how to keep a marker centered in the Kendo UI Map component as you pan or zoom. |
| 4 | +type: how-to |
| 5 | +page_title: How to Keep a Marker Centered in Kendo UI Map on Zoom and Pan |
| 6 | +slug: centering-a-marker-kendo-ui-map |
| 7 | +tags: kendo, ui, map, center, marker, zoom, pan |
| 8 | +res_type: kb |
| 9 | +ticketid: 1671377 |
| 10 | +--- |
| 11 | + |
| 12 | +## Environment |
| 13 | + |
| 14 | +<table> |
| 15 | +<tbody> |
| 16 | +<tr> |
| 17 | +<td>Product</td> |
| 18 | +<td>Progress® Kendo UI® Map</td> |
| 19 | +</tr> |
| 20 | +<tr> |
| 21 | +<td>Version</td> |
| 22 | +<td>2024.4.1112</td> |
| 23 | +</tr> |
| 24 | +</tbody> |
| 25 | +</table> |
| 26 | + |
| 27 | +## Description |
| 28 | + |
| 29 | +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: |
| 30 | +- How do I ensure a marker stays centered in Kendo UI Map? |
| 31 | +- What is the method to keep a marker centered during map navigation? |
| 32 | +- Can I auto-center a marker on map zoom or pan events? |
| 33 | + |
| 34 | +## Solution |
| 35 | + |
| 36 | +To center a marker in the Kendo UI Map and keep it centered during zoom and pan operations, use the [center()](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/map/methods/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`](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/events/zoomend) and [`panEnd`](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/events/panend) event handlers of the map. |
| 37 | + |
| 38 | +Below is the JavaScript code that demonstrates how to implement this functionality: |
| 39 | + |
| 40 | +```dojo |
| 41 | + <div id="map"></div> |
| 42 | + <script> |
| 43 | + function createMap() { |
| 44 | + $("#map").kendoMap({ |
| 45 | + center: [30.268107, -97.744821], |
| 46 | + zoom: 3, |
| 47 | + layers: [{ |
| 48 | + type: "tile", |
| 49 | + urlTemplate: "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png", |
| 50 | + subdomains: ["a", "b", "c"], |
| 51 | + attribution: "© <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>" |
| 52 | + }], |
| 53 | + markers: [{ |
| 54 | + location: [30.268107, -97.744821], |
| 55 | + shape: "pinTarget", |
| 56 | + tooltip: { |
| 57 | + content: "Austin, TX" |
| 58 | + } |
| 59 | + }], |
| 60 | + zoomEnd: onZoomEnd, |
| 61 | + panEnd: onPanEnd |
| 62 | + }); |
| 63 | +
|
| 64 | + let map = $("#map").data("kendoMap"); |
| 65 | + map.markers.clear(); |
| 66 | + map.markers.add({location: map.center()}); |
| 67 | +
|
| 68 | + function onZoomEnd(e) { |
| 69 | + let mapCenter = e.sender.center(); |
| 70 | + setCenterMarker(mapCenter); |
| 71 | + } |
| 72 | +
|
| 73 | + function onPanEnd(e) { |
| 74 | + let mapCenter = e.sender.center(); |
| 75 | + setCenterMarker(mapCenter); |
| 76 | + } |
| 77 | +
|
| 78 | + function setCenterMarker(mapCenter) { |
| 79 | + let map = $("#map").data("kendoMap"); |
| 80 | + map.markers.clear(); |
| 81 | + map.markers.add({location: mapCenter}); |
| 82 | + } |
| 83 | + } |
| 84 | + $(document).ready(createMap); |
| 85 | + </script> |
| 86 | +``` |
| 87 | + |
| 88 | +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. |
| 89 | + |
| 90 | +## See Also |
| 91 | + |
| 92 | +- [Kendo UI Map Center Method](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/map/methods/center) |
| 93 | +- [Kendo UI Map zoomEnd Event](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/map/events/zoomend) |
| 94 | +- [Kendo UI Map panEnd Event](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/map/events/panend) |
| 95 | +- [Kendo UI Map Documentation](https://docs.telerik.com/kendo-ui/controls/map/overview) |
0 commit comments