Filter GeoJSON by attribute in Leaflet using a button

Question

I have a GeoJSON point layer group styled as a circle marker; it has a color attribute which can be one of many values: white, black, blue, red etc.

I want to create a filter based on that attribute, so I created a Bootstrap button with a Dropdown for a selection of four attributes.

I tried the built-in filter as pointed in this question,

var redcolor = L.geoJson(colors, {filter: redFilter})

function redFilter(feature) {
  if (feature.properties.hue === "red") return true
}

and assigning it to its respective button using jQuery:

$("#red").click(function(event) {
    event.preventDefault();
    if(map.hasLayer(redcolor)) {
        $(this).removeClass('selected');
        map.removeLayer(redcolor);
    } else {
        map.addLayer(redcolor);        
        $(this).addClass('selected');
   }
})

but I don't want to create a separate layer group; the filtering should happen in the original one.

Answer 1

You need to create a grouplayer and from that you can add or remove the layer, in that way refreshing the data with the filter from the same dataset.

Here are two working examples: the first using buttons, the second radio buttons.

http://bl.ocks.org/zross/47760925fcb1643b4225

http://www.gistechsolutions.com/leaflet/DEMO/filter/filter.html

Answer 2

Here is an example of using a dropdown to filter out values in the geojson layer.

JS Bin: https://jsbin.com/sasojat/edit?html,js,output

There are many possible solutions, but this one works like this:

1. Create a variable to store the layergroup and a variable to contain the filter-out value.

   var dataLayerGroup;

   var filterval = document.getElementById("filter").value;

2. Write your filter function to test for not-matching the filter-out variable.

   var colorFilter = function (feature) {
   if (feature.properties.color !== filterval) return true}
   

3. Create a function that deletes the layer if it exists, then adds it again.

   function addLayerToMap(){
    //remove the layer from the map entirely
    if (map.hasLayer(dataLayerGroup)){
        dataLayerGroup.remove();
    }
    //add the data layer and style based on attribute. 
    dataLayerGroup = L.geoJson(pointsData, {
        filter: colorFilter,
        pointToLayer: function(feature, latlng) {
            return new L.CircleMarker(latlng, {radius: 8, fillOpacity: 0.85});
        },
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.color);
        }, 
        style: function(feature){
            return{color:  feature.properties.markercolor};
          },  
        }).addTo(map);
    }
   

4. Create a listener for the filter input

    $("#filter").on("input", function(){
    filterval = document.getElementById("filter").value;
    console.log("the filter was changed to ", filterval); 
    //add the layer to the map again, now that we have changed the filter value. 
    addLayerToMap();
    });
   

5. Call the function to add the layer to the map for the first time

    addLayerToMap();
   

I'm still slightly unclear on why you don't want to use separate layergroups for each filter option, like the links that Bill posted do, but maybe this alternative will help you.