This is an example of how to create a shaded relief raster with a vector map overlay (using SVG and d3.js).
Step 1 was to create the raster. I used tiled GeoTiffs from the SRTM project downloading four tiles that completed a map of Costa Rica. To combine the tiff files into a single raster with the correct projection and dimensions, I used
t_srs option sets an albers equal area projection that will center on Costa Rica. The
te option defines the extent of the map, using SRS coordinates. I don’t fully understand how this works and used some trial and error. Note that the x/y has a ratio of 1.6, the same as the intended output resolution (960x600).
The projection used here mirrors the projection set with
Step 2 is to create, from this GeoTiff file, two images: one, grayscale, that represents “shade” — given a certain direction of sunlight, it simulates the effect of light on the relief map:
The second image is a “color relief” that maps certain colors to certain elevations. The
color_relief.txt file provides this information in the format:
elevation r g b.
These files are combined using the program
More code and information here, including a rather involved Makefile.