CODEWITHSUNDEEP
javascriptd3.jsqgistopojsonmapshaper
kwoxer
kwoxer

Reputation: 3833

QGIS generated shapefile malformed when converted to topojson by mapshaper

So I started with a really small example that is working well. I used QGIS to draw a line and then converted it to topojson with mapshaper. Then I use D3.js to load and visualize it. This is the bigger but not working example:

jsfiddle.net/kwoxer/kpL1uyy2/2/

As you can see it not showing just one line, it is showing crazy lines as if the convert gone wrong. Already tested different browsers.

But as I said I already did a small line before with QGIS, converted it, and everything was fine. So is this an issue of the size of the line? Or by the converter?

Here a picture from QGIS how it should like in the browser: https://i.sstatic.net/LQRAJ.png

So what is a good way to create an (huge) own map and using it in D3.js?

Upvotes: 1

Views: 551

Answers (1)

Matthew Bloch
Matthew Bloch

Reputation: 56

I looked at your Fiddle, and I think I see the problem. You are using d3's Equirectangular map projection, which expects lat-long coordinates with x values in the range [-180, 180] and y values in the range [-90, 90]. The actual x and y ranges of your dataset are [-991.4407052281722, 6787.6906928973385] and [-4789.571699454693, -155.32649155239142]. When d3 encounters coordinates outside the expected range, it wraps them -- this is why the lines look "crazy."

Based on your coordinate values, I'm guessing that you're using a projected coordinate system in your QGIS project. To display the data using d3, you can either export your shapes in lat-long coordinates (e.g. by selecting "WGS 84" as the CRS when saving a QGIS layer), or you can use d3 with projected data (see Drawing already projected geoJSON map in d3.js)

Upvotes: 4

Related Questions