Editing style layers
For what the Styling Foundations module's knobs do not cover, styling.layers edits the loaded style's layers directly. It is the advanced, version-coupled tier: prefer a knob or setMapColors wherever one covers the intent.
The advanced tier: styling.layers
styling.layers.query(...) selects style layers and returns a LayerSelection to edit their paint, layout, filter or visibility:
styling.layers.query({ group: 'roadLabels' }).setPaint({ 'text-color': '#93c5fd' });
styling.layers.query({ metadataGroups: ['water'], layerTypes: ['fill'] }).setPaint({ 'fill-opacity': 0.6 });
styling.layers.query({ idIncludes: ['railway'] }).setVisible(false);
styling.layers.query({ group: 'trafficFlow', layerTypes: ['line'] }).setPaint({ 'line-opacity': 0.6 });
styling.layers.query({ group: 'roadLabels' }).reset(); // undo the edits made on those layers
styling.layers.query({ group: 'railways' }).layerIds; // what matched, in draw order
| Query field | Selects by |
|---|---|
group |
A named group: a base-map group, the same names BaseMapModule takes, or another style-owned module's layers — pois, trafficFlow, trafficIncidents, hillshade (styleModuleLayerGroupNames) |
metadataGroups |
The style's own metadata.group values, for groups the SDK does not name |
layerTypes |
MapLibre layer types: line, fill, symbol, … |
sourceLayers |
Vector-tile source layers: roads, places, poi, … |
idIncludes, idExcludes |
Fragments the layer id must, or must not, contain (case-insensitive) |
Every field given must hold, so the others narrow a group. One query covers every style layer, whichever module shows or hides it.
Only the style's own layers
styling.layers and the knobs reach the layers the loaded style declares, nothing added on top of it. The layers a data-owned module adds take their overrides through that module's own layers configuration, merged over its defaults and kept across style switches:
| Module | Its layers entries |
|---|---|
| Places | main, micro, selected, the cluster layers, and its connections' and entry points' own |
| Routing | the route lines, waypoints, sections and their labels, by group (mainLines, sections, …) |
| Geometries, Reachable ranges | fill, line, label, lineLabel |
| Traffic incident details | the incident lines, from highlightHalo to innerPattern, and the three markers |
| Traffic area analytics | heatmap, each grid's fill, outline, extrusion and highlight, and the region |
The layers you add through map.mapLibreMap are yours to style.
The two reach together: below, one switch fades the traffic flow, POIs and road labels through styling.layers groups, and brings a city's incidents and boundary forward through their modules' layers configs.
What an edit keeps
- Re-applied after a style switch that carries state, for as long as the layers still exist, landing on top of the knobs. A clean switch (
resetState: true) drops every edit. setFilterreplaces the filter the style gave a layer; the filters other modules add, such as POI categories, still narrow it.- Not part of
getConfig(): edits are edits to this style, not portable settings.
How durable is it?
Layer ids, property expressions and even which layers exist belong to the style version the map loads — the way Map Maker frames raw layer editing. A query that matches nothing warns once and does nothing.
map.mapLibreMap remains available below all of this (which to use when), though a setPaintProperty on a style layer there is not re-applied after a style switch.
Related guides and examples
Related guides
- Map styling — the knobs, and which of them depend on the TomTom styles
- About MapLibre — the raw MapLibre map underneath
Related examples
- Map styling playground — every knob on a panel built from the catalogue
- Traffic incident focus —
styling.layersgroups and modulelayersconfigs applied and reset by one switch