Lifecycle events of this module. The module owns no map features, so there are no user
interaction events; config-change fires with the full settings after every knob change.
The advanced tier: raw MapLibre paint, layout and filter edits over a query of style layers, re-applied across style switches. Version-coupled by nature — see LayerSelection for the terms — so prefer a knob or setMapColors wherever one covers the intent.
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.
Unless a module documents otherwise, 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, opacity: 0.8 });
// Reset to default configuration
myModule.applyConfig(undefined);
Applies a preset: a named bundle of knob settings the SDK ships for a common intent
(data-viz, night-driving, minimal, globe). See stylingPresetCatalogue for
what each one sets.
The preset to apply.
merge: true lays the preset over the current settings instead of replacing
them (the default), so knobs the preset does not mention keep their values.
The style as currently rendered — the loaded style with every knob applied — as a MapLibre style specification, to save, diff, serve yourself, or load back as a custom style.
The value a knob currently has: the override if one is set, otherwise the style's own default.
A base-map group toggle reads its layers instead, so it also reflects BaseMapModule.setVisible.
The knob to read.
The current value, or undefined when the style defines it as a data-driven
expression that no single value stands for.
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.
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
Restores the style's own values for one knob, or for all of them.
Optionalid: The knob to reset; omit to reset every knob (same as resetConfig).
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, opacity: 0.5 });
// Later, reset to defaults
myModule.resetConfig();
Sets one knob. The value is validated against the knob's kind and range before anything is touched, and applied to every layer the knob reaches.
The knob to set; see stylingKnobCatalogue for the catalogue.
A number for factor/number knobs (within range), a boolean for toggle
knobs, a CSS colour string for color knobs.
Recolours the whole base map with up to ten semantic colours in one call — the style themes'
Foundations palette, each listed with what it reaches under MapColorName — and sets
accent, the default colour of routes, geometries and places (TomTomMap.mapColors).
Partial objects are fine; colours not given stay as they are, except on the mono styles, which
derive the other nine from land as their theme does: there the theme's own formulas re-derive
them from the land given.
The colours to set, as CSS colour strings.
Each colour re-derives every shade the style built from it — a trunk variant, an outline, a
tunnel — at the style's own HSL offset, so those relationships survive the recolour. The colours
are also the colors.* knobs, so get, reset and settings persistence apply.
Those offsets come off the loaded style, which makes a palette a recolour and not an
inversion: dark land over standardLight pushes the derived shades to the ends of their
range, so switch to standardDark first.
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: 'imperial', theme: { mainColor: '#0a3653' } });
routing.updateConfig({ theme: { mainColor: '#c2185b' } }); // displayUnits stays imperial
applyConfig to apply a whole configuration
ProtectedwaitStaticgetRetrieves the styling module of the given map, creating it on first use.
The TomTomMap instance to style.
Optionalsettings: StylingSettings
Optional knob values to apply right away, e.g. restored from storage.
A promise that resolves once the map style is loaded and the settings are applied.
Semantic styling of the base map, traffic and POIs — the tier between hiding a layer group and hand-editing MapLibre layers.
Every adjustable thing is a knob with a stable id, a kind, a range and a default read from the loaded style. The ids form the StylingKnobId union, and stylingKnobCatalogue lists each one's kind, range and description as data, with no map needed to read it.
Remarks
Which styles a knob works on is
appliesToin the catalogue.any-styleknobs (sizes, widths) wrap whatever the style already does —text-size: Ebecomes["*", 1.3, E]— so they work on a custom style too.tomtom-stylesknobs (toggles, colours) reach their layers through the TomTom styles this SDK version is verified against; on any other style setting one warns once and does nothing, rather than failing silently.Style changes. Settings are re-applied after every
setStylethat carries state over, on top of whatever the other modules restored, and dropped on a clean switch (resetState: true).Interplay with other modules. The base-map group toggles (
basemap.*,buildings.*,roads.shields) write through BaseMapModule andget()reads their layers live, so it agrees withisVisible. The later call wins: a BaseMapModule.setVisible that covers a group clears its toggle from these settings, and a style change re-applies a toggle still set.The toggles within a module's layers (
pois.microMarkers,roads.arrows,roads.restricted,roads.underConstruction,roads.exitNumbers) only hide:falsehides those layers,truenever shows them while POIsModule or BaseMapModule hides them, and unsetting one leaves the layers as their module has them.pois.zoomShiftrewrites the POI layer filters, which POIsModule.filterCategories also narrows: the two compose, so either can be set at any time and neither drops the other.Example
See
Map Styling Guide