1

I have a simple map that has 3 radio buttons, depending on the button selected defines how my layer is filtered. I was able to look at Leaflet : filter with condition and I can get my data added to the map. But I'm missing the logic to remove the layer when I switch radio buttons. So I just keep adding layers the more I change buttons.

map.removeLayer(ci_data); does not seem to work.

I have a limitation to use the same layer name as my app needs the ability to edit the GeoJSON layer coming from the database. 

function refilterLayer(theLayerUsed) {

    ci_data = L.geoJson(null, {

        pointToLayer: function(feature, latlng) {

            return L.circleMarker(latlng, {
                color:'black',
                fillColor:  setColor(feature.properties.Verified),
                fillOpacity: 1,
                radius: 8
            })
        },              
        filter: function(feature, layer) {   

              if (theLayerUsed == 1) {  
             return (feature.properties.Verified == "Y" );
              }
              else if (theLayerUsed == 2) {
                return (feature.properties.Verified == "N");
               }
               else {
                 return (feature.properties.Verified == "N")  || (feature.properties.Verified == "Y" );          
               }
        },

    }).addTo(map);  

    $.getJSON(url2data, function(data) {
        ci_data.addData(data);
     });

}

Improve this question

2 Answers 2

Reset to default
1

Your problem is one of variable scope. The variable name ci_data appears to be local to the function refilterLayer and will therefore not be recognized by a subsequent call to map.removeLayer(ci_data) outside this function.

The simplistic solution is to declare the layer name variable at a higher (or possibly even global) level with a simple var ci_data;. When you do this, the removeLayer call should work as it now knows about your variable ci_data.

However, just be careful that you are not endlessly adding data to the same layer. So, a better solution would be to take your ci_data definition out of that filter function altogether and declare it at the same level as your map object (so your var ci_data; statement above becomes the whole layer definition). Map now knows about it and you can add your data to it whenever you want via some other function (possibly using clearLayers() to remove old points first). You don't need to keep recreating the same layer over and over.

Improve this answer
1
  • I was dragged away for a couple days, I did try your comments and while I can remove the layer, the filter seems to fail as it's ignored. Google shows issues with Leaflet GeoJSON and clearLayers, So I'm going to try hacking some more.
    – Bill Chappell
    Commented May 16, 2017 at 19:01
1

Got it, I needed to use a layerGroup for clearLayers to work, and my filter expression was ignored when I used a variable, so I just passed the layer creation into by radiobutton listener. A little extra code but it works. 

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Layers Control Example</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<style>
      html, body,  #map {
        width : 100%;
        height : 100%;
      }
</style>
</head>
<body>
<div id="panel">
<form>
    <input type="radio" id="radioOne" name="verify" value="N" checked> Verified No &nbsp; <br>
    <input type="radio" id="radioTwo" name="verify" value="Y" > Verified Yes &nbsp;<br>
</form><hr>

</div>
    <div id="map" ></div>
<script>
var url = 'CIPts.json';  //REST service

var map = L.map('map').setView([42.736424, -73.762713], 10);  

var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{ 
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});
    osm.addTo(map);

////////////////////    
var ci_data;

    ci_data = L.geoJson(null, {

        pointToLayer: function(feature, latlng) {

            return L.circleMarker(latlng, {
                color:'black',
                fillColor:  'blue',
                fillOpacity: 1,
                radius: 8
            })
        },  
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.Verified);
        },
        filter: function(feature, layer) {   
             return (feature.properties.Verified !== "Y" );
        },

    });     

     $.getJSON(url, function(data) {
       ci_data.addData(data);
    });

    var myData =  L.layerGroup([]);
        myData.addLayer(ci_data);
        myData.addTo(map); 







    document.getElementById("radioOne").addEventListener('click', function(event) {
    theExpression = 'feature.properties.Verified !== "Y" ';
    console.log(theExpression); 

        myData.clearLayers();
        map.removeLayer(myData);

        ci_data = L.geoJson(null, {

            pointToLayer: function(feature, latlng) {

                return L.circleMarker(latlng, {
                    color:'black',
                    fillColor:  'blue',
                    fillOpacity: 1,
                    radius: 8
                })
            },  
            onEachFeature: function (feature, layer) {
                layer.bindPopup(feature.properties.Verified);
            },
            filter: function(feature, layer) {   
                 return (feature.properties.Verified !== "Y" );
            },

        });


        $.getJSON(url, function(data) {
               ci_data.addData(data);
        });

        myData.addLayer(ci_data);
        myData.addTo(map);;
  });

    document.getElementById("radioTwo").addEventListener('click', function(event) {
    theExpression = 'feature.properties.Verified == "Y" ';  
    console.log(theExpression);
        map.removeLayer(myData);
        myData.clearLayers();

        ci_data = L.geoJson(null, {

            pointToLayer: function(feature, latlng) {

                return L.circleMarker(latlng, {
                    color:'black',
                    fillColor:  'blue',
                    fillOpacity: 1,
                    radius: 8
                })
            },  
            onEachFeature: function (feature, layer) {
                layer.bindPopup(feature.properties.Verified);
            },
            filter: function(feature, layer) {   
                 return (feature.properties.Verified == "Y" );
            },

        });

        $.getJSON(url, function(data) {
               ci_data.addData(data);
        });

        myData.addLayer(ci_data);
        myData.addTo(map);
  });


 </script>
</body>
</html>
Improve this answer

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.