[Bug] maplibre / mapbox `Popup` shows below the deck.gl features in non-interleaved `MapboxOverlay`

[JayFoxRox]

Description

mapbox and maplibre render popups below controls so using IControl for deck.gl isn't a good idea.
This makes sense, because popups are HTML elements that are considered part of the map, whereas controls sit on top of the map.

Flavors

• Script tag
• React
• Python/Jupyter notebook
• MapboxOverlay
• GoogleMapsOverlay
• CartoLayer
• ArcGIS

Expected Behavior

deck.gl layers should be below Popup created on the basemap

Steps to Reproduce

Controlled by enableBug4 in https://github.com/JayFoxRox/deck.gl-bugs/blob/master/src/DeckGlBugs.tsx

My current workaround is to get access to the deck.gl canvas element and moving it to a different position in the DOM.
I'd recommend against fixing this by z-index because it can quickly lead to bad interaction with other libraries or users code which might also use z-index.

Environment

• Framework version: deck.gl@9.0.0-beta.4
• Browser: All
• OS: All

Logs

No response

[Pessimistress]

You can change the z-index of your popup with popup.getElement().style.zIndex = 10;.

mapbox and maplibre render popups below controls so using IControl for deck.gl isn't a good idea

IControl is the only officially supported API to attach our canvas to the map container. If we hack into the DOM tree ourselves then it will be subject to breakage when the map library publishes a new version. I would argue that the z-order of controls is a problem that needs to be solved at the map library level. We have had to detect map versions and hardcode special treatments in the past, and it's not fun.