Back to all docs
API Reference / dataviz / ui / Map / layers
New to Kendo UI for jQuery? Start a free 30-day trial

Layers

configuration

The configuration of the map layers. The layer type is determined by the value of the type field.

layers

Array
<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "tile",
            urlTemplate: "https://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            attribution: "&copy; OpenStreetMap"
        }, {
            type: "shape",
            dataSource: {
                type: "geojson",
                data: [{
                    "type": "Polygon",
                    "coordinates": [
                        [[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]
                    ]
                }]
            }
        }]
    });
</script>

layers.attribution

String

The attribution for the layer. Accepts valid HTML.

Attribution supplied by remote providers, such as Bing, is HTML-encoded before it is rendered. User-provided attribution is rendered as HTML.

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "tile",
            urlTemplate: "https://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            attribution: "&copy; OpenStreetMap"
        }]
    });
</script>

layers.autoBind

Boolean

If set to false the layer will not bind to the data source during initialization. In this case data binding will occur when the change event of the data source is fired. By default the widget will bind to the data source specified in the configuration.

Setting autoBind to false is useful when multiple layers (or widgets) are bound to the same data source. Disabling automatic binding ensures that the shared data source doesn't make more than one request to the remote service.

Default: true

<div id="map"></div>
<script>
    var ds = new kendo.data.DataSource({
        type: "geojson",
        data: [{
            "type": "Polygon",
            "coordinates": [
                [[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]
            ]
        }]
    });

    $("#map").kendoMap({
        layers: [{
            type: "shape",
            autoBind: false,
            dataSource: ds
        }]
    });

    ds.read();
</script>
<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "bing",
            key: "YOUR API KEY"
        }]
    });
</script>

layers.culture

String

The culture to be used for the bing map tiles.

Default: "en-US"

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "bing",
            key: "YOUR API KEY",
            culture: "de-DE"
        }]
    });
</script>

layers.dataSource

Object|Array|kendo.data.DataSource

The data source of the layer. Can be a JavaScript object which represents a valid data source configuration, a JavaScript array or an existing kendo.data.DataSource instance.

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "shape",
            dataSource: {
                type: "geojson",
                data: [{
                    "type": "Polygon",
                    "coordinates": [
                        [[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]
                    ]
                }]
            }
        }]
    });
</script>
<div id="map"></div>
<script>
    var ds = new kendo.data.DataSource({
        type: "geojson",
        data: [{
            "type": "Polygon",
            "coordinates": [
                [[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]
            ]
        }]
    });

    $("#map").kendoMap({
        layers: [{
            type: "shape",
            dataSource: ds
        }]
    });
</script>
<div id="map"></div>
<script>
    var ds = new kendo.data.DataSource({
        data: [{
            latlng: [0, 0]
        }]
    });

    $("#map").kendoMap({
        layers: [{
            type: "marker",
            dataSource: ds,
            locationField: "latlng"
        }]
    });
</script>

layers.extent

Array|kendo.dataviz.map.Extent

Specifies the extent of the region covered by this layer. The layer will be hidden when the specified area is out of view.

Accepts a four-element array that specifies the extent covered by this layer: North-West lat, longitude, South-East latitude, longitude.

If not specified, the layer is always visible.

<div id="map"></div>
<script>
    $("#map").kendoMap({
        center: [42.6908, 23.3090],
        zoom: 12,
        layers: [{
            type: "tile",
            urlTemplate: "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            subdomains: ["a", "b", "c"]
        }, {
            extent: [
                43.4350, 22.2556,
                42.2265, 27.4850
            ],
            minZoom: 11,
            type: "shape",
            style: {
                fill: {
                    opacity: 0
                },
                stroke: {
                    color: "green",
                    width: 4
                }
            },
            dataSource: {
                type: "geojson",
                data: [{
                    "type": "Polygon",
                    "coordinates": [[
                        [ 23.3569, 42.6198 ],
                        [ 23.2360, 42.6743 ],
                        [ 23.2278, 42.7288 ],
                        [ 23.2666, 42.7505 ],
                        [ 23.3095, 42.7457 ],
                        [ 23.4046, 42.7089 ],
                        [ 23.4183, 42.6743 ],
                        [ 23.4204, 42.6299 ],
                        [ 23.3569, 42.6198 ]
                    ]]
                }]
            }
        }]
    });
</script>

layers.imagerySet

String

The bing map tile types. Possible options:

js
* aerial - Aerial imagery.
* aerialWithLabels - Aerial imagery with a road overlay.
* birdseye - Bird’s eye (oblique-angle) imagery
* birdseyeWithLabels - Bird’s eye imagery with a road overlay.
* road - Roads without additional imagery. (default)

Default: "road"

<div id="map"></div>
<script>
    $("#map").kendoMap({
        center: [30.268107, -97.744821],
        zoom: 3,
        layers: [{
            type: "bing",
            key: "YOUR_BING_MAPS_API_KEY",
            imagerySet: "aerial"
        }]
    });
</script>

layers.key

String

The API key for the layer. Currently supported only for Bing (tm) tile layers.

<div id="map"></div>
<script>
    $("#map").kendoMap({
        center: [30.268107, -97.744821],
        zoom: 3,
        layers: [{
            type: "bing",
            key: "YOUR_BING_MAPS_API_KEY",
            imagerySet: "road"
        }]
    });
</script>

layers.locationField

String

The data item field which contains the marker (symbol) location. The field should be an array with two numbers - latitude and longitude in decimal degrees.

Requires the dataSource option to be set.

Only applicable to "marker" and "bubble" layers.

Default: "location"

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "marker",
            locationField: "latlng",
            dataSource: {
                data: [{
                    latlng: [0, 0],
                    text: "POI"
                }]
            }
        }]
    });
</script>

layers.maxSize

Number

The maximum symbol size for bubble layer symbols.

Default: 100

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "bubble",
            maxSize: 50,
            dataSource: {
                data: [{
                    "location": [42, 12], "value": 10
                }, {
                    "location": [45, 15], "value": 25
                }]
            }
        }]
    });
</script>

layers.maxZoom

Number

The maximum zoom level at which to show this layer.

<div id="map"></div>
<script>
    $("#map").kendoMap({
        center: [30.268107, -97.744821],
        zoom: 14,
        layers: [{
            type: "tile",
            urlTemplate: "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            subdomains: ["a", "b", "c"],
            maxZoom: 13
        }, {
            minZoom: 14,
            type: "tile",
            urlTemplate: "https://#= subdomain #.tile-cyclosm.openstreetmap.fr/cyclosm/#= zoom #/#= x #/#= y #.png",
            subdomains: ["a", "b", "c"]
        }]
    });
</script>

layers.minSize

Number

The minimum symbol size for bubble layer symbols.

Setting non-zero value will distort symbol area to value ratio.

Default: 0

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "bubble",
            minSize: 10,
            dataSource: {
                data: [{
                    "location": [42, 12], "value": 10
                }, {
                    "location": [45, 15], "value": 25
                }]
            }
        }]
    });
</script>

layers.minZoom

Number

The minimum zoom level at which to show this layer.

<div id="map"></div>
<script>
    $("#map").kendoMap({
        center: [30.268107, -97.744821],
        zoom: 14,
        layers: [{
            type: "tile",
            urlTemplate: "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            subdomains: ["a", "b", "c"],
            maxZoom: 13
        }, {
            minZoom: 14,
            type: "tile",
            urlTemplate: "https://#= subdomain #.tile-cyclosm.openstreetmap.fr/cyclosm/#= zoom #/#= x #/#= y #.png",
            subdomains: ["a", "b", "c"]
        }]
    });
</script>

layers.opacity

Number

The opacity for the layer.

Default: 1

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

layers.shape

String

The default marker shape for data-bound markers. The following pre-defined marker shapes are available:

  • pinTarget
  • pin

Marker shapes are implemented as CSS classes on the marker element (span.k-marker). For example "pinTarget" is rendered as "k-marker-pin-target".

Default: "pinTarget"

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "marker",
            shape: "pin",

            locationField: "latlng",
            dataSource: {
                data: [{
                    latlng: [0, 0]
                }]
            }
        }]
    });
</script>

layers.style

Object

The default style for shapes.

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "shape",
            style: {
                fill: {
                    color: "red",
                    opacity: 1
                },
                stroke: {
                    color: "green",
                    width: 4,
                    dashType: "longDashDot",
                    opacity: 0.5
                }
            },
            dataSource: {
                type: "geojson",
                data: [{
                    "type": "Polygon",
                    "coordinates": [
                        [[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]
                    ]
                }]
            }
        }]
    });
</script>

layers.subdomains

Array

A list of subdomains to use for loading tiles. Alternating between different subdomains allows more requests to be executed in parallel.

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

layers.symbol

String|Function

The symbol to use for bubble layers. Possible values:

  • "circle" - A circle.
  • "square" - A square symbol.
  • function - An user defined symbol.

The function must accept an object with the following fields:

  • center - The symbol center on the current layer.
  • size - The symbol size.
  • style - The symbol style.
  • dataItem - The dataItem used to create the symbol.
  • location - The location of the data point.

