Deck.gl: How to dynamically add layers

[lrgalego]

Hi.
I'm trying to add and remove layers from a Deck.gl instance dynamically.
I used the setProps method. but it overrides all the layers I already have inserted.

deck.setProps({ layers: [myNewLayer] })

Since I just wanted to add new layers, and keep the old layers, I got the current layers on the layerManager and concat my new layer.

deck.setProps({layers: [deck.layerManager.layers.concat([layer])]})

This gave me some assert errors, telling that some of my layers already have a state.

Unhandled Rejection (Error): deck.gl: assertion failed.
assert
node_modules/@deck.gl/core/dist/esm/utils/assert.js:3
ScatterplotLayer._initState
node_modules/@deck.gl/core/dist/esm/lib/layer.js:1077
ScatterplotLayer._initialize
node_modules/@deck.gl/core/dist/esm/lib/layer.js:722
LayerManager._initializeLayer
node_modules/@deck.gl/core/dist/esm/lib/layer-manager.js:445
LayerManager._updateSublayersRecursively
node_modules/@deck.gl/core/dist/esm/lib/layer-manager.js:376
LayerManager._updateLayers
node_modules/@deck.gl/core/dist/esm/lib/layer-manager.js:329
LayerManager.setLayers
node_modules/@deck.gl/core/dist/esm/lib/layer-manager.js:189
LayerManager.setProps
node_modules/@deck.gl/core/dist/esm/lib/layer-manager.js:148
Deck.setProps
node_modules/@deck.gl/core/dist/esm/lib/deck.js:223

So I cloned all the layers in the layer manager. Now everything works but sometimes a get a warning about duplicated layers with the same id.

const layers = deck.layerManager.layers.map(l => l.clone()).concat([layer]);
deck.setProps({ layers })

How do you recommend to do this?
Thanks!

[Pessimistress]

deck.gl uses the reactive model so you are supposed to keep track of all your layers with an array outside of the deck instance.

If for some reason you really cannot do that, you can use deck.props.layers to access the last rendered layers. No cloning is needed. layerManager is a private class and its layers field is something else.

[SymbolixAU]

@lrgalego this is how I add and remove layers dynamically by keeping my layers in an array

True to its Reactive roots, deck.gl does shallow comparison on almost everything. If you send it the same array, it will not do a deep comparison and and just not update. Try creating a new array, e.g:

deckgl.setProps({ layers: [...myLayerArray] });

where myLayerArray is the array of all the layers I add & remove.