I'm trying to build an interactive map, without any knowledge in javascript, and i found myself a bit lost in this large world. I've already designed my style in mapbox studio. And now, trying to make it work on the web. I'd like to display/hide multiple layers, but with one button and the default visibility set as none (tried to set "visibility" as none, but doesn't seem to work). (user must click on 1 button to load all layers in a group)
Followed this tutorial : https://www.mapbox.com/mapbox-gl-js/example/toggle-layers/ I could accomplish it, but i got 1 button for each layer. So i tried to group them, following this tutorial: http://leafletjs.com/examples/layers-control.html
But things aren't that easy, I'm trying to mix things every way I can, but can't figure how to make it work...
Here is my basic code:
mapboxgl.accessToken = 'pk.eyJ1IjoiY2RyaWNlIiwiYSI6ImNpcDZvMTU2cDAwMGR2MW03aXZ1Y2xpdXAifQ.DIB1RcA8uDyXSVvyz7Skcg';
// Set bounds
var bounds = [
[5.336040, 47.678506], // Southwest coordinates
[7.202343, 48.697659] // Northeast coordinates
];
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/cdrice/cip6vwuus000wdkm3q2adkr24',
center: [6.95, 48.28],
zoom: 8.5,
maxBounds: bounds // Sets bounds as max
});
map.on('load', function () {
map.addLayer({
'id': 'reciprocite',
'type': 'fill',
'source': 'reciprocite',
'layout': {
'visibility': 'none'
},
'source-layer': 'reciprocite-gap'
});
map.addLayer({
'id': 'reciprocite',
'type': 'fill',
'source': 'reciprocite',
'layout': {
'visibility': 'none'
},
'source-layer': 'reciprocite-gpv'
});
});
addLayer('Reciprocite', 'reciprocite-gpv');
addLayer('Reciprocite', 'reciprocite-gap');
function addLayer(name, id) {
var link = document.createElement('a');
link.href = '#';
link.className = 'active';
link.textContent = name;
link.onclick = function (e) {
e.preventDefault();
e.stopPropagation();
var visibility = map.getLayoutProperty(id, 'visibility');
if (visibility === 'visible') {
map.setLayoutProperty(id, 'visibility', 'none');
this.className = '';
} else {
this.className = 'active';
map.setLayoutProperty(id, 'visibility', 'visible');
}
};
var layers = document.getElementById('menu');
layers.appendChild(link);
}