jebowe3/mt-everest-ngm-1988-3d

3D mapping of very high elevation terrain using MapLibre GL JS

Mt Everest, National Geographic, 1988, 3D

3D mapping of very high elevation terrain using MapLibre GL JS

I encountered a lot of difficulties generating RGB tif files from DEMs of terrain with extreme ranges of elevations, so I wanted to document how I was able to overcome this using a scan of one of my favorite wall maps - a 1988 National Geographic Magazine shaded topographic map insert of Mt. Everest.

Problem: RGB Outputs Display Spikes or Cave-Ins in MapLibre GL JS Visualizations

When I used the same rgbify commands for high-relief DEM data as for lower elevation low-relief data, I had issues with spikes appearing at 3000 meters or would see cave-ins when trying to correct for this in my Terminal commands.

While this is not exactly the same as the problem described above, a similar spiking problem can be seen in the image below and shows up in MapLibre's 3D Terrain documentation. The following solution should resolve these spikes and cave-ins as well.

Solution: Use a TXT File with RGB Designations for the Full Elevation Range with GDALDEM to Generate a Smooth and Continuous RGB TIF

First, I created a txt file I called "color_relief.txt" and placed the following text within:

3590 68 1 84
8890 253 231 37

In meters, 3590 to 8890 contained the full range of elevation values in my map. The numbers that follow these in each row are RGB values. I used this file to create a continuous range of colors between these two values.

Opening Terminal in MacOS, I used the following command to create an output RGB tif file using this color range:

gdaldem color-relief input_dem.tif color_relief.txt output_rgb.tif

Replace "input_dem.tif" and "output_rgb.tif" with your file names.

Next, I converted the output to mbtiles with the following command:

rio mbtiles output_rgb.tif output_rgb.mbtiles --format PNG --zoom-levels 0..14 --tile-size 256 --resampling bilinear

Again, replace the file names with your own.

Finally, I converted the mbtiles to pmtiles for use with MapLibre GL JS, using the following command:

pmtiles convert output_rgb.mbtiles output_rgb.pmtiles

Using this output with pmtiles of the scanned topographic map yielded the following results.

DEM data was downloaded from NASA Earthdata. The scanned topographic map was downloaded from Atlas of Places.

mt-everest-ngm-1988-3d's Issues

Question about the colors

I found this repo cause I am currently also trying to create RGB dem tiles and they also have some strange spikes in them.
I followed an other tutorial first where i created the RGB dem using rio rgbify but here I've seen that you simply use gdal and the color-mapping.

I wonder how that works though?!?

3590 68 1 84
8890 253 231 37

where as the formula should be

height = -10000 + ((R * 256 * 256 + G * 256 + B) * 0.1)

but if I enter your values, this does not add up? So I am wondering how your color-mapping works?
Would be awesome if you could explain that.