Edit this page

Map Layers

The information that the Kendo UI Map widget renders is organized into layers.

They are stacked from bottom to top in the order of definition and are oblivious of each other. To keep their content in sync, the Map layers respond to the Map events.

Tile Layers

Basic Usage

Tile layers are suitable for:

Microsoft Bing provides dedicated support. Note that it requires you to obtain an API key.

The following example demonstrates how to display an OpenStreetMap tile layer.

Example
<div id="map"></div>
<script>
$("#map").kendoMap({
    layers: [{
      type: "tile",
        urlTemplate: "http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
        subdomains: ["a", "b", "c"],
        attribution: "&copy; <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>"
    }]
});
</script>

Zoom Levels

Raster maps are divided into images (tiles) for serving over the web. Tiles are typically 256px squares. The top level (zoom level 0) displays the whole world as a single tile. Each progressive zoom level doubles the size of the map in the following way:

  • Zoom level 0: 1x1 tiles (256px).
  • Zoom level 1: 2x2 tiles (512px).
  • Zoom level 2: 4x4 tiles (1024px) and so on.

See Also

Other articles on the Kendo UI Map:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy