[Help wanted] How to use custom topoJson and properly scale the map?

[mihai-ro]

Hi!

I am trying to use a custom topoJson file that I generated by following the steps in the docs. I was able to render the map in the UI; unfortunately, I am struggling with properly scaling it. No matter the properties I pass and projections used, the map is stays vey small.

Please help me understand what am I doing wrong. Here is my sandbox - https://codesandbox.io/s/rough-cloud-5t1r6?file=/src/App.js

Thank you!

[zimrick]

Hi @mihai-ro, You should be able to get some decent results if you set the projection config to something like this:

<ComposableMap
  projection="geoAzimuthalEqualArea"
  projectionConfig={{
    rotate: [-24.9668, -45.9432, 0],
    scale: 6600,
  }}
  style={{ height: "100%", width: "100%" }}
>

Hope this helps, Cheers

[mihai-ro]

Hi, @zimrick . Thank you! It actually did! I also set a minWidth, to prevent it from scaling down to an unusable size. I have a follow-up, question, if you can please help me clarify this as well. I would like to add markers to the above map. I have just adjusted it with your recommendations and updated the sandbox with markers using the example in the docs. The coordinates are from google maps; however, I cannot seem to see make the markers render. What am I doing wrong?

[Updated] I got it sorted out:) looks like lat and long are inverted. Usually it is long-lat pair, but the array consumes them as lat-long. Thank you again!

[zimrick]

Hi @mihai-ro, That's a common problem. The coordinates from google use a different order than d3. I know this is a bit of a point of confusion when using the Google coordinates in react-simple-maps.

Cheers