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.

Kendo UI for jQuery Kendoka image

The Map is part of Kendo UI for jQuery, a professional grade UI library with 90+ 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: "&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