TomTom Maps for JavaScript
    Preparing search index...

    Class TrafficIncidentsModule

    Traffic Incidents Module for displaying and configuring real-time traffic incidents on the map.

    This module controls the vector tile traffic incidents layers that show traffic events like accidents, road closures, construction, and hazards.

    Features:

    • Toggle incidents visibility on/off
    • Separate control for incident icons
    • Filter by incident type (accident, construction, etc.)
    • Filter by severity/delay magnitude
    • Filter by road categories
    • 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-international/maps-sdk-js/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.filter({
      any: [{
        incidentCategories: {
          show: 'only',
          values: ['accident', 'road_closed']
        }
      }]
    });

    // Hide construction
    trafficIncidentsModule.filter({
      any: [{
        incidentCategories: {
          show: 'all_except',
          values: ['road_works']
        }
      }]
    });

    Filter by severity:

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

    // Show incidents with at least 10 minutes delay
    incidents.filter({
      any: [{
        delays: {
          mustHaveDelay: true,
          minDelayMinutes: 10
        }
      }]
    });

    Filter icons separately from incident areas:

    // Show all incidents but only major icons
    incidents.filter(
      {
        any: [{}] // Show all incidents
      },
      {
        any: [{
          magnitudes: { show: 'only', values: ['major'] }
        }]
      }
    );

    Hierarchy (View Summary)

    Index

    Accessors

    events sourceAndLayerIDs

    Methods

    anyIconLayersVisible applyConfig filter getConfig isVisible resetConfig setIconsVisible setVisible waitUntilModuleReady get

    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

    • Checks if any incident icon layers are currently visible.

      Returns boolean

      true if any icon layer is visible, false if all icons are hidden.

      if (incidents.anyIconLayersVisible()) {
        console.log('Incident icons are shown');
      }

    • 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: IncidentsConfig | 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

    • Applies filters to traffic incidents display.

      Parameters

      Returns void

      Filter Options:

      • incidentCategories: Filter by incident type
      • magnitudes: Filter by delay severity (minor/moderate/major/unknown)
      • delays: Filter by delay duration
      • roadCategories: Filter by road importance
      • roadSubCategories: Filter by specific road types

      Available Incident Categories:

      • accident, road_closed, lane_closed
      • road_works (construction)
      • jam (traffic jam)
      • fog, rain, ice, wind, flooding
      • dangerous_conditions
      • broken_down_vehicle
      • unknown

      Delay Magnitudes:

      • minor: Small delays
      • moderate: Moderate delays
      • major: Significant delays
      • unknown: Unknown or no delay info

      Filter by type:

      incidents.filter({
        any: [{
          incidentCategories: {
            show: 'only',
            values: ['accident', 'road_closed']
          }
        }]
      });

      Filter by severity and delay:

      incidents.filter({
        any: [{
          magnitudes: { show: 'only', values: ['major', 'moderate'] },
          delays: {
            mustHaveDelay: true,
            minDelayMinutes: 5
          }
        }]
      });

      Different filters for icons and areas:

      // Show all incidents on roads
      const incidentFilter = {
        any: [{
          roadCategories: { show: 'only', values: ['motorway', 'trunk'] }
        }]
      };

      // But only show icons for major incidents
      const iconFilter = {
        any: [{
          magnitudes: { show: 'only', values: ['major'] }
        }]
      };

      incidents.filter(incidentFilter, iconFilter);

    • 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<IncidentsConfig> | 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

    • Checks if any traffic incident layers are currently visible.

      Returns boolean

      true if any incident layer is visible, false if all are hidden.

      if (incidents.isVisible()) {
        console.log('Incidents are displayed');
      }

    • 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

    • 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.

      // 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.

      incidents.setVisible(false); // Hide all incidents
      incidents.setVisible(true);  // Show all incidents

    • Retrieves a TrafficIncidentsModule instance for the given map.

      Parameters

      • map: TomTomMap

        The TomTomMap instance to attach this module to.

      • Optionalconfig: IncidentsConfig

        Optional configuration for initialization, visibility, and filters.

      Returns Promise<TrafficIncidentsModule>

      A promise that resolves to the initialized TrafficIncidentsModule.

      Configuration:

      • visible: Initial visibility state for all incidents
      • icons.visible: Initial visibility for incident icons
      • ensureAddedToStyle: Auto-add traffic incidents to style if missing
      • filters: Incident type, severity, and delay filters
      • icons.filters: Separate filters for icons

      Error if traffic incidents source is not in style and ensureAddedToStyle is false

      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']
            }
          }]
        }
      });

    Settings

    Member Visibility

    On This Page

    Accessors
    Methods