Landmarks 3D plugin

Request Access

Important note 3D Landmarks are unavailable on a Freemium or Pay As You Grow (PAYG) basis. Click the Request Access button above to contact our Sales team.

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

This plugin uses @tomtom-org/maps-sdk, maplibre-gl and three as peer dependencies — ensure all three are installed in your project.

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):

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

const landmarks = new Landmarks3D(map);

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

Usage examples

Change the display mode

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

inherited mirrors the colour, opacity and vertical gradient of the basemap 3D building layer and shades landmarks the way that layer does, so they blend in instead of standing out.

Terrain

Landmarks stand on 3D terrain with nothing to configure: each one is lowered onto the lowest ground under its footprint, so no wall floats above a slope, and follows the terrain as it loads or its exaggeration changes.

import { TerrainModule } from '@tomtom-org/maps-sdk/map';

await TerrainModule.get(map, { elevation: true, hillshade: true });
const landmarks = new Landmarks3D(map);

See the 3D terrain map example.

Toggle visibility

await landmarks.setVisible(false);

Configuration

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

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