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.

Download Free Trial

• Demo page for the Map

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>

Functionality and Features

• Layers
• Creating maps
• Implementation with Azure

Events

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

See Also

• Basic Usage of the Map (Demo)
• Using the API of the Map (Demo)
• JavaScript API Reference of the Map