Layers

The information that the Map component renders is organized into layers.

Types of Layers

The available Map layers are:

Tile

Tile layers are suitable for displaying:

<div id="vueapp" class="vue-app">
    <kendo-map :center="[30.268107, -97.744821]"
               :zoom="5"
               style="width: 100%; height: 500px;">
        <kendo-map-layer :type="'tile'"
                         :url-template="'https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png'"
                         :subdomains="['a', 'b', 'c']"
                         :attribution="'&copy; <a href=\'https://osm.org/copyright\'>OpenStreetMap contributors</a>'">
        </kendo-map-layer>
    </kendo-map>
</div>
Vue.use(MapInstaller);

new Vue({
    el: '#vueapp'
})

Bing

Microsoft Bing provides dedicated support and requires you to obtain an API key.

The following example demonstrates how to display an OpenStreetMap layer.

<div id="vueapp" class="vue-app">
    <kendo-map :center="[51.505, -0.09]"
            :zoom="3" style="width: 100%; height: 500px;">
        <kendo-map-layer :type="'bing'"
            :imagery-set="'aerialWithLabels'"
            :api-key="'AqaPuZWytKRUA8Nm5nqvXHWGL8BDCXvK8onCl2PkC581Zp3T_fYAQBiwIphJbRAK'"></kendo-map-layer>
    </kendo-map>
</div>
Vue.use(MapInstaller);

new Vue({
    el: '#vueapp'
})

Marker

The Marker layer enables you to bind a collection of data and render markers on the Map.

<div id="vueapp" class="vue-app">
    <kendo-map :center="[30.268107, -97.744821]"
            :zoom="15" style="width: 100%; height: 500px;">

        <kendo-map-layer :type="'tile'"
            :url-template="'http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png'"
            :subdomains="['a', 'b', 'c']"
            :attribution="'&copy; <a href=\'http://osm.org/copyright\'>OpenStreetMap contributors</a>'" ></kendo-map-layer>

        <kendo-map-layer :type="'marker'"
            :data-source="markers"
            :location-field="'latlng'"
            :title-field="'name'"></kendo-map-layer>
    </kendo-map>
</div>
Vue.use(MapInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            // The data set can be also fetched with the kendo.data.DataSource utility.
            // https://demos.telerik.com/kendo-ui/map/remote-markers
            markers: [{
                    latlng: [ 30.2675, -97.7409 ],
                    name: 'Zevo Toys'
                },{
                    latlng: [ 30.2707, -97.7490 ],
                    name: 'Foo Bars'
                },{
                    latlng: [ 30.2705, -97.7409 ],
                    name: 'Mainway Toys'
                },{
                    latlng: [ 30.2686, -97.7494 ],
                    name: 'Acme Toys'
            }]
        }
    }
})

Shape

The Shape layer enables you to bind the layer to GeoJson data and plot shapes on the Map.

<div id="vueapp" class="vue-app">
    <kendo-map :center="[20,20]" style="width: 100%; height: 500px;">

        <kendo-map-layer :type="'shape'"
            :data-source="geoJsonData"
            :style-fill-color="'red'"
            :style-fill-opacity="1"
            :style-stroke-color="'green'"
            :style-stroke-width="4"
            :style-stroke-dash-type="'longDashDot'"
            :style-stroke-opacitt="0.5"></kendo-map-layer>
    </kendo-map>
</div>
Vue.use(MapInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            // The data set can be also fetched with the kendo.data.DataSource utility.
            // https://demos.telerik.com/kendo-ui/map/geojson
            geoJsonData: [{
                type: 'Polygon',
                coordinates: [
                    [[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]
                ]
            }]
        }
    }
})

Bubble

The Bubble layer draws circle or square shapes whose size is defined by the value of the data that is bound.

<div id="vueapp" class="vue-app">
    <kendo-map :center="[10,10]" style="width: 100%; height: 500px;">

        <kendo-map-layer :type="'bubble'" :symbol="'circle'"
            :data-source="circleBubble"></kendo-map-layer>

        <kendo-map-layer :type="'bubble'" :symbol="'square'"
            :data-source="squareBubble"></kendo-map-layer>
    </kendo-map>
</div>
Vue.use(MapInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            // The data set can be also fetched with the kendo.data.DataSource utility.
            // https://demos.telerik.com/kendo-ui/map/bubble-layer
            circleBubble: [{
                    location: [0, 0], value: 10
                }, {
                    location: [0, 20], value: 25
            }],
            squareBubble: [{
                    location: [20, 0], value: 10
                }, {
                    location: [20, 20], value: 25
            }]
        }
    }
})

In this article