0

I'm filtering a geojson layer by user inputs,and works fine for the first query, and works fine for the first query, the problem is with the second so on. starting from the second query brings me the last layer plus the new one I already tried map.removeLayer(layer) any ideas on how can I get only the new filter?,

function query(data) {
    var input=null;
    var user = null;
    var input = document.getElementById("userInput").value;

    departamentos.then(function(data) {
    var alldeptos = L.geoJson(data);  

    user = L.geoJson(data, {

        filter: function (feature, layer) {
            //console.log(feature)
            return feature.properties.nom_dpto == input;
        },

    });
    });
    $("#allbus").click(function() {
        map.addLayer(alldeptos)
        map.removeLayer(user)
    });
    $("#form").click(function() {
        map.removeLayer(alldeptos)
        map.removeLayer(user)
        map.addLayer(user)
    });
   });      
}

First filter

New filter (shouldn't have the first one

8
  • Proper code indentation is half of a good programming.
    – TomazicM
    Commented Apr 20, 2020 at 19:47
  • It's not clear what you would like to achieve. Have displayed only one layer at a time? Clicking #all for layer alldepots, clicking #form for layer caldas and clicking #boyaca for layer boyaca?
    – TomazicM
    Commented Apr 20, 2020 at 19:53
  • the idea is that the user can search for an specific properties.nom_dpto and it works fine for the first time, but the second time it brings the new result and also the first one Commented Apr 20, 2020 at 20:05
  • Sorry, but it's still not clear. Edit the question and precisely describe just what you want to achieve.
    – TomazicM
    Commented Apr 21, 2020 at 5:18
  • Hope this time the question is more clear Commented Apr 21, 2020 at 16:25

1 Answer 1

0

I solved this by adding the layer to a new layer group

var fil_dpt = L.layerGroup().addTo(map);

function query(data) {
    var input = document.getElementById("userInput").value;
    departamentos.then(function(data) {
    var alldeptos = L.geoJson(data); 
    user = L.geoJson(data, {
        filter: function (feature, layer) {
            //console.log(feature)
            return feature.properties.nom_dpto == input;
        },
    });
    $("#allbus").click(function() {
        if (map.hasLayer(user)) map.removeLayer(user)
        //if (!map.hasLayer(alldeptos)) map.addLayer(alldeptos);
        if (map.hasLayer(alldeptos)){ map.removeLayer(alldeptos)}
            else {map.addLayer(alldeptos)}
});
    $("#form").click(function() {
        fil_dpt.clearLayers();
        if (map.hasLayer(alldeptos)) map.removeLayer(alldeptos);
        //if (!fil_dpt.hasLayer(user)) fil_dpt.addLayer(user);
        if (fil_dpt.hasLayer(user)){ fil_dpt.removeLayer(user)}
             else {fil_dpt.addLayer(user)}
    });
});     
}

it was also with the help of deleted answer of @TomazicM first filter second filter

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.