3D terrain map

Render the map surface in 3D using terrain elevation data

import { TomTomConfig } from '@tomtom-org/maps-sdk/core';
import { BaseMapModule, TerrainModule, TomTomMap } from '@tomtom-org/maps-sdk/map';
import { Landmarks3D } from '@tomtom-org/maps-sdk-plugin-landmarks-3d';
import './style.css';
import { API_KEY } from './config';

// (Set your own API key when working in your own environment)
TomTomConfig.instance.put({ apiKey: API_KEY, language: 'en-US' });

(async () => {
    const map = new TomTomMap({
        mapLibre: {
            container: 'sdk-map',
            center: [14.508, 46.0494],
            zoom: 16.2,
            pitch: 70,
            bearing: 125,
            maxPitch: 70,
        },
    });

    // Raises the map surface in 3D and shades its relief
    await TerrainModule.get(map, { elevation: { visible: true, exaggeration: 1.5 }, hillshade: { visible: true } });

    // Turn on 3D basemap buildings
    const baseMap = await BaseMapModule.get(map);
    baseMap.setVisible(true, { layerGroups: { show: 'only', values: ['buildings3D'] } });

    // Streams the 3D Landmarks, shaded like the 3D buildings around them
    new Landmarks3D(map);
})();

Open Sandbox

Ljubljana Castle crowns its hill above the old town and the river, and the castle and the buildings below stand on the slopes rather than floating above them.

TerrainModule.get raises the surface and shades it in one call, adding the elevation source to the style when it lacks one.
BaseMapModule.setVisible turns on the style’s own 3D buildings, which follow the terrain with no extra work.
new Landmarks3D(map) lowers each landmark onto the terrain under its footprint, and shades it like the buildings around it.