Landmarks 3D Plugin

import { TomTomConfig } from '@tomtom-org/maps-sdk/core';
import { type StandardStyleID, standardStyleIDs, TomTomMap } from '@tomtom-org/maps-sdk/map';
import { Landmarks3D, type Landmarks3DDisplayMode } from '@tomtom-org/maps-sdk-plugin-landmarks-3d';
import './style.css';
import { API_KEY } from './config';
import { initTogglePanel } from './togglePanel';

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

const map = new TomTomMap({
    mapLibre: {
        container: 'sdk-map',
        center: [4.8969, 52.3757],
        zoom: 15.94,
        pitch: 66,
        bearing: 8,
    },
});

map.mapLibreMap.setMaxPitch(80);

// Streams Orbis 3D Landmarks tiles
const landmarks = new Landmarks3D(map, { displayMode: 'inherited' });

document.querySelectorAll<HTMLInputElement>('input[name="displayMode"]').forEach((radio) => {
    radio.addEventListener('change', async () => {
        await landmarks.setDisplayMode(radio.value as Landmarks3DDisplayMode);
    });
});

const basemapSelector = document.querySelector('#sdk-example-basemap') as HTMLSelectElement;
standardStyleIDs.forEach((id) => basemapSelector.add(new Option(id)));
basemapSelector.addEventListener('change', (event) =>
    map.setStyle((event.target as HTMLSelectElement).value as StandardStyleID),
);

initTogglePanel();

Use cases

• City-scale 3D visualization — show recognizable landmark buildings (stadiums, cathedrals, towers) as detailed meshes instead of plain extrusions.
• Blend with the base map — display modes let landmarks render in plain dark or light shading, or inheriting the basemap building colour.

How it works

The plugin adds a MapLibre custom layer that fetches the landmark tiles covering the viewport and renders them with Three.js, keeping lighting in sync with the map style.

The standard styles include a 3D building layer that is hidden by default; the plugin makes it visible so landmarks appear in a full 3D city context. Basemap extruded buildings that overlap a landmark carry a has_landmark property; the plugin filters those out of the basemap building layer so they don’t clip through the high-detail meshes.

API Reference:

Landmarks 3D Plugin API Reference

Installation

1. Follow the SDK Project Setup to create a working SDK project and initialize a TomTomMap instance. Use a pitched camera for the best result; the plugin enables the standard style’s 3D building layer automatically.

2. Import and initialize the plugin (plugin-specific steps only):

1
// assume `map` is your initialized TomTomMap instance
2
// import the plugin in your application code:
3
// import { Landmarks3D } from '@tomtom-org/maps-sdk-plugin-landmarks-3d';
4

5
const landmarks = new Landmarks3D(map);

The landmark tile URL is built automatically from the global TomTomConfig (apiKey, commonBaseURL).

Usage examples

Change the display mode

1
// 'inherited' (default) | 'dark' | 'light'
2
await landmarks.setDisplayMode('dark');

inherited mirrors the colour and opacity of the basemap 3D building layer, so landmarks blend in instead of standing out.

Toggle visibility

1
await landmarks.setVisible(false);

Configuration

1
const landmarks = new Landmarks3D(map, {
2
  displayMode: 'inherited',
3
  visible: true,
4
  minZoom: 10,
5
});

For a complete working example, see the landmarks-3d-plugin example in the SDK repository (live coding example above).