The events of what the active display mode draws, which is the hexagon or square cells, or the heatmap's tile-centre points.
It supports feature-interaction events (hover, click, contextmenu, long-hover) and
module lifecycle events (config-change, shown-features), all through the same
events.on(type, handler) call.
module.events.on('hover', (feature, lngLat) => {
console.log(feature.properties.congestionLevel);
});
const unsub = module.events.on('config-change', (config) => {
console.log('Config updated:', config);
});
module.events.on('shown-features', (data) => {
console.log('Analytics data shown:', data);
});
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);
Removes all area analytics data from the map.
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 displayed data for all visualisation modes.
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();
Sets explicit colour stops on one or more metrics, which win over their palette.
The stops, or undefined to clear them so the palette paints again.
Optionalmetrics: ("speed" | "freeFlowSpeed" | "congestionLevel" | "travelTime" | "networkLength")[]
The metrics to set them on. When omitted, all metrics.
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.
Filters visible tiles by value range for one or more metrics.
The filter, or undefined to clear it.
Optionalmetrics: ("speed" | "freeFlowSpeed" | "congestionLevel" | "travelTime" | "networkLength")[]
The metrics to set it on. When omitted, all metrics.
Configures extrusion height behaviour for one or more metrics.
Optionalmetrics: ("speed" | "freeFlowSpeed" | "congestionLevel" | "travelTime" | "networkLength")[]
The metrics to set it on. When omitted, all metrics.
Sets the palette of one or more metrics, as AreaAnalyticsMetricConfig.palette describes.
A metric whose colorStops are set keeps painting with them. To show the palette, clear them
with setColorStops(undefined).
The palette, or undefined to clear it back to trafficLight.
Optionalmetrics: ("speed" | "freeFlowSpeed" | "congestionLevel" | "travelTime" | "networkLength")[]
The metrics to set it on. When omitted, all metrics.
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.
Displays area analytics data on the map.
It takes the raw response from trafficAreaAnalytics() and turns its tiles into point
features (heatmap), hexagonal polygons (hexgrid modes) and square polygons (square modes).
It also displays the region boundary geometry.
The raw TrafficAreaAnalytics service response.
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
ProtectedwaitStaticcreateCreates and initialises a Traffic Area Analytics module.
All configuration properties are optional. Built-in defaults fill every field that config
omits, or all of them if you omit config. After create() resolves,
TrafficAreaAnalyticsModule.getConfig always returns the display mode, the active metric
and every metric's settings with defaults filled in, so you don't need to reference them.
TrafficAreaAnalyticsModule 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.
trafficAreaAnalyticsKnobCatalogue lists the plain-valued settings of config as data.
Optionalconfig: TrafficAreaAnalyticsModuleConfig
Optional initial configuration. Omit it to use all defaults.
A promise that resolves with the initialised module.
// No config needed — defaults are applied automatically.
const module = await TrafficAreaAnalyticsModule.create(map);
await module.show(analytics);
// Or override specific properties while keeping everything else at default:
const module = await TrafficAreaAnalyticsModule.create(map, {
displayMode: 'heatmap',
metrics: {
congestionLevel: { palette: 'heat' },
},
});
The module that draws area analytics data on the map, in one of five modes:
hexgrid-3d- 3D extruded hexagonal cells coloured and raised by the active metric (default).hexgrid-2d- Flat hexagonal cells coloured by the active metric.square-3d- 3D extruded square cells coloured and raised by the active metric.square-2d- Flat square cells coloured by the active metric.heatmap- A MapLibre density-heatmap layer built from tile-centre points.The actual region boundary always renders alongside the analytics cells.
Remarks
Quick start: