Filter Map Markers Dynamically
Environment
Product Version | 2017.3 1026 |
Product | Progress® Kendo UI® Map for jQuery |
Description
How can I dynamically filter the layer of markers in the Map?
Solution
The marker layer is added to the Map when the Map is initialized. To filter the markers, re-initialize the Map with the filtered data.
<div id="example">
<div id="map"></div>
<script>
function createMap() {
$("#map").kendoMap({
center: [30.268107, -97.744821],
zoom: 15,
layers: [{
type: "tile",
urlTemplate: "http://#= subdomain #.tile2.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png",
subdomains: ["a", "b", "c"],
attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>." +
"Tiles courtesy of <a href='http://www.opencyclemap.org/'>Andy Allan</a>"
}, {
type: "marker",
dataSource: {
transport: {
read: {
url: "../content/dataviz/map/store-locations.json",
dataType: "json"
}
},
filter: [{field: "name", operator: "startswith", value: "A"}]
},
locationField: "latlng",
titleField: "name"
}],
});
setTimeout(function(){ //to simulate dynamic filtering
var map =$("#map").data("kendoMap");
var options = map.options;
options.layers[1].dataSource.filter = [{field: "name", operator: "startswith", value: "F"}]; // 1 points to the markers layer that we want to filter
map.destroy();
map.setOptions(options);
$("#map").kendoMap(options);
}, 1000)
}
$(document).ready(createMap);
</script>
</div>