I am trying to project polygons to a map with a static background image using D3.js. The polygons looked slightly off in relation to the background so I drew the bounding box of the image, and sure enough, it's not matching.
I've uploaded the code as a gist and the result is live here. As you can see, the bounding box does not have the same proportions as the background, and also it's curved even though the geojson file clearly contains a rectangle.
In order to get the background image and the bounding box I took the following steps:
أكثر...
I've uploaded the code as a gist and the result is live here. As you can see, the bounding box does not have the same proportions as the background, and also it's curved even though the geojson file clearly contains a rectangle.
In order to get the background image and the bounding box I took the following steps:
- Downloaded raster data from Natural Earth.
- Cropped the raster image in QGIS using Raster->Extraction->Clipper.
- Saved the bounding box of the cropped image with gdaltindex bounds.shp cropped.tif, and converted the shapefile to GeoJSON in QGIS.
- Used the technique described in this SO post to scale the projection to the bounding box.
أكثر...