Hide Layer on Zoom threshold

[nikit91]

Hello,

I am quite new at deck.gl and I have been trying to implement something using DeckGL standalone.
I have implemented a hexagon layer on my data. However, I realized that my data is spread across many countries on the map and I would like to have an extra icon layer to point the user where exactly could they zoom in to find the hexagonal bars.

I implemented the icon layer, but then after zooming in the map looks something like this:

As you can probably notice, the icon stays in the background.

What I would like to know is if somehow I could change the visibility of a layer based on the value of zoom.

[SinZ163]

The way I handle it for IconLayer's is a dynamic getSize that returns 0 if viewstate.zoom > 10 or whatever zoom level makes sense for you. For other layers I use opacity.

The intended way however is visible prop on the layer, which can just be an expression doing a comparison on viewstate.zoom

[nikit91]

Hi @SinZ163 ,

Thanks for your response.
I understood what you said, but somehow I am not able to figure out how do I access that variable viewstate inside the getSize method. The only thing I am able to access is the related data.

[snosenzo]

Try figuring out how to access the viewport in the base map component, and passing it as props down to deckgl for logic in the visible prop for the layer. It should be something like viewport.zoom in the base map. Check out the vis academy tutorials to find out about how the viewport is read in and changes; I don't have much experience with OpenStreetMap, but there should be functionality in it to get the zoom level.

[1chandu]

@nikit91, you can listen to onViewStateChange callback prop and update your layer list based on zoom value.