[Feat] Enable adding a react-map-gl StaticMap both below and above the Deck.GL canvas

[mz8i]

Target Use Case

Two things that Mapbox GL does better than Deck.GL is styling complex vector base maps, and rendering text/symbol layers. There's simply more options to customise the appearance of text, configure text collision prevention etc.

The most natural layer order for data visualisation maps with complex context data is (bottom-to-top):

• vector basemap (ideally rendered by Mapbox GL JS)
• data visualisations from Deck.GL
• text labels (ideally rendered by Mapbox GL JS)

Unfortunately, the only way to achieve this currently is by letting Mapbox GL JS drive and by embedding the middle Deck.GL layer into mapbox, using the custom MapboxLayer, which may be undesirable.

Proposal

This proposal is to introduce a mechanism to "sandwich" the Deck.GL canvas between two instances of StaticMap from react-map-gl.

I am not sure what the best way would be to specify whether the StaticMap is to be put in the background or as an overlay. To maintain compatibility with older code bases, perhaps adding a special React component for the overlay slot would work:

<DeckGL
// ...
>
   <StaticMap mapStyle={backgroundStyle}/>
   <ExternalMapOverlay map={
      <StaticMap mapStyle={overlayStyle} attributionControl={false} style={{pointerEvents:'none'}}/>
   } />
</DeckGL>

The key is that the second StaticMap is also kept in sync with Deck.GL in terms of its view state. However, note the pointer-events: none that should ensure the overlay doesn't capture mouse events.

[Pessimistress]

You may supply a render function as the child of <DeckGL>:

<DeckGL>
    {({viewState, width, height}) => (<>
      <StaticMap viewState={viewState} width={width} height={height} style={{position: 'absolute', zIndex: -1}} />
      <StaticMap viewState={viewState} width={width} height={height} style={{position: 'absolute', zIndex: 1}} />
    </>)}
  </DeckGL>

See https://deck.gl/docs/api-reference/react/deckgl#render-callbacks

[mz8i]

Thank you @Pessimistress that's awesome. Perhaps this particular example could be added to the documentation, as I feel it's quite a common use case but isn't immediately obvious how to achieve it, the more visible option is the MapboxLayer one.