2

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 ?

  • 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? – nathansnider May 4 '16 at 15:48
  • Where and when is your varState assigned? – ghybs May 4 '16 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 '16 at 20:06
  • Your click events don't do anything to your geojson layer - you need to reapply the filter, too. – mlinth May 6 '16 at 9:04
  • I add a layer when click (another layer is removed). How can I reapply the filter ? – GeoGyro May 6 '16 at 9:39
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');
       });
  • 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 '16 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 '16 at 18:38
  • You're right, I must replace map.addLayer(geojsonLayer); by refilterLayer();. Thanks ! – GeoGyro May 10 '16 at 9:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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