对Mapbox中的标记进行多重过滤

Question

I am trying to load a geojson data in mapbox, where I want to apply multiple filtering using check-box on the markers. I tried looking at the example given here: https://www.mapbox.com/mapbox.js/example/v1.0.0/non-exclusive-markers/

So the filtering here is based on the health and the asset code of each marker. Whether 'Healthy','Warning','Stopped' or '123125','123135','123145'. The code works to load the map and also place the markers based on the color of its health. The filter menu also gets the six filter options. But when selecting two filters with same marker the marker disappears from the screen.

For example, when selecting '123125' and then selecting 'Warning'. The yellow marker appears on the screen but when deselecting any one of the filters it disappears. I am not getting how to prevent this. Same thing happens with '123135', 'Stopped' and for '123145','Healthy'.

Kindly have a look at the code below and help me out.

 <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script> <script src="/js/leaflet-0.7.2/leaflet.ajax.min.js"></script> <script> L.mapbox.accessToken = 'pk.eyJ1IjoiZG9zcyIsImEiOiI1NFItUWs4In0.-9qpbOfE3jC68WDUQA1Akg'; var map = L.mapbox.map('map', 'mapbox.streets'); var featureLayerGeoJSON = { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "title":"Volkswagen Group", "healthy":false, "warning":true, "stopped":false, "marker-color":"#FFFF00", "marker-size":"medium", "Asset_Code": "123125", "Health_Code": "Warning" }, "geometry": { "type": "Point", "coordinates": [ -43.172502,-22.965881 ] } }, { "type": "Feature", "properties": { "title":"Volkswagen Group", "healthy":false, "warning":true, "stopped":false, "marker-color":"#FF0000", "marker-size":"medium", "Asset_Code": "123135", "Health_Code": "Stopped" }, "geometry": { "type": "Point", "coordinates": [ -8.990956,38.581054 ] } }, { "type": "Feature", "properties": { "title":"Volkswagen Group", "healthy":false, "warning":true, "stopped":false, "marker-color":"#1EB01E", "marker-size":"medium", "Asset_Code": "123145", "Health_Code": "Healthy" }, "geometry": { "type": "Point", "coordinates": [ 139.740667,35.626567 ] } } ] }; map.featureLayer.setGeoJSON(featureLayerGeoJSON); // Find and store a variable reference to the list of filters. var filters = document.getElementById('filters'); // Wait until the marker layer is loaded in order to build a list of possible // types. If you are doing this with another featureLayer, you should change // map.featureLayer to the variable you have assigned to your featureLayer. var makeCheckboxes1 = function() { // Collect the types of symbols in this layer. you can also just // hardcode an array of types if you know what you want to filter on, // like var types = ['foo', 'bar']; var typesObj = {}, types = []; map.featureLayer.eachLayer(function (entity) { typesObj[entity.feature.properties['Asset_Code']] = true; }) for (var k in typesObj) types.push(k); var checkboxes = []; // Create a filter interface. for (var i = 0; i < types.length; i++) { // Create an an input checkbox and label inside. var item = filters.appendChild(document.createElement('div')); var checkbox = item.appendChild(document.createElement('input')); var label = item.appendChild(document.createElement('label')); checkbox.type = 'checkbox'; checkbox.id = types[i]; checkbox.checked = true; // create a label to the right of the checkbox with explanatory text label.innerHTML = types[i]; label.setAttribute('for', types[i]); // Whenever a person clicks on this checkbox, call the update(). checkbox.addEventListener('change', update); checkboxes.push(checkbox); } // This function is called whenever someone clicks on a checkbox and changes // the selection of markers to be displayed. function update() { var enabled = {}; // Run through each checkbox and record whether it is checked. If it is, // add it to the object of types to display, otherwise do not. for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].checked) enabled[checkboxes[i].id] = true; } map.featureLayer.setFilter(function(feature) { // If this symbol is in the list, return true. if not, return false. // The 'in' operator in javascript does exactly that: given a string // or number, it says if that is in a object. // 2 in { 2: true } // true // 2 in { } // false return (feature.properties['Asset_Code'] in enabled); }); } } var makeCheckboxes2 = function() { // Collect the types of symbols in this layer. you can also just // hardcode an array of types if you know what you want to filter on, // like var types = ['foo', 'bar']; var typesObj = {}, types = []; map.featureLayer.eachLayer(function (entity) { typesObj[entity.feature.properties['Health_Code']] = true; }) for (var k in typesObj) types.push(k); var checkboxes = []; // Create a filter interface. for (var i = 0; i < types.length; i++) { // Create an an input checkbox and label inside. var item = filters.appendChild(document.createElement('div')); var checkbox = item.appendChild(document.createElement('input')); var label = item.appendChild(document.createElement('label')); checkbox.type = 'checkbox'; checkbox.id = types[i]; checkbox.checked = true; // create a label to the right of the checkbox with explanatory text label.innerHTML = types[i]; label.setAttribute('for', types[i]); // Whenever a person clicks on this checkbox, call the update(). checkbox.addEventListener('change', update); checkboxes.push(checkbox); } // This function is called whenever someone clicks on a checkbox and changes // the selection of markers to be displayed. function update() { var enabled = {}; // Run through each checkbox and record whether it is checked. If it is, // add it to the object of types to display, otherwise do not. for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].checked) enabled[checkboxes[i].id] = true; } map.featureLayer.setFilter(function(feature) { // If this symbol is in the list, return true. if not, return false. // The 'in' operator in javascript does exactly that: given a string // or number, it says if that is in a object. // 2 in { 2: true } // true // 2 in { } // false return (feature.properties['Health_Code'] in enabled); }); } } makeCheckboxes1(); makeCheckboxes2(); </script> 

 <style> body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } .filter-ui { background:#fff; position:absolute; top:10px; right:10px; z-index:100; padding:10px; border-radius:3px; } </style> 

 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Multiple filters on markers</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src='https://api.mapbox.com/mapbox.js/v2.3.0/mapbox.js'></script> <link href='https://api.mapbox.com/mapbox.js/v2.3.0/mapbox.css' rel='stylesheet' /> </head> <body> <nav id='filters' class='filter-ui'> <h4 align='center'>Filter based on Health</h4> </nav> <div id='map'></div> </body> </html> 

Kindly help me with this.

Answer 1

You defined two append function in your code;

checkboxes.push(checkbox); //this is first when makeCheckboxes1() call.
checkboxes.push(checkbox); //this is first when makeCheckboxes2() call.

When a checkbox list is empty it will clear all sections. You need to create a checkbox object which contains these two list and then you can append.

Fiddle Example

Problem: Now you have duplicate objects. You need to control types, if exist don't push object to types.