The function return value must be a kendo.drawing.Shape.

Default: "circle"

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "bubble",
            symbol: "square",
            dataSource: {
                data: [{
                    "location": [42, 12], "value": 10
                }, {
                    "location": [45, 15], "value": 25
                }]
            }
        }]
    });
</script>

layers.tileSize

Number

The size of the image tile in pixels.

Default: 256

<div id="map"></div>
<script>
    $("#map").kendoMap({
        center: [30.268107, -97.744821],
        zoom: 3,
        layers: [{
            type: "tile",
            urlTemplate: "https://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            attribution: "&copy; OpenStreetMap",
            tileSize: 512
        }]
    });
</script>

layers.titleField

String

The data item field which contains the marker title. Requires the dataSource option to be set.

Default: "title"

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "marker",
            locationField: "latlng",
            titleField: "text",
            dataSource: {
                data: [{
                    latlng: [0, 0],
                    text: "POI"
                }]
            }
        }]
    });
</script>

layers.tooltip

Object

The default Kendo UI Tooltip options for data-bound markers.

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "marker",
            locationField: "latlng",
            titleField: "title",
            tooltip: {
                autoHide: false,
                template: (data) => `<strong>${data.title}</strong><br/>${data.description}`,
                position: "top",
                showOn: "click"
            },
            dataSource: {
                data: [{
                    latlng: [42.6977, 23.3219],
                    title: "Sofia",
                    description: "Capital of Bulgaria"
                }]
            }
        }]
    });
</script>

layers.type

String

The layer type. Supported types are:

  • "bing" - a Bing (tm) tile layer
  • "tile" - a generic "slippy map" tile layer
  • "marker" - a data-bound marker layer
  • "shape" - a vector shape layer, e.g. bound to GeoJSON data
  • "bubble" - a specialized vector shape layer for bubble maps
<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "tile",
            urlTemplate: "https://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            attribution: "&copy; OpenStreetMap"
        }]
    });
</script>

layers.urlTemplate

String

The URL template for tile layers. Template variables:

  • x - X coordinate of the tile
  • y - Y coordinate of the tile
  • zoom - zoom level
  • subdomain - Subdomain for this tile. See subdomains
<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "tile",
            urlTemplate: "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            subdomains: ["a", "b", "c"],
            attribution: "&copy; OpenStreetMap"
        }]
    });
</script>

layers.valueField

String

The value field for bubble layer symbols. The data item field should be a number.

Default: "value"

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "bubble",
            locationField: "loc",
            valueField: "val",
            dataSource: {
                data: [{
                    "loc": [42, 2], "val": 100
                }, {
                    "loc": [45, 7], "val": 150
                }]
            }
        }]
    });
</script>

layers.zIndex

Number

The zIndex for this layer.

Layers are normally stacked in declaration order (last one is on top).

<div id="map"></div>
<script>
  $("#map").kendoMap({
    layers: [{
      type: "tile",
      urlTemplate: "https://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
      attribution: "&copy; OpenStreetMap",
      zIndex: 1
    }, {
    //this layer is not visible as the zIndex of the above one is higher
      type: "shape",
      dataSource: {
        type: "geojson",
        data: [{
          "type": "Polygon",
          "coordinates": [
            [[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]
          ]
        }]
      }
    }]
  });
</script>

Related Members

  • layers.tooltip - The default Kendo UI Tooltip options for data-bound markers.
  • layers.tooltip.animation - A collection of {Animation} objects, used to change default animations. A value of false will disable all animations in the widget.
  • layers.tooltip.animation.close - The animation that will be used when a Tooltip closes.
  • layers.tooltip.animation.open - The animation that will be used when a Tooltip opens.
  • layers.tooltip.content - The text or a function which result will be shown within the tooltip. By default the tooltip will display the target element title attribute content.
  • layers.style - The default style for shapes.
  • layers.style.fill - The default fill for layer shapes. Accepts a valid CSS color string or object with detailed configuration.
  • layers.style.stroke - The default stroke for layer shapes. Accepts a valid CSS color string or object with detailed configuration.
In this article
layerslayers.attributionlayers.autoBindlayers.culturelayers.dataSourcelayers.extentlayers.imagerySetlayers.keylayers.locationFieldlayers.maxSizelayers.maxZoomlayers.minSizelayers.minZoomlayers.opacitylayers.shapelayers.stylelayers.subdomainslayers.symbollayers.tileSizelayers.titleFieldlayers.tooltiplayers.typelayers.urlTemplatelayers.valueFieldlayers.zIndex
Not finding the help you need?
Contact Support