TomTom Maps for JavaScript
    Preparing search index...

    Class TrafficIncidentOverlayModule

    Renders traffic incidents returned by trafficIncidentDetails() on the map.

    Use this module when you fetch incidents via the Incident Details service and want to display them as a developer-controlled overlay. TrafficIncidentsModule is the vector-tile alternative — hidden in the default style, so the overlay renders on its own without collision; if you've enabled it elsewhere in your app, hide it again before using the overlay to avoid double-rendering.

    7–8 layers — 4 to 5 line (optional focus-halo, outline, solid inner, direction chevron, pattern inner) and 3 symbol (incident marker, jam marker with delay text, closed-road marker). Per-magnitude styling uses match expressions on magnitudeOfDelay inside a single layer instead of one layer per magnitude. Colours are read from the loaded style at init (see ./util/readIncidentPalette), falling back to built-in defaults when absent. Direction is rendered as a tiled line-pattern (chevron sprite registered at init) instead of the vector-tile module's per-feature roads-arrow symbol — the pattern is continuous, so it reads on short jams and at planning zooms (z12+) where the per-feature symbol only activates at z15+.

    setFocus writes MapLibre feature-state focused=true|false on each rendered incident. The default visual treatment widens the focused subset and paints a black outline beneath it; unfocused incidents are unchanged. Override or disable the visual treatment via the focus config — focus: false keeps setFocus writing feature-state but emits no halo layer and no width pop, leaving callers free to drive their own styling off feature-state.focused.

    The Incident Details REST API returns a feature list, not a rendering-ready tile. Several tags that the vector-tile pipeline injects per-feature are absent:

    • Road classification (road_category, road_subcategory) — the vector-tile pipeline scales line width and offset by road class (motorway wider than street, stripe placed alongside the road on one carriageway). Without it, per-road-class geometry becomes a guess: we render every incident as a uniform stripe centred on the road, no offset.
    • Traffic-direction side (left_hand_traffic) — only meaningful when paired with road-class-driven offset; irrelevant here.
    • Declutter priority (display_class) — the vector-tile pipeline hides low-priority incidents at low zooms; we show everything above the layer minzoom.
    • Endpoint restriction (point_type) — the vector-tile pipeline limits jam and closed-road icons to line endpoints; we render on every matching feature.
    • Secondary cause (icon_category_1) — the vector-tile pipeline layers a cause icon (e.g. accident) over the jam icon; we show only the primary category.

    Callers wanting full per-road-class visual fidelity should use TrafficIncidentsModule instead.

    • Overlapping incidents — when multiple incidents share the same point or stack along the same road segment, MapLibre's symbol collision culling keeps only the highest-sort-key feature. Culled features are also invisible to queryRenderedFeatures, so hover and click cannot reach them. If you need to surface multiple incidents at one location, query the source data directly (the FeatureCollection you passed to show) rather than relying on render-time hit-testing.

    Fetch and render incidents for Amsterdam:

    import { TomTomConfig } from '@tomtom-org/maps-sdk/core';
    import { TomTomMap, TrafficIncidentOverlayModule } from '@tomtom-org/maps-sdk/map';
    import { trafficIncidentDetails } from '@tomtom-org/maps-sdk/services';

    TomTomConfig.instance.put({ apiKey: '<API_KEY>' });

    const map = new TomTomMap({ mapLibre: { container: 'map', center: [4.9, 52.37], zoom: 13 } });

    const overlay = await TrafficIncidentOverlayModule.get(map);
    const result = await trafficIncidentDetails({
    bbox: [4.85, 52.34, 4.95, 52.40],
    timeValidityFilter: ['present'],
    });
    await overlay.show(result);

    // Highlight a subset.
    overlay.setFocus([result.features[0].properties.id as string]);

    Hierarchy (View Summary)

    Index

    Accessors

    • get sourceAndLayerIDs(): Record<keyof SOURCES_WITH_LAYERS, SourceWithLayerIDs>

      Gets the source and layer identifiers for all sources managed by this module.

      This property provides access to the MapLibre source and layer IDs that were created and are managed by this module. These IDs can be used to interact directly with MapLibre's API or to identify which layers belong to this module.

      Returns Record<keyof SOURCES_WITH_LAYERS, SourceWithLayerIDs>

      A record mapping each source name to its corresponding source ID and layer IDs. Each entry contains the MapLibre source identifier and an array of layer identifiers associated with that source.

      The returned IDs are useful when you need to:

      • Directly manipulate layers using MapLibre's native API
      • Identify which layers on the map belong to this module
      • Set layer ordering or positioning relative to other layers
      • Access source or layer properties through MapLibre methods
      const ids = myModule.sourceAndLayerIDs;
      console.log(ids);
      // {
      // mySource: {
      // sourceID: 'my-source-id',
      // layerIDs: ['layer-1', 'layer-2']
      // }
      // }

      // Use with MapLibre API
      const map = myModule.mapLibreMap;
      ids.mySource.layerIDs.forEach(layerId => {
      map.setLayoutProperty(layerId, 'visibility', 'visible');
      });

    Methods

    • Applies a configuration to this module.

      This method updates the module's behavior and appearance based on the provided configuration. The configuration is stored internally and will be automatically reapplied if the map style changes.

      Parameters

      • config: TrafficIncidentOverlayConfig | undefined

        The configuration object to apply to the module. Pass undefined to reset the configuration to default values.

      Returns void

      When a configuration is applied, the module updates its visual representation and behavior accordingly. The configuration persists across map style changes, ensuring consistent module behavior even when the map's base style is modified.

      // Apply a new configuration
      myModule.applyConfig({ visible: true, opacity: 0.8 });

      // Reset to default configuration
      myModule.applyConfig(undefined);
      • resetConfig for a convenience method to reset configuration
      • getConfig to retrieve the current configuration
    • Remove all rendered incidents (source kept, data emptied).

      Returns Promise<void>

    • Retrieves a copy of the current module configuration.

      This method returns a shallow copy of the configuration object that is currently applied to the module. If no configuration has been applied, it returns undefined.

      Returns NonNullable<TrafficIncidentOverlayConfig> | undefined

      A shallow copy of the current configuration object, or undefined if no configuration is currently applied. The returned object is a copy to prevent unintended modifications to the internal state.

      The returned configuration object is a shallow copy, which means that while the top-level properties are copied, any nested objects or arrays are still referenced from the original configuration. This is sufficient for most use cases but should be kept in mind when dealing with complex configurations.

      // Apply a configuration
      myModule.applyConfig({ visible: true, opacity: 0.8 });

      // Later, retrieve the current configuration
      const currentConfig = myModule.getConfig();
      console.log(currentConfig); // { visible: true, opacity: 0.8 }

      // When no config is applied
      myModule.resetConfig();
      console.log(myModule.getConfig()); // undefined
    • Returns the currently shown incidents — the exact data that was passed to show.

      Reads the module's client-side cache (shownFeatures), mirroring the other GeoJSON modules (PlacesModule, TrafficAreaAnalyticsModule, GeometriesModule). It does not hit-test the viewport: the proxy already scopes and de-duplicates the allEventFeatures it dispatches to click handlers, so no caller needs viewport-level de-duplication here.

      Returns { incidents: TrafficIncidentDetails }

    • Whether any incident layer is currently visible.

      Returns boolean

    • Move incident layers before the given map-style layer, or to the top.

      Parameters

      Returns void

    • Resets the configuration of this module to its default values.

      This is a convenience method that clears any previously applied configuration and restores the module to its initial state. This is equivalent to calling applyConfig(undefined).

      Returns void

      After calling this method, the module will behave as if no configuration was ever applied. Any custom settings, styling, or behavior modifications will be removed and replaced with default values.

      // Apply some configuration
      myModule.applyConfig({ visible: true, opacity: 0.5 });

      // Later, reset to defaults
      myModule.resetConfig();
      • applyConfig to apply a new configuration
      • getConfig to retrieve the current configuration before resetting
    • Mark a subset of currently-rendered incidents as "focused" via MapLibre feature-state. null clears the state. Paint expressions in incidentDetailsLayers.ts read ['feature-state', 'focused'] and pop the focused subset (wider stripe + black outline). Unfocused features are unchanged — the focus treatment adds emphasis, it does not dim the rest.

      No effect if called before show().

      Parameters

      • ids: readonly string[] | null

      Returns void

    • Show or hide all incident layers.

      Parameters

      • visible: boolean

      Returns void