zcreativelabs / react-simple-maps

Beautiful React SVG maps with d3-geo and topojson using a declarative api.
https://www.react-simple-maps.io/
MIT License
3.04k stars 424 forks source link

Fix tooltip to position/coordinates on map when zooming/panning/dragging #258

Open emabytes opened 3 years ago

emabytes commented 3 years ago

Hello!

In this example here https://www.react-simple-maps.io/examples/map-chart-with-tooltip/, is it possible to fix the tooltip to its initial position (coordinates) so that it doesn't move away from the origin as I drag/zoom around the map?

For example, try to press the mouse down on a country (and keep the mouse pressed down), now move your mouse/zoom around and see how the tooltip does not stay at its original country where it initially appeared. I'd like the tooltip to stay there even when I move/zoom around.

I have tried using the react-bootstrap popover component but it does not stay on the original coordinates on the map when I zoom around.

I would like to have it like in this example where the popper always stays next to the marker: https://leafletjs.com/examples/quick-start/example.html

I am thinking of hooking up the onMove event and try to reposition the tooltip back to the original position/coordinates on the map. Is this the right approach?

Thank you in advance!