ProtecteddefaultThe map's colour for what carries no color under a config without a top-level color: the
accent when a theme has set one, otherwise a colour that follows the active light/dark theme.
Gets the events interface for handling user interactions with the polygons.
The module's events, with on / off for handlers and where for scoping.
ProtectedlightCurrent light/dark map theme, re-read on every layer/data build so style switches repaint.
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.
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:
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.
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.
The configuration object to apply to the module. Pass undefined to reset
the configuration to default values.
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.
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);
Takes the event state off one of the shown features.
Takes the given event states, or all of them, off the shown features.
Optionaloptions: ClearEventStatesOptionsRetrieves 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.
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, 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: it reflects 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 polygons and labels currently drawn, as prepared for display.
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 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).
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, 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, not through a new
show, a clear or a setStyle with resetState.
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 the given polygon geometries on the map.
Polygon features to display. Can be a single Feature, array of Features, or a FeatureCollection.
Behavior:
Feature Properties:
title: Used for labels if label is not setcolor: Override fill color per featurefillStyle: Override the module's fillStyle per featureSingle polygon:
await geometries.show({
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [[[4.88, 52.37], [4.89, 52.37], [4.89, 52.38], [4.88, 52.37]]]
},
properties: {
title: 'Amsterdam Center',
color: '#FF5733'
}
});
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 nested object that was there — and the result is applied with
applyConfig. This is the same on every module, whatever its applyConfig does with a
whole configuration.
The properties to change.
routing.applyConfig({ displayUnits: { distance: { type: 'imperial_us' } }, color: '#0a3653' });
routing.updateConfig({ color: '#c2185b' }); // displayUnits stays imperial
applyConfig to apply a whole configuration
ProtectedwaitStaticcreateMake sure the map is ready before create an instance of the module and any other interaction with the map
The TomTomMap instance.
Optionalconfig: GeometriesModuleConfig
The module optional configuration
Returns a promise with a new instance of this module
Configuration Options:
color: Base colour for fill and borderfill: Fill color and opacityline: Border/outline stylinglabel: Center label text and stylingbeforeLayerConfig: Layer ordering — a single target, or { all, fill, line } to split themMultiple Instances:
GeometriesModule owns the sources, layers and images it adds, all suffixed per instance.
Every call therefore returns a new, independent instance, so you can put several on the
same map, each managing a different set of geometries with different styles.
Geometries Module for displaying polygon areas with custom styling on the map.
This module enables visualization of geographic areas (polygons) with customizable colors, borders, and labels. Ideal for displaying search results, administrative boundaries, service areas, or any polygon-based geographic data.
Remarks
Features:
Data Format:
Styling:
Example
Basic usage:
Example
Custom styling:
Example
Multiple geometries with different colors:
Example
Event handling:
See
Geometries Guide