Search code examples
javascriptjsond3.jsprojectionqgis

Visualising a custom map with QGIS and D3.js is harmed by the projection


These are 4 polygons I have: https://i.sstatic.net/GjmUu.jpg in QGIS. I now wanted to use them with D3.js. I already tried out the things in QGIS generated shapefile malformed when converted to topojson by mapshaper. That was working well on the old json file. But when I was creating a new one, it was bugging in the vertical middle. That's the example http://jsfiddle.net/kwoxer/kpL1uyy2/5/:

var projection = d3.geo.projection(function(x, y) { return [x, y];})
        .precision(0).scale(1).translate([0, 0]);
var path = d3.geo.path().projection(projection);

I also tried:

var path = d3.geo.path().projection(null);

but then the whole map was mirrored in the middle.

I think I don't use that system correctly I must assume. The json is fine on mapshaper, too. So do you have some tips, so that I just draw anything I want however big it is and then d3.js is able to draw it as it is. =)

Maybe by

  • normalizing lan/lng
  • disabling KBS

I really don't know why creating an own map is not straithforward.

Edit1: found nearly my issue here https://gis.stackexchange.com/questions/54373/either-geojson-to-topojson-conversion-problem-or-projection-issue-with-d3-js but I got:

C:\Program Files\GDAL>ogr2ogr.exe -f "GeoJSON" -s_srs region.prj -t_srs EPSG:432
6 asdas.json region.shp
ERROR 4: Failed to create GeoJSON datasource: asdas.json.
GeoJSON driver failed to create asdas.json

Edit2: already found this interesting answer: https://gis.stackexchange.com/questions/14731/how-do-i-specify-a-crs-for-a-fictional-game-map-in-qgis

But I used such a projection like he used, but still failing with d3.js.


Solution

  • I'm just using an own projection now:

    +proj=eqc +a=1790493.11 +lat_ts=0 +lon_0=0 +rf=800 +units=m +no_defs
    

    With that projection all is fine.