Mapbox Toggle Layers off

Question

I have a set of 23 mapbox layers I can toggle on and off independently. I would like to include a master OFF ALL toggle. How can I accomplish this? Here are the code:

<script type="text/javascript">
var map = L.map('map',{center: [56.5, -1], minZoom: 7, zoomControl: false, legendControl: true}).setView([56.5, -1], 7);
map.addControl(new L.Control.ZoomMin())
var baseLayer = new L.mapbox.tileLayer('inosys.k52e98ob').addTo(map);
var ui = document.getElementById('map-ui');

var overlays = [
['inosys.k8mg7jp2','Toggle All On', 1], 
['#','Toggle All Off', 1], 
['inosys.jgsk2of8','Significant Discoveries', 999999],
['inosys.gaa3x433','Wells', 999999],
['inosys.gaa3xpkf','Hydrocarbon Fields', 3],
['inosys.u0uttr1z','Field Determinations', 3],
....

possible duplicate of [Master layer toggles in Mapbox](http://stackoverflow.com/questions/26873509/master-layer-toggles-in-mapbox) — tmcw, Nov 18 '14 at 20:09

score 2 · Accepted Answer · edited May 23 '17 at 12:12

2

On selection of the Toggle button, you could run a function that iterated across all the layers and removed them like so:

function toggleAllOff(){
  map.eachLayer(function (layer) {
    map.removeLayer(layer);
  });
}

You could also add all the layers to a single LayerGroup and then call clearLayers on that group as documented on another question here.

Edit: The below shows the code needed to work in your particular case. It's slightly hacky in that the method removes the base layer and I add it back in. You could do a quick check for that if you didn't want to remove the base layer.

link.onclick = function (e) {
    e.preventDefault();
    e.stopPropagation();

//Add the following
    if ($(this).text() == 'Toggle All Off') {
        map.eachLayer(function (layer) {
            map.removeLayer(layer);
        });
        map.addLayer(baseLayer);
    } else if (map.hasLayer(layer)) {

//The rest is your old code
        map.removeLayer(layer);
        map.removeLayer(gridlayer);
        map.removeControl(gridControl);
        map.removeControl(legendControl);
        this.className = '';

edited May 23 '17 at 12:12

Community

1
1

answered Nov 19 '14 at 03:34

Josh

3,385
5
23
45

thanks. how would I insert the above function into the above code? I am not too versed with functions yet. Now I have a # placemark for the toggle off (['#','Toggle All Off', 1], ). How do I call the function from this? – UncleJune Nov 19 '14 at 05:44
1

I need to see a little more code. How is your control toggle setup? Can you make a [jsfiddle](http://jsfiddle.net) showing what you have now? – Josh Nov 19 '14 at 06:02
Josh - Here is the jfiddle - though I've added all the appropriate code it wont work on jfiddle: http://jsfiddle.net/wz3h7ast/9/ – UncleJune Nov 19 '14 at 15:44
Here is the working version: http://erichsen-group.com/demoland/taylorpeterh/oilgasa10c1.html – UncleJune Nov 19 '14 at 15:56
1

Ok, I updated your [jsfiddle](http://jsfiddle.net/wz3h7ast/10/) with new code that illustrates the idea. It doesn't work on jsfiddle for some reason (I fixed a couple errors with jsfiddle related to loading order of the js files), but it works on your map. I've updated my answer to show the specific code that you'll need. You'll want to work some more on it, but it shows the general idea. – Josh Nov 19 '14 at 19:17
that works, thanks. would you off hand know how to deactivate the active state toggles? (i.e., they remain blue/on). – UncleJune Nov 19 '14 at 23:26
1

Loop through the options and follow the instructions [detailed here - Best way to unselect a select in jQuery?](http://stackoverflow.com/a/11098981/928668). – Josh Nov 19 '14 at 23:35

Mapbox Toggle Layers off

1 Answers1