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

[zilahir]

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,

[BenMaruchu]

Hi @zilahir ,

I have tried to re-export your topojson file using mapshaper cause I think it had an issue with it, and I have added a couple of things to make the map render well.

import React from "react";
import "./styles.css";
import {
  ComposableMap,
  ZoomableGroup,
  Geographies,
  Geography
} from "react-simple-maps";

import geoUrl from "./egybefuzve.json";  // re-exported topojson file

export default function App() {
  return (
    <div className="App">
      <ComposableMap projectionConfig={{ scale: 7000 }}>
        <ZoomableGroup center={[19.5058, 47.7612]}>
          <Geographies geography={geoUrl}>
            {({ geographies }) =>
              geographies.map(geo => (
                <Geography key={geo.rsmKey} geography={geo} />
              ))
            }
          </Geographies>
        </ZoomableGroup>
      </ComposableMap>
    </div>
  );

I hope this helps.

[zilahir]

Hi @BenMaruchu!

Thank you for your help and reply, i have reexported the json myself using the tool you mentioned. However, nothing is visible, even though there are things rendered.

Here is the updated codesandbox, of you could just take an other look :)

Thank you

[BenMaruchu]

@zilahir can you check this codesandbox

I have used the version I re-exported from mapshaper

[zilahir]

yes, it does work! Thank you! :)

[zilahir]

hi @BenMaruchu!

i am not gonna reopen this, and sorry for bothering, but let's say i want to remove the <ZoomableGroup> from the example you gave me, because I want to disable the moving and the zooming.

<ComposableMap
        projectionConfig={{ scale: 7000, rotate: [-30, 0, 0], center: [19.5058, 47.7612] }}
        projection='geoAlbers'
      >
          <Geographies geography={geoUrl}>
            ...
          </Geographies>

</ComposableMap>

And again, nothing is visible, and it seems like i am missing some fundamental knowledge.

What is it that I don't quite get? :)

Thanks!

[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.

[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!