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.
Use these IDs to:
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.
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);
Returns 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 features the map renders in the viewport, from its vector tiles.
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:
Whether the incident icons are set to be shown.
The icons.visible setting and, while it is unset, isVisible. It is true
for the icons-only state, { visible: false, icons: { visible: true } }.
Whether traffic incidents are set to be shown.
The visible setting, or false if nothing has set it, as traffic is hidden until
shown. isIconsVisible reads the icons setting.
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();
Sets the visibility of incident icon layers.
true to show icons, false to hide them.
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.
Sets the visibility of all traffic incident layers.
true to show incidents, false to hide them.
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
ProtectedwaitStaticgetRetrieves a TrafficIncidentsModule instance for the given map.
The map to attach this module to.
Optionalconfig: TrafficIncidentsModuleConfig
Optional configuration for initialization, visibility, and filters.
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.
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.
Remarks
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:
timeValidity)Incident types:
Example
Basic usage:
Example
Filter by incident type:
Example
Filter by severity:
Example
Show the planned incidents too, such as scheduled roadworks:
Example
Restyle the incident lines:
See
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).