Traffic incident focus

Bring a city's traffic incidents forward and push the rest of the map back, with one switch

import { bboxFromGeoJSON, TomTomConfig } from '@tomtom-org/maps-sdk/core';
import {
    GeometriesModule,
    StylingFoundationsModule,
    TomTomMap,
    TrafficFlowModule,
    TrafficIncidentDetailsModule,
} from '@tomtom-org/maps-sdk/map';
import { geocodeOne, geometryData, trafficIncidentDetails } from '@tomtom-org/maps-sdk/services';
import type { LngLatBoundsLike } from 'maplibre-gl';
import './style.css';
import { API_KEY } from './config';
import { initFocus } from './focus';

TomTomConfig.instance.put({ apiKey: API_KEY, language: 'en-GB' });

(async () => {
    const map = new TomTomMap({ mapLibre: { container: 'sdk-map', center: [-0.13, 51.51], zoom: 10 } });

    const styling = await StylingFoundationsModule.get(map);
    const flow = await TrafficFlowModule.get(map, { visible: true });
    const incidents = await TrafficIncidentDetailsModule.create(map);
    const boundary = await GeometriesModule.create(map, { fill: { style: 'outline' } });

    const city = await geocodeOne('London');
    const cityBoundary = await geometryData({ geometries: [city] });
    await boundary.show(cityBoundary);
    await incidents.show(await trafficIncidentDetails({ polygon: cityBoundary, timeValidityFilter: ['present'] }));
    map.mapLibreMap.fitBounds(bboxFromGeoJSON(cityBoundary) as LngLatBoundsLike, { padding: 40, duration: 0 });

    initFocus(styling, flow, incidents, boundary);
})();

Open Sandbox

One switch brings London’s incidents and boundary forward and pushes traffic flow, POIs and road labels back. Switch it off and every layer returns to its default.

Traffic flow fades through its own opacityFactor.
styling.layers.query selects the style’s layers by group, pois included, so one call fades a whole module’s layers and reset undoes it.
Those queries reach only the style’s own layers. The incidents and the boundary take theirs through each module’s layers config, set with updateConfig and merged over the defaults rather than replacing them.