need help to figure out what's wrong with the map

Hi,

so i have made a topojson it contains the counties of Hungary.

Tho, something is wrong, the map not getting rendered well. I have made a little repo for it, i’d appreciate if someone could point me to the right direction.

Thanks,

[zilahir]

Hi @zimrick ,

Thank you for your reply! And YES, this is exactly what I was missing, and now after reading your comment suddenly the documentation makes more sense also! 😃

Thank you!

[zimrick]

Hi @zilahir, This is related to how the center prop behaves in the projection config. The projection config object modifies the d3-geo projection under the hood, so the props in there should behave as they would in d3-geo. The center property on ZoomableGroup however lets you pinpoint the map to a specific location regardless of the projection rotation offset (it compensates for that under the hood).

Here’s how your config object modifies the underlying projection: https://codesandbox.io/s/map-config-rotation-and-center-l2nfd?file=/src/MapChart.js

I added all countries so you can see where you are on the world map. This configuration centers the map on western Kazakhstan.

So initially you use the rotate prop to rotate your projection, and then you modify the longitude by 19.5, and the latitude by 47.76 via the center prop. This means that your center gets moved to E49.5 (30 + 19.5) and N47.76. So you are adding these degrees, rather than setting the center of the map.

This is the default behaviour of d3-geo AFAIK and it will behave as expected if you are using a global map where the rotation is set to [0,0,0]. When you start moving the rotation, you have to compensate with the center accordingly. If you set your center to [-10.5, 47.76] you should be centered on Hungary (i.e. E19.5 N47.76).

Hope this helps.