When hovering over a dot near the map's border, I'd like to the pop-up to appear fully within the map frame

[theecrit]

Is your feature request related to a problem? Please describe. Currently when I hover over the map near the edge, the data pop-up gets cut off by the frame and I can't view the whole thing.

Describe the solution you'd like I'd like to be able to view the entire pop-up. One approach would be to detect which edge the pop-up is near and pop it up to either the right or left, depending on position.

Describe alternatives you've considered We could try to display the pop-up over the extended edge of the map but that may be tough to do technically?

Screenshot

[TangoYankee]

To achieve the left/right detection, attach a element refs to the mapbox and the hover panel. Then, get their dimensions using getBoundingClientRect.

To make the hoverpanel appear over the whole page: first, try giving it a z-index. If that doesn't work, Move it from being nested in the box and instead place it higher it in the DOM.

[gsehrlich]

For a different issue ( the last piece of #331), I switched the hover implementation to use a react-map-gl element called Popup, which has the desired behavior by default. I'll reference this issue in the PR.

[theecrit]

@gsehrlich Amazing, thanks!