How to show/hide layers in Mapbox on the client

Question

I'm working on a web app with Nextjs, Mapbox and react-map-gl. On the client side I would add some controls to show/hide specific POIs, for example restaurants, museums and landmarks.

I tried various ways and found multiple examples that were not specific to my problem. Nevertheless I'll note them down here, so you can see what I tried and why it failed.

1. Change the categories in Mapbox studio

There is a possibility to show/hide the POI categories in Mapbox studio, however this is static and I want to make this sort of changes on the client side.

2. Two examples from from Mapbox

"Filter symbols by toggling a list" "show and hide layers" Those examples show very well what I want to achieve. Simple UI buttons where I can show/hide certain POI categories, for example Theatre, Museum, Bar, Bicycle. The downside is that the data is added manually - after that map is loaded. I'm looking for a way to show/hide the POI categories on the existing map data I receive from Mapbox.

3. Copy POI layer

I found a third option that suggest to copy the POI layers "Hide mapbox POI in runtime". It doesn't seem like a proper solution, but I'll give it a try and share my feedback afterwards.

Do you guys know how I can properly show/hide categories at runtime from the POI-Layer in Mapbox?

I'm thankful for any help.

Answer 1

Thanks chriswhong. For anyone working with react-map-gl, there is one more thing to consider. The setLayoutProperty is at the time of my writing not available on mapRef and on the useMap hook. According to the create-ref.ts file from react-map-gl the setLayoutProperty is part of the methods that may break the react binding if called directly.

According to the official react-map-gl documentation you can you can still access the hidden members via getMap(), as it can be seen in the following example via console log. codesandbox.io/s/zealous-poincare-ti5qx9

Answer 2

You can use the same approach shown in the "show and hide layers" example you linked to. Once you have a layer on the map for each POI group you want to control, use map.setLayoutProperty(layername, 'visibility', 'none') to hide, and map.setLayoutProperty(layername, 'visibility', 'visible') to show.

Layers added after the map loads are no different than the layers that are included with the main style. The "show and hide layers" example shows sources and layers added after the map loads, they are just coming from mapbox-hosted vector tiles, not geojson files.