3

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());
                }

            });
2

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());

        });
  • Yes, exactly... map.hasLayer(DistrictLayer) is always false... and it seems like reason behind ajax call is also correct... – Sami Khan Jul 21 '17 at 17:31
  • map.hasLayer(DistrictLayer) is working now... thanks... – Sami Khan Jul 21 '17 at 17:31
  • But I am still not able to prevent one layer (whose reference is store in "DistrictLayer") to be added more than one time. – Sami Khan Jul 21 '17 at 17:43
  • Even reference of DistrictLayer is also stored then why on ajax call it is behaving unexpectedly!!! – Sami Khan Jul 21 '17 at 18:50
3

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.

  • I also tested this code... but it still keeps on adding the same layer again and again... – Sami Khan Jul 21 '17 at 15:51
  • I was thinking about checking the duplicate layer so that it could be removed or added accordingly. – Sami Khan Jul 21 '17 at 15:55
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());
    }
);
1

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();
  • Please don't paste the same improperly formatted code block into any more answers – Vince Dec 30 '18 at 18:26

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.