Mapbox GL JS addLayer 'source' - mapbox

Question

I am having difficulty displaying and toggling layers on and off. I have followed the tutorial: https: // www. mapbox. com /mapbox-gl-js/example/toggle-layers/
From the tutorial and other help documents it is not clear what values i should be using. All my data and styles have been created using Mapbox Studio. I am confused about the different values for addLayer 'source' , 'source-layer' vs addSource.
In this help file: https://www.mapbox.com/help/mapbox-gl-js-fundamentals/ - it makes no mention of addSource, suggesting that it isn't needed at all, but when i exclude this from my code it doesn't display map layers correctly - why is this?
You can see my map here: http://www.heavenlygardens.org.uk/maps/6/index3.html
Please can someone explain specifically what i'm doing wrong?

Answer 1

You don't need to add the layer again since you have added it in mapbox studio
The layer name which you give in the mapbox studio should be used to show and hide them
Since you have named the Heavenly Gardens layer as hg in mapbox studio same has to be used here
mapboxgl.accessToken = 'pk.eyJ1IjoiZGFuaWlzaCIsImEiOiJ5dzJfM19rIn0.s8DcOH767tjpUznJhAAkaw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/daniish/cj1m2ndxd001j2spd09ne38vm',
zoom: 14.5,
center: [1.2964, 52.6291]
});
var toggleableLayerIds = [ 'hg', 'Churchyards' ];
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');
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);
}
#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;
}
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css" rel="stylesheet"/>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js"></script>
<nav id="menu"></nav>
<div id="map"></div>