Map is broken / filled in, despite using valid GeoJSON

I’m creating a map in the style of the example at https://www.react-simple-maps.io/docs/geographies/. The only difference is that instead of a link to a TopoJSON file, I am using an array of GeoJSON MultiPolygons. The exact object I’m passing to Geographies can be found in this gist. If you want to see what it looks like, here it is formatted as a FeatureCollection. It’s valid, because GitHub manages to display it fine.

What I get looks like this:

The stroke I’m using is red, and the fill is black.

What I expect to happen is something like the GitHub display linked above, but this isn’t what happens. Any help is appreciated!

[jthistle]

Don’t worry, managed to fix it! My pipeline ended up looking like:

• start with ONS-provided GeoJSON
• rewind the bounds with @mapbox/geojson-rewind (setting clockwise to true - important)
• convert to topojson with topojson-server
• simplify with topojson-simplify (which expects smaller values for the weight threshold than I expected!)
• reformat for database storage

Thanks again for all your help! 😃

[jthistle]

Ah, that helps a lot, thank you! I think I’m going to end up converting GeoJSON to TopoJSON server-side and sending that over, then using it for the map, since that’ll help loading times as well as making it work. Thanks again.