Custom MapLibre Terrain Tiles

MapLibre GL is a community-led fork derived from mapbox-gl-js before their switch to a non opensource license. One of the fancy possibilities of mapbox-gl-js is to display the terrain. This functionality is now also added to MapLibre (version 2.2.0-pre.2).

In this blog we’ll describe how to create custom terrain tiles to be used as terrain in MapLibre.

Step 1] Download data

First. download terrain data. We’ll focus on Andorra region, with terrain data obtained from JAXA (https://www.eorc.jaxa.jp/).

Go to https://www.eorc.jaxa.jp/ALOS/en/dataset/aw3d30/aw3d30_e.htm and create an account at step 4.

After the account is created go to https://www.eorc.jaxa.jp/ALOS/en/aw3d30/data/index.htm and log in.

A MapViewer will show up, select your are of interest and press download

Step 2] Prepare terrain tiles

A zip file will be downloaded, unzip and copy files ending on ‘_DSM.tif’ to an input directory. This TIF file contains the elevation per pixel.

Prepare a machine with some tools installed:

– mbutil: https://github.com/mapbox/mbutil

– rio-rgbify https://github.com/mapbox/rio-rgbify

Run tool ‘rio rgbify’ on the download DSM file, a MBTiles file containing RGB tiles will be created:

$ rio rgbify -b -10000 -i 0.1 --min-z 0 --max-z 12 -j 24 --format png ALPSMLC30_N042E001_DSM.tif output.mbtiles

Tool ‘rio rgbify’ produces some warnings like ‘FutureWarning’ and ‘NotGeoreferencedWarning’ but we can ignore those.

Unpack the MBTiles to the tiles folder:

$ mb-util output.mbtiles tiles

A directory ‘tiles’ will be created containing MapBox RGB tiles.

In the root directory create a tileset.json file like:

{"tiles":["./tiles/{z}/{x}/{y}.png"],"name":"","format":"png","basename":"jaxa_terrainrgb_0-12.mbtiles","id":"jaxa_terrainrgb_0-12","description":"","version":"1","type":"baselayer","minzoom":0,"maxzoom":12,"bounds":[-180,-85.05112877980659,180,85.0511287798066],"center":[0,0,6],"tilejson":"2.0.0"}

Step 3] Visualize terrain

Now we can create a MapLibre client to visualize the terrain , see for example https://github.com/bertt/terrain_tiles/blob/main/spain/index.html

Make sure to adjust the Map.Center in the HTML file to your area of interest.

Put the files on a webserver, result should be a nice terrain of the area of interest, go for live demo to https://bertt.github.io/terrain_tiles/spain/