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.05k stars 424 forks source link

Plotting lat/long coordinates onto TopoJSON #90

Closed bcm820 closed 4 years ago

bcm820 commented 6 years ago

Hello, I've been looking at this library and would very much like to use it for my work project (we currently rely on Leaflet for rendering GeoJSON).

We are pulling in lat/long coordinate data from an external API source and would like to plot markers onto a TopoJSON map (world-50m). I attempted to implement a solution suggested here, with no success: https://stackoverflow.com/questions/38270132/topojson-d3-map-with-longitude-latitude

It is a simple enough formula that relies on the scale/translate values of the TopoJSON, but is there a better way to convert each set of coordinates to plot points on the TopoJSON map?

As an aside, if there was a way to handle conversions built into this library, I'm sure you'd have a lot of people wanting to move over from react-leaflet as I've found it much easier to reason about thus far. I'd definitely promote it to others!!

zimrick commented 6 years ago

Hi @bcmendoza,

Very happy that you are considering react-simple-maps for your project.

If I understand correctly, you are trying to map a set of markers onto the map that are determined by coordinate data you load from an external API. This should not be a problem. Does that marker data come in the form of topojson/geojson?

Normally, if you have a regular set of lng/lat coordinates you should not have to convert them, like in the bubbles example.

I am wondering whether the coordinates from your external api are maybe in a different order than what react-simple-maps requires (there was some confusion about that before, since Google and d3 specify lng/lat in a different order). In react-simple-maps the coordinates are put into the markers in the order [Longitude, Latitude]. See issues #87 and #67 for reference.

Let me know if this helps you.

Thank you for your input on the conversion stuff. I think there can be more done in that area, given the input from #34 for example. I would love to make more of that available in future releases. Any pointers on this would be appreciated.

bcm820 commented 6 years ago

Hello @zimrick, I'm happy to report that I was able to map the correct coordinates onto the map! I actually was not yet testing with the coordinates from my external API -- just some coordinates from a basic Google search. The actual data will come in the form of geojson.

It seems that the problem was related to the order of the coordinates. It may be worthwhile to just update the docs with comments from this post.

I look forward to seeing how react-simple-maps develops over time!! Thank you so much for the quick response.

zimrick commented 6 years ago

Great that it works! Yes, will make a note in the docs.

rakhimishra commented 2 years ago

why my some of the markers are showing outside of India map

Screenshot 2022-04-22 at 12 26 19 AM
 <Marker
                    key={name}
                    coordinates={coordinates}
                    style={markerStyle}
                    }}
                  >

                      <g
                        fill="none"
                        stroke="#00A707"
                        strokeWidth="0"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      >
                        <circle cx="12" cy="10" r="3" fill="#00A707" />
                      </g>

                  </Marker>

code for showing green marker. Please help. Stuck for two weeks. @zimrick