Deck.gl: Any downsides to having DeckGL as child of ReactMapGL?

[ctaylor4874]

Hello,

I have two questions that I'd like your thoughts on.

1. Is there any downside to mounting the <DeckGL /> component as a child of the ReactMapGL component? In the documentation it shows the other way. This is my current setup and it's working but I didn't know if there were any downsides.
   typescript <ReactMapGL touchAction="pan-y" onInteractionStateChange={this.updateInteractionState} attributionControl={false} controller={this._mapController} {...this.props.viewport} preventStyleDiffing reuseMaps width="100%" height="100%" onError={this._onReactMapGLError} getCursor={this.getCursor} interactiveLayerIds={this.props.interactiveLayerIds} mapStyle={this.props.mapStyleURI.length > 0 ? this.props.mapStyleURI : this.props.baseLayer} mapboxApiAccessToken={this.props.mapboxAccessToken} onLoad={this._onMapLoad} transformRequest={this._transformRequest} onViewportChange={this._onViewportChange} onClick={this._onClick} > <DeckGL viewState={this.props.viewport} getCursor={this._handleDeckGLCursor} {...this.props.deckProps} /> </ReactMapGL>
2. Is it ok to mount multiple <DeckGL> components in the same project? Would this be ok?
   typescript jsx <> <DeckGL layers={...} /> <DeckGL layers={...} /> </>

Thank you in advance for any thoughts on this!

[kylebarron]

• When you have ReactMapGL as the child, you can use StaticMap, which is more performant
• You can pass through map state to use Mapbox style components like the zoom in/out button
• You could mount multiple DeckGL components but there's almost never a reason to do that. You can use multiple views for a side by side setup

[ctaylor4874]

• When you have ReactMapGL as the child, you can use StaticMap, which is more performant
• You can pass through map state to use Mapbox style components like the zoom in/out button
• You could mount multiple DeckGL components but there's almost never a reason to do that. You can use multiple views for a side by side setup

Thank you! I was having problems using react-map-gl's ScaleControl, Popup, and a few other tools when using StaticMap. It seemed like the visualizations were hidden behind the DeckGL map.

Is there a simple solution for this?

[Pessimistress]

Using DeckGL as a child of ReactMapGL should work. In our docs we recommend StaticMap as a child of DeckGL because:

• It is easier to use the stateful map controller that way (instead of callback + state update). Managing view states in your own app results in more React rerenders, and potential perf issues if not written properly.
• It avoids creating two sets of pointer event managers, one in DeckGL and one in ReactMapGL.

As @kylebarron said, if your two DeckGL instances renders to the same region, it is more performant to use multiple views. Otherwise, rendering two DeckGL instances is fine. If you have more than two, say 5-6, the hardware/browser may not support so many active WebGL contexts at once.

[Pessimistress]

ContextProvider

[ctaylor4874]

You two are the best, thank you so much!

[makeupsomething]

Sorry to jump in here but I had a similar question. If I should make a new issues for then then let me know 🙏

I wanted to render the StaticMap as a child of the DeckGL component as it is more performant but I was unable to get react-map-gl-draw working that way so I needed to have DeckGL as a child of the InteractiveMap but this seems to have come with more issues with the pointer and map states as pointed out above. What is the recommended configuration when using DeckGL and react-map-gl-draw together?

[kylebarron]

Have you tried DeckGL -> InteractiveMap -> react-map-gl-draw?

[makeupsomething]

@kylebarron Thank you for replying!

Yes, I've tried that but in this configuration I could not draw anything. I seemed like the DeckGL canvas was covering everything so react-map-gl-draw could not detect any clicks.

The only way I got it to work was InteractiveMap -> DeckGL -> react-map-gl-draw

[kylebarron]

You can try nebula.gl, it's designed to work with deck.gl.

[makeupsomething]

Cool, it looks a bit harder to get going with than react-map-gl-draw but it seems like this should work for me. Thank you!

[ctaylor4874]

You can try nebula.gl, it's designed to work with deck.gl.

This is what we resorted to. We struggled with it for a bit and decided to go with nebula.

[ctaylor4874]

Nebula definitely has its advantages, depending on your use case