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.

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

A Map with basic configuration

Functionality and Features

Events

For a complete example, refer to the demo on using the events of the Map.

See Also

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