Description

I am unable to interact with the ZoomWidget and CompassWidget components when used alongside a react-map-gl basemap with the reverse-controlled method.

The widgets render but are effectively inert because they are "below" the div rendering the basemap. I can get them to work using the browser dev tools by either:

• Setting a negative z-index on the basemap div
• Setting a high positive z-index on the div that wraps the widgets
• Moving the widgets div to come after the basemap div in the DOM

I tried setting z-indexes on the basemap or the widgets using their respective style properties but that doesn't seem to work because those styles are applied too deep in the tree.

Flavors

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

Expected Behavior

I can use the widgets module alongside my basemap rendering method and am able to interact with the widgets as expected.

Steps to Reproduce

Here is a link to a branch of a repo that can be used to reproduce this issue: https://github.com/TylerMatteo/react-deck-boilerplate/tree/widget-bug-repro

To reproduce:

1. Clone this repo and check out the widget-bug-repro branch
2. npm install
3. npm run dev
4. Observe that clicking the widgets does not trigger zooming or resetting the compass

Environment

• Framework version: [email protected]
• Browser: Firefox 125.0.3
• OS: MacOS Ventura 13.5

Logs

N/A