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

LayerDefaults

configuration

The default configuration for map layers by type.

layerDefaults

Object

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

layerDefaults.bing

Object

The default configuration for Bing (tm) tile layers.

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

layerDefaults.bubble

Object

The default configuration for bubble layers.

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

layerDefaults.marker

Object

The default configuration for marker layers.

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

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

layerDefaults.shape

Object

The default configuration for shape layers.

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layerDefaults: {
            shape: {
                attribution: "&copy; Company Inc."
            }
        },
        layers: [{
            type: "shape",
            dataSource: {
                type: "geojson",
                data: [{
                    "type": "Polygon",
                    "coordinates": [
                        [[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]
                    ]
                }]
            }
        }]
    });
</script>

layerDefaults.tile

Object

The default configuration for tile layers.

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

layerDefaults.tileSize

Number

The size of the image tile in pixels.

Default: 256

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

Related Members