hasLayer and removeLayer methods not working on leaflet map as expected

Question

I am trying check if Layer already exist on map...

• IF(no) THEN Addlayer on Map.
• IF(yes) THEN removeLayer and AddLayer on map "because I dont want same Layer to be added again and again on map".

I think, I am close but I dont know why its not working... Help Please...

            // load GeoJSON from an external file
            $.getJSON(url,function(data){
                // add GeoJSON layer to the map once the file is loaded
                DistrictLayer = L.geoJson(data, {
                    style: {color: "#000", weight: 2, fillColor: "#03a6fa", fillOpacity: .6},
                    onEachFeature: function (feature, layer) {
                        layer.bindPopup("<strong>" + feature.properties['DISTRICT'])
                    }

                })
                if(map.hasLayer(DistrictLayer)){
                    map.removeLayer(DistrictLayer);
                    map.addLayer(DistrictLayer);
                    map.fitBounds(DistrictLayer.getBounds());
                }
                else{
                    map.addLayer(DistrictLayer);
                    map.fitBounds(DistrictLayer.getBounds());
                }

            });

Answer 1

I tested your code with a geojson of mine and it's working. I've just put two console.log() to test it. If I add the layer to the map before, the "if" condition is working (console says: the map had the layer):

            map.addLayer(DistrictLayer);
            if(map.hasLayer(DistrictLayer)){
                map.fitBounds(DistrictLayer.getBounds());
                console.log('the map had the layer')
            }
            else{
                map.addLayer(DistrictLayer);
                map.fitBounds(DistrictLayer.getBounds());
                console.log('the map had not the layer')
            }

If I don't put the layer before, the 'else' condition is working (console says: the map had not the layer).

            if(map.hasLayer(DistrictLayer)){
                map.fitBounds(DistrictLayer.getBounds());
                console.log('the map had the layer')
            }
            else{
                map.addLayer(DistrictLayer);
                map.fitBounds(DistrictLayer.getBounds());
                console.log('the map had not the layer')
            }

Note that I removed the 2 lines where you remove the layer and then add it again. To me, it is completely useless.

Answer 2

DistrictLayer points to a new object so you can't test it and expect it to be the same thing just because the variable name is unchanged. So you should see if it's in the map first, and if it is, then remove it. Then you can define it and add it to the map.

var DistrictLayer;

// load GeoJSON from an external file
$.getJSON(url, function(data){
    if(map.hasLayer(DistrictLayer)){ //the old DistrictLayer
         map.removeLayer(DistrictLayer);
    }
    // Make a new DistrictLayer
    DistrictLayer = L.geoJson(data, {
        style: {color: "#000", weight: 2, fillColor: "#03a6fa", fillOpacity: .6},
        onEachFeature: function (feature, layer) {
            layer.bindPopup("<strong>" + feature.properties['DISTRICT']);
            }
         });
    map.addLayer(DistrictLayer);
    map.fitBounds(DistrictLayer.getBounds());
    }
);

Answer 3

Does map.hasLayer(DistrictLayer) is always false? I "guess" that definening DistrictLayer prior to checking map.hasLayer(DistrictLayer) makes newly defined DistrictLayer allways different than the DistrictLayer loaded to map.

I mean defining DistrinctLayer on each ajax call and cheking wether the map(which has DistrcitLayer added on previous ajax call) has that layer may cause unexpected behaviour.

map.addLayer(DistrictLayer);
if(map.hasLayer(DistrictLayer)){

this adds newly defined DistrictLayer and checks map for the newly added DistictLayer and returns true as expected.

Simplest solution would be removing Distrcitlayer on each ajax call and adding newly creted one(this MAY cause performanve issues). For a better solution each layer of map should be compared with newly created DistrictLayer.

// load GeoJSON from an external file
$.getJSON(url,function(data){
    //remove previously loaded DistrictLayer from map
    map.removeLayer(DistrictLayer);
    // add GeoJSON layer to the map once the file is loaded
    DistrictLayer = L.geoJson(data, {
                style: {color: "#000", weight: 2, fillColor: 
                       "#03a6fa", fillOpacity: .6},
                onEachFeature: function (feature, layer) {
                    layer.bindPopup("<strong>" + 
                                    feature.properties['DISTRICT'])
                }
            })
            //add newly created DistrictLayer. Since previously creted one is removed, layer will apper only once
            map.addLayer(DistrictLayer);
            map.fitBounds(DistrictLayer.getBounds());

        });

Answer 4

I wrote the below example to show how to remove multiples geoJSON layer.

///adding geoJSON data

          var myGeoJSON = L.geoJSON(myData, {

            onEachFeature: function (feature, layer) {
                layer.myTag = "myGeoJSON"
            }

        });


////// function to remove geoJSON layers 

    var removeMarkers = function() {
        map.eachLayer( function(layer) {

          if ( layer.myTag &&  layer.myTag === "myGeoJSON") {
            map.removeLayer(layer)
              }

            });

    }

//// calling function 

removeMarkers();