3

I want to insert a condition in a geojson filter. This condition is based in a variable called here varState:

<button id='button1'>button1</button>
<button id='button2'>button2</button>

var varState = "Initial value";

var geojsonLayer = L.geoJson(data, {                
    pointToLayer: function (feature, latlng) {  
      return L.circleMarker(latlng, {
        radius: 5.0,
        fillColor: '#e1118e',
        color: '#000000',
        weight: 1,
        opacity: 1.0,
        fillOpacity: 1.0
        })
      },
      filter: function(feature, layer) {    
   if (varState == "01") {  
     return (feature.properties.field1 == "yes" && feature.properties.field2 == "yes");
   }
   else if (varState == "02") {
     return (feature.properties.field1 == "yes" && feature.properties.field2 == "no");
    }
    else {
      return feature.properties.field1 == "yes";            
    }
}    

var feature_group = new L.featureGroup([]); 
feature_group.addLayer(geojsonLayer);
feature_group.addTo(map);

$("#button1").click(function() {
    map.removeLayer(geojsonLayer);
    varState = "01";
    map.addLayer(geojsonLayer);
});

$("#button2").click(function() {
    map.removeLayer(geojsonLayer);
    varState = "02";
    map.addLayer(geojsonLayer);
});

It always return me the last condition despite my varState is 01,02 or null.

Does someone has already succeed this ?

5
  • 2
    This is hard to answer without knowing how varState is created. Are you sure varState has been defined before geojsonLayer? What shows up in the console if you put console.log(varState); as the first line of your filter function? May 4, 2016 at 15:48
  • Where and when is your varState assigned?
    – ghybs
    May 4, 2016 at 15:49
  • varState is created before geojsonLayer. It's a string wich change when a button is clicked. I have completed the original post for a better comprehesion.
    – GeoGyro
    May 5, 2016 at 20:06
  • Your click events don't do anything to your geojson layer - you need to reapply the filter, too.
    – mlinth
    May 6, 2016 at 9:04
  • I add a layer when click (another layer is removed). How can I reapply the filter ?
    – GeoGyro
    May 6, 2016 at 9:39

1 Answer 1

1

According to the answer here, Leaflet doesn't "remember" what and whether a layer was filtered, so you need to reinitialise the layer when your filter changes.

Something like this... You'll need to store your data somewhere, and you'll need to call the function from your init function with the default value.

(BTW if you're going to have more than two filters, I'd suggest designing things so you're not hardcoding values in buttons and in filter functions. Create yourself a dictionary of lookup and filter values, load that, then have one button with a dropdown to apply the selected filter. Then all you have to do to add or change filters is change the dictionary and you don't have to touch the code...).

function refilterLayer(varState) {

// remove the layer if it exists - you'll have to look up how to do that

   var geojsonLayer = L.geoJson(data, {                
    pointToLayer: function (feature, latlng) {  
      return L.circleMarker(latlng, {
        radius: 5.0,
        fillColor: '#e1118e',
        color: '#000000',
        weight: 1,
        opacity: 1.0,
        fillOpacity: 1.0
        })
      },
      filter: function(feature, layer) {    
      if (varState == "01") {  
     return (feature.properties.field1 == "yes" &&   feature.properties.field2 == "yes");
      }
      else if (varState == "02") {
        return (feature.properties.field1 == "yes" && feature.properties.field2 == "no");
       }
       else {
         return feature.properties.field1 == "yes";            
       }

   }).addTo(map);    

 }

}



// Call the refilter function from the button click event
     $("#button1").click(function() {
           refilterLayer('01');
       });
3
  • Ok. I reinitialise the layer when the button is clicked with a map.removeLayer(geojsonLayer); varState = "01"; map.addLayer(geojsonLayer); but firebug returns me t.onAdd is not a function
    – GeoGyro
    May 6, 2016 at 14:28
  • Sorry, but removing then adding a layer you have created is not reinitialising it. That won't change the filter. Have a look at the code I posted - the function refilterLayer() creates a new layer with the filter and adds it to the map. It's only something like that which will do the job.
    – mlinth
    May 6, 2016 at 18:38
  • You're right, I must replace map.addLayer(geojsonLayer); by refilterLayer();. Thanks !
    – GeoGyro
    May 10, 2016 at 9:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.