This is the documentation of version 1.0.0-rc.1. Go to the latest version, 1.0.0-rc.5.
TomTom Maps for JavaScript
    Preparing search index...

    Class TrafficIncidentsModule

    The module that shows and configures real-time traffic incidents on the map.

    It controls the vector tile traffic incidents layers, which show traffic events like accidents, road closures, construction, and hazards.

    The module owns whether the style's incident layers are shown, which incidents, and how their lines look, through each magnitude's colour (colors) and the line width (widthFactor). See Who owns what.

    Features:

    • Toggle incidents visibility on/off
    • Separate visibility control for incident icons
    • Filter by incident type (accident, construction, etc.)
    • Filter by severity/delay magnitude
    • Filter by road categories
    • Planned incidents next to the ones under way (timeValidity)
    • Icon and line/polygon visualization

    Incident types:

    • Accidents
    • Road closures
    • Construction/road works
    • Weather conditions (fog, ice, rain, etc.)
    • Lane closures
    • Traffic jams
    • Broken down vehicles

    Basic usage:

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

    // Get module (auto-add to style if needed)
    const trafficIncidentsModule = await TrafficIncidentsModule.get(map, {
    visible: true
    });

    // Toggle visibility
    trafficIncidentsModule.setVisible(false);
    trafficIncidentsModule.setVisible(true);

    // Control icons separately
    trafficIncidentsModule.setIconsVisible(false);

    Filter by incident type:

    // Show only accidents and road closures
    trafficIncidentsModule.updateConfig({
    filters: { incidentCategories: { show: 'only', values: ['accident', 'road-closed'] } },
    });

    // Hide construction
    trafficIncidentsModule.updateConfig({
    filters: { incidentCategories: { show: 'all-except', values: ['roadworks'] } },
    });

    Filter by severity:

    // Show only major delays
    incidents.updateConfig({ filters: { magnitudes: { show: 'only', values: ['major'] } } });

    // Show incidents with at least 10 minutes delay
    incidents.updateConfig({ filters: { delays: { required: true, minMinutes: 10 } } });

    // Show every incident again
    incidents.updateConfig({ filters: undefined });

    Show the planned incidents too, such as scheduled roadworks:

    incidents.updateConfig({ timeValidity: ['present', 'future'] });
    

    Restyle the incident lines:

    incidents.updateConfig({ colors: { major: '#d0021b' }, widthFactor: 1.5 });
    
    • Traffic Incidents Guide
    • Traffic Guide
    • TrafficIncidentDetailsModule — for rendering incidents fetched via the trafficIncidentDetails() REST service as a developer-controlled overlay (use the details module when you need typed incident objects in app code; this vector-tile module remains the recommended default for visual fidelity).

    Hierarchy (View Summary)

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

      The MapLibre source and layer IDs of all sources this module creates and manages.

      Returns Record<keyof SOURCES_WITH_LAYERS, SourceWithLayerIDs>

      A record mapping each source name to its MapLibre source ID and an array of the IDs of that source's layers.

      Use these IDs 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');
      });
    • Applies a configuration to this module.

      The module updates its behaviour and appearance to match. It stores the configuration and reapplies it automatically when the map style changes.

      Parameters

      Returns void

      The given configuration replaces the current one rather than being merged into it. To change one part of it, use updateConfig.

      // Apply a new configuration
      myModule.applyConfig({ visible: true, color: '#E63312' });

      // Reset to default configuration
      myModule.applyConfig(undefined);
      • resetConfig for a convenience method to reset configuration
      • getConfig to retrieve the current configuration
    • Returns a shallow copy of the current module configuration, or undefined if none is applied.

      Returns NonNullable<TrafficIncidentsModuleConfig> | undefined

      A shallow copy of the current configuration, or undefined. It is a copy so that you can't modify the internal state by accident.

      Only the top-level properties are copied. Nested objects and arrays still reference the original configuration. This is enough for most use cases, but keep it in mind with complex configurations.

      // Apply a configuration
      myModule.applyConfig({ visible: true, color: '#E63312' });

      // Later, retrieve the current configuration
      const currentConfig = myModule.getConfig();
      console.log(currentConfig); // { visible: true, color: '#E63312' }

      // When no config is applied
      myModule.resetConfig();
      console.log(myModule.getConfig()); // undefined
    • Returns the features the map renders in the viewport, from its vector tiles.

      Returns { trafficIncidents: TrafficIncidentsModuleFeature[] }

      An object containing visible traffic incident features.

      It returns all incident features currently rendered in the visible map area, including both incident areas/lines and icon markers.

      Their properties depend on the traffic incidents vector tile schema and may include:

      • Incident type/category
      • Severity/magnitude
      • Delay information
      • Road affected
      • Description
      const rendered = incidents.getRenderedFeatures();
      console.log(`Visible incidents: ${rendered.trafficIncidents.length}`);
      rendered.trafficIncidents.forEach(incident => {
      console.log('Incident:', incident.properties);
      });

      Filter and analyze visible incidents:

      const rendered = incidents.getRenderedFeatures();
      const accidents = rendered.trafficIncidents.filter(
      incident => incident.properties.category === 'accident'
      );
      console.log(`Accidents in view: ${accidents.length}`);
    • Whether the incident icons are set to be shown.

      Returns boolean

      The icons.visible setting and, while it is unset, isVisible. It is true for the icons-only state, { visible: false, icons: { visible: true } }.

      incidents.setVisible(false);
      incidents.setIconsVisible(true);
      incidents.isIconsVisible(); // true: the icons show alone
    • Whether traffic incidents are set to be shown.

      Returns boolean

      The visible setting, or false if nothing has set it, as traffic is hidden until shown. isIconsVisible reads the icons setting.

      if (incidents.isVisible()) {
      console.log('Incidents are displayed');
      }
    • Resets this module's configuration to its default values.

      It clears any applied configuration and restores the module to its initial state, the same as calling applyConfig(undefined).

      Returns void

      The module then behaves as if no configuration was ever applied. Any custom settings, styling or behaviour changes are replaced with default values.

      // Apply some configuration
      myModule.applyConfig({ visible: true, color: '#E63312' });

      // Later, reset to defaults
      myModule.resetConfig();
      • applyConfig to apply a new configuration
      • getConfig to retrieve the current configuration before resetting
    • Sets the visibility of incident icon layers.

      Parameters

      • visible: boolean

        true to show icons, false to hide them.

      Returns void

      This controls only the icon/symbol layers, not the incident area polygons or lines. It stores icons.visible, which overrides visible for the icons until the next setVisible. setVisible(false) then setIconsVisible(true) shows the icons alone.

      // Hide icons but keep incident areas visible
      incidents.setIconsVisible(false);

      // Show icons
      incidents.setIconsVisible(true);
    • Sets the visibility of all traffic incident layers.

      Parameters

      • visible: boolean

        true to show incidents, false to hide them.

      Returns void

      This controls all incident layers including icons, lines, and polygons, and clears icons.visible, so the icons follow visible again.

      incidents.setVisible(false); // Hide all incidents
      incidents.setVisible(true); // Show all incidents
    • Changes part of the configuration and keeps the rest.

      The given properties are laid over the current configuration one level deep, so a nested object you pass replaces the one that was there. The result is applied with applyConfig. This works the same on every module, whatever its applyConfig does with a whole configuration.

      Parameters

      • partial: Partial<NonNullable<CFG>>

        The properties to change.

      Returns void

      routing.applyConfig({ displayUnits: { distance: { type: 'imperial_us' } }, color: '#0a3653' });
      routing.updateConfig({ color: '#c2185b' }); // displayUnits stays imperial

      applyConfig to apply a whole configuration

    • Retrieves a TrafficIncidentsModule instance for the given map.

      Parameters

      Returns Promise<TrafficIncidentsModule>

      A promise that resolves to the initialized TrafficIncidentsModule.

      The configuration takes:

      • visible - Initial visibility of all incidents.
      • icons.visible - Initial visibility of incident icons.
      • timeValidity - The present incidents, the planned ones, or both.
      • filters - Incident type, severity, and delay filters, for lines and icons alike.

      trafficIncidentsKnobCatalogue lists the plain-valued settings as data.

      When the style lacks traffic incidents, get() reloads it with the trafficIncidents part included.

      Default initialization:

      const trafficIncidentsModule = await TrafficIncidentsModule.get(map);
      

      With configuration:

      const trafficIncidentsModule = await TrafficIncidentsModule.get(map, {
      visible: true,
      icons: { visible: true },
      filters: {
      any: [{
      incidentCategories: {
      show: 'only',
      values: ['accident', 'road-closed', 'jam']
      }
      }]
      }
      });