Multiple maps: 3D landmarks of one kind

Four famous towers, cathedrals, stadiums or monuments in 3D, one per map, in a grid that fits any screen

import { TomTomConfig } from '@tomtom-org/maps-sdk/core';
import './style.css';
import { API_KEY } from './config';
import { initKindPicker } from './kindPicker';
import { landmarkKinds } from './landmarks';
import { addLandmarkTile } from './landmarkTile';

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

const grid = document.querySelector('#ui-map-grid') as HTMLElement;
const tiles = landmarkKinds[0].landmarks.map((landmark) => addLandmarkTile(grid, landmark));

// The same four maps move to the next landmarks: a page can hold only so many WebGL contexts.
initKindPicker(document.querySelector('#ui-landmark-kinds') as HTMLElement, landmarkKinds, ({ landmarks }) =>
    tiles.forEach((tile, index) => tile.show(landmarks[index])),
);

Open Sandbox

Pick a kind of landmark and all four maps move to their next one, each seen in 3D from the side.

Each map has its own new Landmarks3D(map), which streams the models for that map’s view. Its BaseMapModule shows the buildings3D group, hidden in most standard styles, so the base map’s 3D buildings stand around them.
The camera aims at the landmark’s mid-height through MapLibre’s elevation option, with centerClampedToGround: false, so a tall tower stands in the middle of its map rather than running off the top.
A new kind reuses the same four maps, since a browser caps how many WebGL contexts one page can hold. A resize handler fits the zoom to the map’s new size whenever the grid reflows, from two columns to four or to one.