The MapLibre source and layer IDs of all sources this module creates and manages.
A record mapping each source name to its MapLibre source ID and an array of the IDs of that source's layers.
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.
The configuration to apply. Pass undefined to reset it to the default values.
The given configuration replaces the current one rather than being merged into it. To change one part of it, use updateConfig.
Use it for settings your code writes. It takes every setting, typed, including the ones no knob covers (layer specs, callbacks, MapLibre expressions), and checks no value at run time. For settings held as data, from a control, storage or a language model, use setKnobs.
// Apply a new configuration
myModule.applyConfig({ visible: true, color: '#E63312' });
// Reset to default configuration
myModule.applyConfig(undefined);
Removes all rendered incidents, keeping the source but emptying its data.
Takes the event state off one of the shown features.
Takes the given event states, or all of them, off the shown features.
Optionaloptions: ClearEventStatesOptionsReturns a shallow copy of the current module configuration, or undefined if none is applied.
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 ids of the shown features that have an event state, by state.
The read side of setEventState and clearEventStates, reflecting those and
the states user interactions put. The ids are those getShown() and the event handlers hand
back, so each can go straight back into setEventState.
Returns the currently shown incidents, which are the exact data passed to show.
It reads the module's client-side cache (shownFeatures), like 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.
Whether the module is set to be shown: its visible setting, true unless set. A shown
module with nothing shown draws nothing. getShown() returns what is shown.
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).
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();
Puts an event state on one of the shown features, as a user interaction would.
The state is what the module's own layers draw (place pins and entry points, route outlines,
geometries, details-module incidents, area-analytics cells), what layers of yours read with
['get', 'eventState'], and what getEventStates returns. It lasts as long as the shown
feature does, through setVisible, style and configuration changes, but not a new
show, a clear or a setStyle with resetState.
Marks a subset of the rendered incidents as "focused" through MapLibre feature-state, or
clears the state with null.
The module's layers read ['feature-state', 'focused'] and pop the focused subset with a wider
stripe and a theme-aware outline, as the highlight config sets. Unfocused features are
unchanged, as the highlight adds emphasis and does not dim the rest. It has no effect if called
before show().
Shows or hides everything the module draws.
Stored as visible in the configuration. Showing and clearing data never change it. A hidden
module keeps its data, through style changes too, and draws it again on setVisible(true).
Showing leaves hidden what the configuration turns off: a route section type that is off, the layers a place marker type does not use.
Renders the service result, replacing any previously shown snapshot.
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.
The properties to change.
Use it for settings your code writes, as applyConfig: typed, and not checked at run time. To change nested values and keep the ones beside them, or to set values held as data, use setKnobs, which reaches each by its path and checks it.
routing.applyConfig({ displayUnits: { distance: { type: 'imperial_us' } }, color: '#0a3653' });
routing.updateConfig({ color: '#c2185b' }); // displayUnits stays imperial
applyConfig to apply a whole configuration
StaticcreateCreates a new module instance on the given map, once the map is ready.
TrafficIncidentDetailsModule owns the sources, layers and images it adds, all suffixed per
instance. So every call returns a new, independent instance, and you can stack several on
one map.
trafficIncidentDetailsKnobCatalogue lists the plain-valued settings of config as data.
Optionalconfig: TrafficIncidentDetailsModuleConfig
The optional module configuration.
A promise with a new instance of this module.
Renders traffic incidents returned by
trafficIncidentDetails()on the map.Use this module when you fetch incidents through the Incident Details service and want to display them as a developer-controlled overlay. TrafficIncidentsModule is the vector-tile alternative. It is hidden in the default style, so this module renders on its own without collision. If you've enabled it elsewhere in your app, hide it again before using this module to avoid double-rendering.
Rendering approach
The module draws 7–8 layers: 4 to 5 line layers (optional highlight-halo, outline, solid inner, direction chevron, pattern inner) and 3 symbol layers (incident marker, jam marker with delay text, closed-road marker). Per-magnitude styling uses match expressions on
magnitudeOfDelayinside a single layer instead of one layer per magnitude. Colours come from the loaded style's incident layers, with built-in defaults when absent. They are read again whenever atraffic.incidents.colors.*styling knob recolours them. Direction renders as a tiledline-pattern(a chevron sprite registered at init) instead of the vector-tile module's per-featureroads-arrowsymbol. The pattern is continuous, so it reads on short jams and at planning zooms (z12+), while the per-feature symbol only activates at z15+.Focus and highlight
setFocus writes MapLibre feature-state
focused=true|falseon each rendered incident. The default highlight widens the focused subset and paints an outline beneath it (black on light map styles, white on dark). Unfocused incidents are unchanged. A hovered or clicked incident (itseventState, see setEventState) draws the same highlight. To override or disable it, use thehighlightconfig. Withhighlight: false,setFocusstill writes feature-state but no halo layer or width pop is emitted, so you can drive your own styling offfeature-state.focusedandeventState.API limitations
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_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, so the module renders every incident as a uniform stripe centred on the road, with no offset.left_hand_traffic). It only matters with road-class-driven offset, so it is irrelevant here.display_class). The vector-tile pipeline hides low-priority incidents at low zooms. The module shows everything above its layer's minzoom, and the icons of shorter delays only from a higher zoom.point_type). The vector-tile pipeline limits jam and closed-road icons to line endpoints. The module renders them on every matching feature.icon_category_1). The vector-tile pipeline layers a cause icon (e.g. accident) over the jam icon. The module shows only the primary category.For full per-road-class visual fidelity, use TrafficIncidentsModule instead.
Known limitations
queryRenderedFeatures, so hover and click cannot reach them. To surface multiple incidents at one location, query the source data directly (theFeatureCollectionyou passed to show) rather than relying on render-time hit-testing.Example
Fetch and render incidents for Amsterdam:
See