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.

<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.



Add Layers

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>
    layers: [{
        type: "tile",
        urlTemplate: " zoom #/#= x #/#= y #.png",
        attribution: "&copy; <a href=''>OpenStreetMap contributors</a>."

Figure 1: A basic map

Basic map

See Also

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