Leaflet: How to toggle ALL layers either off or on

Question

Currently, I have my control set so users can toggle each layer they want to view. But, I am unsure how to build a "all layers off" and a "all layers on" function into my UI. I have over 70+ layers and it can get messy, hence why the need for a "master" on and off switch.

Demo fiddle here

I have a single geojson object that I am filtering to display markers on my map like so:

var myData = [{...}];

var airport = L.geoJson(myData, {
filter: function(feature) {
    switch (feature.properties.Subcategory) {
        case 'Airport': return true;
            break;
    }
},
 onEachFeature: onEachFeature
});

var heliport = L.geoJson(myData, {
  filter: function(feature) {
    switch (feature.properties.Subcategory) {
        case 'Heliport': return true;
            break;
    }
},
 onEachFeature: onEachFeature
});

...
...
...
and so on...

I was thinking of putting a button control at top right of the map page like so:

<div id="toggle" style="display:none;">
Toggle all layers:
<button type="button" class="btn btn-link"     onClick="removeAllLayers()">OFF</button>
<button type="button" class="btn btn-link" onClick="addAllLayers()">ON</button>
</div>

and add that control to the map like so:

map.legendControl.addLegend(document.getElementById('toggle').innerHTML).setPosition('topright');

and assign all layers to a layerGroup like so:

var showAllLayers = L.layerGroup(myData);
var removeAllLayers = L.layerGroup(myData);

and build a function like so (only removeAllLayers example is shown):

function removeAllLayers() {
    removeAllLayers.clearLayers();
};

Of course, this doesn't work. Can someone show me the way to get this figured out or do you have any better ideas on how to approach this? THANK YOU!

Answer 1

The easiest way to add/remove all the overlays is by iterating the _layers object used by L.Control.Layers (and L.Control.GroupedLayers), check if it's an overlay and add/removing them to/from the _map instance. You can easily include two new methods into the control to add that logic. For example:

L.Control.GroupedLayers.include({
    addOverlays: function () {
        for (var i in this._layers) {
            if (this._layers[i].overlay) {
                if (!this._map.hasLayer(this._layers[i].layer)) {
                    this._map.addLayer(this._layers[i].layer);
                }
            }
        }
    },
    removeOverlays: function () {
        for (var i in this._layers) {
            if (this._layers[i].overlay) {
                if (this._map.hasLayer(this._layers[i].layer)) {
                    this._map.removeLayer(this._layers[i].layer);
                }
            }
        }
    }
});

Example of the concept on Plunker: http://plnkr.co/edit/AvV55Pph7hkectadZSTb?p=preview

Answer 2

For the issue you describe in this question, there seem to be several mistakes:

• Your myData is the initial array of GeoJSON objects that is used to build your several L.GeoJSON layers. myData cannot be directly used in a Layer Group, as it is not a Leaflet layer. What you can do is to pass an array of L.GeoJSON layers when instantiating your Layer Group.
• You should not use the same identifier for your Layer Group removeAllLayers and your function removeAllLayers. One or the other will not be accessible (normally the function declaration should take priority).
• In the context of jsfiddle website, avoid using inline event listener (<button onclice="removeAllLayers()">), as for some reason jsfiddle strips them off / loses references between the HTML section and the JS section… Instead you should add event listeners from the JS section.

Implementing these 3 points would give:

var allLayers = [
  airport,
  heliport,
  seaplane,
  railroad,
  waterTaxi
];

var removeAllLayers2 = L.layerGroup(allLayers).addTo(map);

function removeAllLayers() {
  removeAllLayers2.clearLayers();
};

// After you add your button to the document.
document.getElementById("buttonOff").addEventListener("click", function () {
  removeAllLayers();
});

Updated jsfiddle: http://jsfiddle.net/0pLwae33/4/

Now this only implements the removal of all your layers. You could easily implement the addition as well, but it would probably add all your layers at once, irrespective of the selected layers in your Grouped Layer Control.

What you would probably look for is a way to "nest" more levels in that plugin, so that you can have a "master" checkbox to toggle all overlays on/off, then your grouped layers.

For this usage, leaflet-layer-tree-plugin seemed promising, but the demo looks broken, and maybe is the plugin itself.

If that is really the functionality you need, have a look to other layer switching control plugins, or consider improving the functionality of Leaflet.groupedlayercontrol plugin that you currently use.