0

Using an example I found on this thread https://gis.stackexchange.com/questions/198896/mapbox-gljs-group-layers/198920#198920?newreg=120a87a082494e41b2e6ab240c94b266 I have grouped multiple layers together and created a single toggle button to turn on and off visibility.

However, the buttons need to be clicked twice to trigger the function. Is it possible to have them only clicked once for the function to work?

Here is my codepen example https://codepen.io/charlie-enright/pen/BarRgbo

//whatever layers you want to toggle go in to this function
toggleLayer(['site location markers'], 'markers');
toggleLayer(['Pen Dinas', 'Rudbaxton','Brawdy Castle', 'Caer Blaen Minog', 'Castell Bach', 'Castell Gwyn', 'Tancredston', 'Thornton Rath', 'Walesland Rath'], 'Geophys');
toggleLayer(['Pendinas 50cm DSM'], '50cm DSM');
toggleLayer(['Pendinas 50cm DTM'], '50cm DTM');



function toggleLayer(ids, name) {
    var link = document.createElement('a');
    link.href = '#';
    link.className = 'active';
    link.textContent = name;

    link.onclick = function (e) {
        e.preventDefault();
        e.stopPropagation();
        for (layers in ids){
            var visibility = map.getLayoutProperty(ids[layers], 'visibility');
            if (visibility === 'visible') {
                map.setLayoutProperty(ids[layers], 'visibility', 'none');
                this.className = '';
            } else {
                this.className = 'active';
                map.setLayoutProperty(ids[layers], 'visibility', 'visible');
            }
         }

    };

    var layers = document.getElementById('menu');
    layers.appendChild(link);
}
Improve this question
4
  • ah yes sorry, I had made some changes to the visibility from the Mapbox studio. I have now set it in the Mapbox studio how I would like the default visibility to be.... I have two layers turned on by default and two turned off. But the menu bar appearances would seemingly show that all layers visibility is on even though they aren't and the top two layers that are visible by default still need to be clicked twice to activate them.
    – Charlie
    Commented Jul 25, 2022 at 10:48
  • Ok, can see your problem now.
    – Gerhard
    Commented Jul 25, 2022 at 12:21
  • What I would rather have is a dropdown menu with checkboxes, perhaps this will remove the double clicking. But not sure how to create checkboxes.
    – Charlie
    Commented Jul 25, 2022 at 14:18
  • Here's a good example that shows toggling layers with checkboxes: codepen.io/ZondaDesign/pen/xxVxZVR
    – chriswhong
    Commented Jul 25, 2022 at 16:30

1 Answer 1

Reset to default
1

I'm not exactly sure why, but the first time you check the visibility of the layer var visibility = map.getLayoutProperty(ids[layers], 'visibility');, visibility is undefined.

If you check for this in the if statement below, it will toggle on the first click:

if (visibility === 'visible' || visibility === undefined) {
  // ^^ if 'visible' or undefined, set visibility to 'none'
  ...
}
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.