James Croft

SVG contour maps

I’d previously used GDAL to make a raster hillshaded map. Here’s the same area as a contour map in SVG form:

Like last time, I used GDAL to get the source data from the Elevation dataset on AWS.

  docker run  -v $(pwd):/gdal -w /gdal geographica/gdal2 \
    gdal_translate \
      -of GTiff  \
      -projwin -2.41081 53.911186 -2.185871 53.814308 \
      -projwin_srs EPSG:4326 \
      elevation.xml pendle.tif

The data needed reprojecting into EPSG:4326 as I was going to be extracting GeoJSON from it:

  docker run  -v $(pwd):/gdal -w /gdal geographica/gdal2 \
    gdalwarp \
      -s_srs EPSG:3857 \
      -t_srs EPSG:4326 \
      pendle.tif pendle-4326.tif

GDAL contour takes a raster elevation model turns it into a vector contour map. In this case I used the GeoJSON driver to export the contours.

  docker run  -v $(pwd):/gdal -w /gdal geographica/gdal2 \
    gdal_contour \
      -a elev \
      -i 10.0 \
      -f GeoJSON \
      pendle-4326.tif contour.geojson

I now had a GeoJSON file with all the contours, the only problem was that it was 55MB.

I was able to bring this down to 2.2MB by stringing all these commands together to convert the GeoJSON to TopoJSON, simplify with toposimplify, then topoquantize and then convert back into GeoJSON.

  cat contour.geojson | \
    geoproject 'd3.geoMercator().fitSize([1000, 707], d)' | \
    geo2topo contours=- | \
    toposimplify -p 1 -f | \
    topoquantize 1e5 | \
    topo2geo contours=contours-simplified.geojson

Finally, I used geo2svg to create the SVG.

    geo2svg -w 1000 -h 707 < contours-simplified.geojson > pendle.svg

The full script is in this gist.