Mapbox – Toggling Between Two Layers in Mapbox GL JS

mapboxmapbox-glmapbox-gl-jsmapbox-studio

I'm using Mapbox's Show and Hide Layer example where the user can toggle on/off layers, but seem to be running into an issue I can't pinpoint.

What I did

In Mapbox's example, I replace the first layer (Museum's) with my data and left their "contour" data alone. My data is an obvious big black blog for simplicity.

The result

The toggle switch appears to work by changing color when turning on/off, however my big black blog on my map isn't disappearing.

Actions taken

I tried countless times to slowly piece together portions of the code to see where it fails, but just not understanding where I'm going wrong. My guess it's the map.addSource versus map.addLayer which I may not be understanding the difference. My data was uploaded to a Tileset via a zipped shapefile.
Perhaps the example being used is from a GeoJson?

Here's my code, except the access token is missing for security purposes.

Best Answer

You implemented the toggle on/off functionality right.

Your layer is not visible, because the alpha channel (which specifies the opacity for a color) of fill-color and fill-outline-color is 0. Setting them both e.g. to 1 your layer becomes visible.

'fill-color': 'rgba(72, 67, 45, 1)',
'fill-outline-color': 'rgba(0, 0, 0, 1)'

Your style mapbox://styles/pacoventry/cjfh33iu93ld62rjvlqfo8re7 wasn't available for me, so I replaced it with mapbox://styles/mapbox/streets-v9 in the following jsbin (just enter your Mapbox token):

http://jsbin.com/wijapekomi/edit?html,output

Related Question