Introduction

Both the MapLibre GL JS and Mapbox GL JS consume RGB elevation tiles to create 3D terrain maps or hillshade. We can of course use some exisitng RGB elevation tiles, but here I would like to introduce how I made RGB elevation tile from a public domain DEM (SRTM from USGS) for my area of interest.

2022-10-31 Additional note
This article was with SRTM. However, there would be some void areas in paticular mountaion area with SRTM.
You may want to try NASADEM, which is based on SRTM, ASTER G-DEM and ALOS DEM.
Here is the link to my other trial　https://qiita.com/T-ubu/items/c7bb5697b51f245ef163

My environment

Windows 10 Enterprise
Docker version 20.10.8
PowerShell version 5.1.19041.1237

Procedure

Step 1: SRTM download from USGS

I visited USGS EarthExplorer and downloaded SRTM 1 arc second DEM in tiff format. For the area of my interest, I downloaded the following 10 files from w80 to w75 and from n42 to n44. It is the area around the Niagara Falls and the Finger Lakes.

Then, I stored the files in "src" directory of my working place.

FYI, if you want to download more file all at once, try bulk download. I also tried for my other project: https://qiita.com/T-ubu/items/bb353935085eec2ab7a0

Step 2: Run a Docker container to use various tools

During this work, we need to use various geospatial tools namely gdal_merge.py, rasterio, and mb-util. In order to easily use them, let's use a Docker image and work on that Docker container. I have pushed my docker container as unvt/rgbify:ubukawa. So, we can pull it and run as below. Make sure that we will connecto our local working directory within the docker container (/data).

docker pull unvt/rgbify:ubukawa
docker run -it --rm -v ${PWD}:/data unvt/rgbify:ubukawa
cd /data

Step 3: Merging the DEM as a single input file

If the total size of your files are not so large, let's merge them all to create a single input file. You can do it with gdal_merge.py as follows.

gdal_merge.py -o input.tif src/*.tif

You will see the progress like this figure.

(Note for Advanced users)
From my experience, if the total size of your SRTM data is greater than a few GB, it would be a good idea to prepare separate input files. When I worked for the whole SRTM data, I made 932 inputs files from 14,277 SRTM files (I used the ZL6 tile extent to devide the input). If you are interested in, use translator and check this text: https://qiita.com/T-ubu/items/a90c3d42f809725f50ab.

Step 4: Creating RGB elevation tile

You can run raterio tool in our container. Just run the following command to obtain RGB elevation tile from the merged input. You can adjust the max zoom and min zoom if needed, but given the original resolution, I think the max zoom would be 12 or 13.

rasterio rgbify -b -10000 -i 0.1 --max-z 12 --min-z 9 --format webp input.tif out.mbtiles
mb-util out.mbtiles zxy

With the above command, we created the mbtiles first and extend it to zxy directory using mb-util. Now, you have the RGB elevation tiles like this.

Then, congratulations. You now have the RGB elevation tile in zxy structure (png).

Summary

This articile shows how I made a RGB elevation tile from SRTM DEM for my area of interest.

Acknowledgement

I thank USGS for providing such wonderful earth observation data sets.
I also thank the developers of the tools, which enables me to get a good result in an open source way.

References