Customize the Markers on a Map
Environment
| Product | Progress® Kendo UI® Map for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I customize the markers of the Kendo UI for jQuery Map?
Solution
The following example demonstrates how to use custom markers on a Kendo UI Map.
<div id="map"></div>
<script>
function createMap() {
$("#map").kendoMap({
center: [30.268107, -97.744821],
zoom: 3,
layers: [{
type: "tile",
urlTemplate: "http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
subdomains: ["a", "b", "c"],
attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>"
}],
markers: [{
location: [30.268107, -97.744821],
shape: "customMarker",
tooltip: {
content: "Austin, TX"
}
}]
});
$("#map").unbind("mousewheel");
}
$(document).ready(createMap);
</script>
<style>
.k-map .k-i-marker-custom-marker {
background-image: url('https://demos.telerik.com/kendo-ui/content/dataviz/chart/images/sunny.png');
background-size: 30px;
width: 30px;
height: 30px;
}
</style>