GeoJSON results in a Black Screen where the component is placed

[soupmoth]

New to React so forgive me if this is user error, but I've been stuck on this for 2 days.

My project currently is building an Electoral Map of the UK, representing all 650 constituencies and showing how different election systems, such as PR, AV, and STV can alter the result of elections. To do this, I wish to be able to use the react simple maps framework!

Instead, despite the JSON seemingly being correctly loaded as seen here in the console log

This is what I get

This is my code, where ElectoralMap is the child of another component

The directory.

JSON I'm using and ElectoralMap.js

[zimrick]

Hi @soupmoth,
Did you try rendering with stroke instead of fill? That way you can see better what is really going on.

<Geogrpahy key={geo.rsmKey} geography={geo} fill="none" stroke="#000" />

Your react-simple-maps code seems ok and it does seem to be rendering something. The map file could be a bit complex for SVG, but it should still be able to render it. You could try dropping the json in here to see if it works correctly:

https://mapshaper.org/

[soupmoth]

Unfortunately still a black screen, and weirder still, the JSON file loads on MapShaper.

I tried simplifying it further to this

But now its rendering like this???

[soupmoth]

accidnt sorry lol

[soupmoth]

did more poking around, the components are being created, but drawn in this weird way.

[soupmoth]

Hi @soupmoth, Did you try rendering with stroke instead of fill? That way you can see better what is really going on.

<Geogrpahy key={geo.rsmKey} geography={geo} fill="none" stroke="#000" />

Your react-simple-maps code seems ok and it does seem to be rendering something. The map file could be a bit complex for SVG, but it should still be able to render it. You could try dropping the json in here to see if it works correctly:

https://mapshaper.org/

went through this line of thinking, spent the day poking around looking for a solution, and couldn't make any progress. The JSON file works in MapShaper and something is being rendered as you said, and its clearly more complex then a black square because the patchy black lines.

The only lead I have is it seems all 632 constituencies in this segment of the map are actually being registered, but from what I can tell, are all rendered at the same scale as each other??? So it overlaps in this weird way???

[zimrick]

I just noticed that in the screenshot from mapshaper, this seems to be a pre-projected topojson file?
If you load this into mapshaper, open the mapshaper console and run this command:

proj wgs84

Then export the file as topojson and try to load it into react-simple-maps. Does it work then?
You can project the map in any of the d3-geo projections you want after that (e.g.):

<ComposableMap
  width={800}
  height={800}
  projection="geoAlbers"
  projectionConfig={{
    center: [0, 55.4],
    rotate: [4.4, 0, 0],
    parallels: [50, 60],
    scale: 4000,
  }}
>

Note that if you are using ZoomableGroup, you will have to remove the center prop from projectionConfig and instead center the map using the center prop of the ZoomableGroup component.

[soupmoth]

IT WORKS. THANK YOU SO MUCH. Hopefully this thread helps people in the future,

(for anyone in the future, the topojson export was VERY important after entering the console command. GeoJSON didn't work even after the corrected projection, but TopoJSON DID!)

this has made my night i can finally sleeeep