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.12k stars 426 forks source link

Restrict panning of a map beyond the boundary #324

Open neel-tw opened 1 year ago

neel-tw commented 1 year ago

I am trying to render the map of a specific country using the available GeoJSON file and wrapped it within a ZoomableGroup

The zoom and pan works fine, however the panning of the map cannot be restricted beyond a specific boundary. If the user accidentally moves the map outside the view area, then there is no way to restrict it.

image

I have tried the translateExtent prop and set a boundary but it does not seem to work. It works fine for the entire world map, but not for the country's map that I am trying to render

Is there anyway to calculate the bounds that are specific to a GeoJSON file and use that to set panning constraints ?

Laurens256 commented 1 year ago

Hi did you have any luck with this? Currently experiencing the same issue

csdiehl commented 1 year ago

Hey @zimrick I'm a dataviz developer and am interested in contributing to this library. I can try to tackle this issue, if no one else is already working this?