Set layer visible prop dynamically

[mathieudelvaux]

Hello again!

I've been trying a few things on my own but cannot find a working solution about setting a layer's visible prop to true/false without having to re-create a layer (hence deleting state).

My use-case consists of 1 map with 10 different datavisualisations that users can fetch by selecting from radio buttons. Each viz is about 10Mo, so whenever a request is complete, I want to keep the data available.

For the moment, I generate a layer every time the user has requested a visualisation he didn't already fetched before. This layer is then added to my component state and subsequently given to my Deck via the layers prop. But every visualisation should be shown on their own only.

The way I've currently implemented this is, besides having my layers in a state, I also have an object referencing every layer ID and a boolean value, corresponding to their visible state. This state value is then used when instantiating a new layer, but as I should've expected, updating the state doesn't reflect down to the layer's visible state.

Do you have an idea of how I could set a layer's visible prop without having to recreate a complete layer?

[Pessimistress]

@mathieudelvaux The correct way to update a layer's props is to create a new instance. There is no performance penalty. Read about it here.

[anshuman]

Any other method?

[sammyaxe]

here

link dead

[anshuman]

Use

const invisibleLayer = layer.clone({visible: false})

[sammyaxe]

@anshuman thanks, I will try that, does it trigger layer to re-render? maybe you can point me to some documentation about this method called clone?

[anshuman]

Find the documentation here.

Yes. Updating prop will re-render the layer.

[sammyaxe]

@anshuman how do you pass that layer into deckGl after cloning it to the new variable?

This is my laters array... so I would do something like

const newLayer = Layer1.clone({visible: false});

But do then I need to change my layers array? remove old one and add new layer in?

const layers = [ Layer1, Layer2 ];

[anshuman]

@digiiitalmb

const layers = [layer1.clone({visible: false}), layer2]
return <DeckGL layers={layers} />