Mapbox GL JS addLayer 'source'

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?

Aravind Aravind · Accepted Answer · 2017-05-10T07:43:41

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>

Mapbox GL JS addLayer 'source'

1 Answers