0

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.

Improve this question

1 Answer 1

Reset to default
2

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

Improve this answer
4
  • Thank you so much!! I'm almost there, just one more question. That 'black blob' layer really isn't my working layer, but rather a layer with 8 specific colors. Do I have to add each of those rgba colors in the area you indicated above? or is there a way to reference the colors in my Tileset? I have an example of a map that has the toggling function where there are multiple colors in the layer. I'm just not seeing how it's being referenced in the code? jsfiddle.net/pacoventry/zjdeq5vn (it's the bottom 2 buttons)
    – pac_co
    Commented Sep 3, 2018 at 2:11
  • 1
    If your question 'Mapbox GL JS - toggling 2 layers' is solved, please accept my answer and open a new question regarding the layer colors.
    – pathmapper
    Commented Sep 3, 2018 at 6:22
  • You may reference the colors in your tileset with expressions, example: mapbox.com/mapbox-gl-js/example/data-driven-circle-colors.
    – pathmapper
    Commented Sep 3, 2018 at 6:27
  • Thank you pathmappers and I'm sorry to have added that additional question to my original. You answered both questions and I greatly appreciate your help!!
    – pac_co
    Commented Sep 3, 2018 at 15:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.