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.
You could change your onClick function so that instead of toggling individual layers off-and-on it activates the one you want and hides the others. You could do this with a for loop:
link.onclick = function(e) {
var clickedLayer = this.textContent;
e.preventDefault();
e.stopPropagation();
for (var j = 0; j < toggleableLayerIds.length; j++) {
if (clickedLayer === toggleableLayerIds[j]) {
layers.children[j].className = 'active';
map.setLayoutProperty(toggleableLayerIds[j], 'visibility', 'visible');
}
else {
layers.children[j].className = '';
map.setLayoutProperty(toggleableLayerIds[j], 'visibility', 'none');
}
}
};
Additionally, you should set the 'visibility' property of each layer to 'none' in your addLayer() function so that they are hidden until selected.
'layout': {
// make layer invisible by default
'visibility': 'none',
'line-join': 'round',
'line-cap': 'round'
},
I made these changes to your JSFiddle code and pasted below:
mapboxgl.accessToken = 'pk.eyJ1Ijoid2FzaGluZ3RvbnBvc3QiLCJhIjoibWJkTGx1SSJ9.6cMdwgs-AYrRtQsEkXlHqg';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
zoom: 15,
center: [-71.97722138410576, -13.517379300798098]
});
map.on('load', function() {
// add source and layer for museums
map.addSource('museums', {
type: 'vector',
url: 'mapbox://mapbox.2opop9hr'
});
map.addLayer({
'id': 'Layer 1',
'type': 'circle',
'source': 'museums',
'layout': {
// make layer invisible by default
'visibility': 'none'
},
'paint': {
'circle-radius': 8,
'circle-color': 'rgba(55,148,179,1)'
},
'source-layer': 'museum-cusco'
});
// add source and layer for contours
map.addSource('contours', {
type: 'vector',
url: 'mapbox://mapbox.mapbox-terrain-v2'
});
map.addLayer({
'id': 'Layer 2',
'type': 'line',
'source': 'contours',
'source-layer': 'contour',
'layout': {
// make layer invisible by default
'visibility': 'none',
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#877b59',
'line-width': 5
}
});
map.addLayer({
'id': 'Layer 3',
'type': 'line',
'source': 'contours',
'source-layer': 'contour',
'layout': {
// make layer invisible by default
'visibility': 'none',
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': 'yellow',
'line-width': 2
}
});
});
// enumerate ids of the layers
var toggleableLayerIds = ['Layer 1', 'Layer 2', 'Layer 3'];
// 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 = '';
link.textContent = id;
link.onclick = function(e) {
var clickedLayer = this.textContent;
e.preventDefault();
e.stopPropagation();
for (var j = 0; j < toggleableLayerIds.length; j++) {
if (clickedLayer === toggleableLayerIds[j]) {
layers.children[j].className = 'active';
map.setLayoutProperty(toggleableLayerIds[j], 'visibility', 'visible');
}
else {
layers.children[j].className = '';
map.setLayoutProperty(toggleableLayerIds[j], 'visibility', 'none');
}
}
};
var layers = document.getElementById('menu');
layers.appendChild(link);
} body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
#menu {
background: #fff;
position: absolute;
z-index: 1;
top: 10px;
right: 10px;
border-radius: 3px;
width: 120px;
border: 1px solid rgba(0, 0, 0, 0.4);
font-family: 'Open Sans', sans-serif;
}
#menu a {
font-size: 13px;
color: #404040;
display: block;
margin: 0;
padding: 0;
padding: 10px;
text-decoration: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
text-align: center;
}
#menu a:last-child {
border: none;
}
#menu a:hover {
background-color: #f8f8f8;
color: #404040;
}
#menu a.active {
background-color: #3887be;
color: #ffffff;
}
#menu a.active:hover {
background: #3074a4;
}<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css" rel="stylesheet"/>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<nav id="menu"></nav>
<div id="map"></div>