Following this Mapbox example (Show and hide layers: https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/), I have been able to toggle between several layers on a map. But what I would like to achieve is when Layer 1 is visible
, the visibility of Layer 2 and Layer 3 is none
, when Layer 2 is visible
, the visibility of Layer 1 and Layer 3 is none
, etc.
Here's a fiddle example with the code I've written so far: https://jsfiddle.net/reL53uo1/
Here's the logic for the toggle part:
// enumerate ids of the layers
var toggleableLayerIds = ['contours', 'museums', 'contours2'];
// set up the corresponding toggle button for each layer
for (var i = 0; i < toggleableLayerIds.length; i++) {
var id = toggleableLayerIds[i];
var link = document.createElement('a');
link.href = '#';
link.className = 'active';
link.textContent = id;
link.onclick = function(e) {
var clickedLayer = this.textContent;
e.preventDefault();
e.stopPropagation();
var visibility = map.getLayoutProperty(clickedLayer, 'visibility');
// toggle layer visibility by changing the layout object's visibility property
if (visibility === 'visible') {
map.setLayoutProperty(clickedLayer, 'visibility', 'none');
this.className = '';
} else {
this.className = 'active';
map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
}
};
var layers = document.getElementById('menu');
layers.appendChild(link);
What would it be the most efficient approach to achieve this? Thanks.