D3js makes drawing maps in different projections extremely easy. You can choose from the most common ones to a really exotic set of projections that you never heard of before.
Usually, all the examples assume that the original data has got vector format and in a lat-lon (Equirectangular) projection, which isn’t true.
To handle these situations, we need to transform the data to the lat-lon projection first, and then draw the map as usual:
Let’s see an actual example of this. The WRF model of the example runs in the Conic Conformal projection.
- One solution, of course, is to re-project the GeoTIFF with the GDAL warp program and use this file as usual
- This raster re-projection interpolates the data, so the final result is a bit different if the number of pixels isn’t very high (which is the case)
- The other solution is reading the original file and re-project all the data we need before passing it to the d3js geoProjection
- For each barb, which is located in a point, we’ll use the proj4js library to get the point projected coordinates
- To reproject the isobands, we’ll use the reproject library, which reprojects GeoJSON data directly
- Remember that the d3js projection will be used to draw the data once we have it in lat-lon, but that the GeoTIFF is in Conical Conformal
- The original projection is defined in WKT
- The reproject library has the toWgs84 function, that takes the GeoJSON (the isobands, in ur case) and the original projection, and transforms it into WGS84, which is what we need
- Once the reprojection is done, the next steps are the same as usual
- For each barb position, the iteration will give us the x and y pixel positions on the map
- projection.invert([x,y]) will transform this position into lon-lat
- proj4().forward() will project this lon-lat to the original projection coordinates
- Then the GeoTransform can be applied as usual, since it will be in the original coordinates too
Projected raster to interpolated raster
Creating this kind of visualization from a projected GeoTIFF is also possible:
You can find the whole code here.
- The projection function is stored into a variable to speed the next process
- The WKT of the projection is get as in the other case
- To draw pixel by pixel, the loop is the same as in the raster interpolation example
- The difference is that the lon-lat coords given by d3js must be projected to the GeoTIFF projection with the function created before
- The geoTransform will be in the projected coordinates, so it’s used as usual
- The speed is worse, of course, but it’s still usable. It’s important to use the forward method without creating the projectino every time (of course)
Project a single image
If the problem is that you have an image and want to warp it to the D3js projection, you can follow these instructions, that give this result: