New to Kendo UI for jQuery? Download free 30-day trial


The information that the Map renders is organized into layers.

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

Getting Started

The tile layers in the Map are suitable for:

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

<div id="map"></div>
    layers: [{
      type: "tile",
        urlTemplate: "http://#= subdomain zoom #/#= x #/#= y #.png",
        subdomains: ["a", "b", "c"],
        attribution: "&copy; <a href=''>OpenStreetMap contributors</a>"

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

In this article