mapboxgl-children DIV element blocks scroll-to-zoom and drag-to-pan events to Map parent

[patrickcteng]

Hi,

I don't think this is a bug in the library but I wanted to see if anyone has see this before?

I work on a pretty large Typescript and some legacy javascript SPA and recently we wanted to integrate react-map-gl into our app. However, I noticed that when the element is rendered, the child <div mapboxgl-children style="height: 100%;"></div> element (which looks like it "overlays" the Map) blocks the zoom to scroll and drag to pan events from bubbling up to the parent.

I've inspected the DOM and checked the to make sure no stopPropagation() calls are automatically attached to the mapboxgl-children element. But maybe I missed something?

Though -- Once I apply display: hidden to the element, I can zoom-to-scroll and drag-to-pan the map AOK. I'm not putting any children on the map anyways, so this workaround works for me.

But just wanted to see if anyone seen behavior like this?

[lacymorrow]

Having a similar issue, the mapboxgl-children element is affixed below the map and blocks interaction with other elements.

Basically the mapboxgl-children div is the same size as the map, attached to the bottom, so it creates an invisible map-sized interaction blocking space below the map

[noi5e]

Having the same issue here with a mapboxgl-children element at the bottom of the page, that is map-sized.

Not sure of the best way to get rid of this element, is there something in the docs about this?

[noi5e]

Looking in the basic starter template example, it looks like I was missing a CSS import:

import "mapbox-gl/dist/mapbox-gl.css";

Adding this fixed the issue.

[lacymorrow]

This isn't in the GitHub readme

[JaedonSpurlock01]

This fixed it for me as well, bit strange this isn't mentioned anywhere in the docs

[lacymorrow]

I tried to PR and was told it's not included because folks may be loading the css another way

#2313

[gourmedia]

it works