Kendo UI for jQuery Map Overview
The Map displays geospatial information organized in layers and is supported for both desktop and mobile devices.
It also provides tile layers, shape (vector) layers, and marker layers.
The Map is part of Kendo UI for jQuery, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Basic Configuration
To create a Map, add an empty div
element to the HTML, provide it with an ID, and, optionally, set its desired width and height inline or by using CSS.
<div id="map" style="width: 400px; height: 600px"></div>
To render the Map, select the div
with a jQuery selector and call the kendoMap()
function.
$("#map").kendoMap();
The following example demonstrates how to add a basic tile layer to the Map that is bound to OpenStreetMap.
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
$("#map").kendoMap({
layers: [{
type: "tile",
urlTemplate: "http://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>."
}]
});
</script>
Functionality and Features
Events
For a complete example, refer to the demo on using the events of the Map.