Leaflet.js: How To Remove Multiple Layers From Map

I am using Leaflet.js for a map. Now I want to remove added layers from the map. By clicking the input #button all checked checkboxes shall be changed to unchecked and all correspo

Solution 1:

I would say the easiest way to remove/add (toggle) layers from the map would be to use a LayerGroup.

Before adding individual layers to the map, add them to a LayerGroup instead and then add that LayerGroup to your map.

Then when you have to remove the layers, just call the clearLayers() function.

Check out the API for LayerGroup http://leafletjs.com/reference.html#layergroup

Example

varmap = L.map('leafletMap', {minZoom:11}).setView([37.8, -96], 11);
var assetLayerGroup = new L.LayerGroup();
var marker1 = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.');
var marker2 = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
assetLayerGroup.addLayer(marker1);
assetLayerGroup.addLayer(marker2);

When remove checkbox is checked

assetLayerGroup.clearLayers();

Solution 2:

According to the Leaflet API doc http://leafletjs.com/reference.html#map-removelayer, removeLayer takes an ILayer parameter: removeLayer( <ILayer> layer ) but you're passing it a String: $(this).attr("id")

It looks like you do have the layer object in a variable already: mapcat52. You could save the layer objects when you create them, then look them up by id to pass to removeLayer:

var layers = newArray();

// create layervar mapcat52 = newMyCustomLayer(latlng);

// save to layers list
layers["mapcat52"] = mapcat52;
...

// remove layers
$.each(someObj.idsChecked, function(id, val) {
    // look up layer object by idvar layerObj = layers[val];
    // remove layer
    map.removeLayer(layerObj); 
});

Solution 3:

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