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:

In this article
Not finding the help you need? Improve this article