Display a 3D terrain map

This tutorial demonstrates how to create a 3D map and display it on a web page using MapTiler cloud data.

You will learn the following:

  • How to add a raster-dem layer (RGBA terrain) to your map.
  • How to enable the 3D terrain of the map.
  1. Initialize map and load the style (see get started tutorial) or copy the following code

  2. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

  3. Add event handler for map load event. You will add code to create a GeoJSON source and a vector layer in this handler.

    
           zoom: 14, // starting zoom
         });
         map.on('load', function() {
            
         });
         map.on('error', function(err) {
     
  4. Add a “raster-dem” source that contains the terrain elevations (RGBA tiles) to the map.

    
     map.on('load', function() {
       map.addSource("terrain", {
         "type": "raster-dem",
         "url": `https://api.maptiler.com/tiles/terrain-rgb/tiles.json?key=${key}`
       });
     });
     
  5. Enable the 3D terrain of the map indicating the data source.

    
     map.on('load', function() {
       map.addSource("terrain", {
         "type": "raster-dem",
         "url": `https://api.maptiler.com/tiles/terrain-rgb/tiles.json?key=${key}`
       });
       map.setTerrain({
         source: "terrain"
       });
     });
     
  6. Add options to the map to load the map with a 3D view

    
     const map = new maplibregl.Map({
         container: 'map', // container id
         style: `https://api.maptiler.com/maps/outdoor/style.json?key=${key}`, // style URL
         center: [6.85684, 45.83595], // starting position [lng, lat]
         zoom: 14, // starting zoom
         pitch: 61,
         bearing: 172,
         maxPitch: 85,
         maxZoom: 14
       });
     

Online demo