search

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

Line component: lines connecting to marker are not working properly #293

Closed sumeetrane-technosoft closed 2 years ago

sumeetrane-technosoft commented 2 years ago
Screenshot 2022-07-22 at 12 44 10 PM

The lines connecting from California to mumbai should flow in a straight line & not the other way around. How can i make it flow in a straight way ?

zimrick commented 2 years ago

Hi @sumeetrane-technosoft, The line component uses a geojson lineString under the hood, so the line you are seeing is the 'shortest' route between Mumbai and California. Unfortunately with this projection, this results in a line that looks a bit strange and does not have the desired outcome.

There are a few options for a solution here. The most useful one is probably to use the MapContext to create a CustomLine component that draws a simple line between point A and point B. That way, the line will always stay within the SVG viewport.

I made a codesandbox example for you, since the MapContext is not well documented at the moment. We are working on a new documentation site that should be out very shortly.