Edit this page

Map Overview

The Kendo UI Map widget displays geospatial information organized in layers and is supported for both desktop and mobile devices.

The layers that the Map provides are:

  • Tile layers
  • Shape (vector) layers
  • Marker layers

For more detailed information on any new features, refer to Kendo UI Roadmap.

Getting Started

Create the Map

To create a Kendo UI Map, add an empty div element in the HTML, provide it with an ID, and, optionally, set its desired width and height inline or via CSS.

Example
<div id="map" style="width: 400px; height: 600px"></div>

Initialize the Map

To render the Map, select the div with a jQuery selector and call the kendoMap() function.

Example
$("#map").kendoMap();

Configuration

Add Layers

The following example demonstrates how to add a basic tile layer to the Map that is bound to OpenStreetMap.

Example
<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: "&copy; <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>."
    }]
});
</script>

Figure 1: A basic map

Basic map

See Also

Other articles and how-to examples on the Kendo UI Map:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy