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

Filter Map Markers Dynamically


Product Version 2017.3 1026
Product Progress® Kendo UI® Map for jQuery


How can I dynamically filter the layer of markers in the Map?


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>

        function createMap() {
                center: [30.268107, -97.744821],
                zoom: 15,
                layers: [{
                    type: "tile",
                    urlTemplate: "http://#= subdomain zoom #/#= x #/#= y #.png",
                    subdomains: ["a", "b", "c"],
                    attribution: "&copy; <a href=''>OpenStreetMap contributors</a>." +
                                 "Tiles courtesy of <a href=''>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
          }, 1000)

In this article