Borrowed looks
Some parts that the data-owned modules and plugins draw should look like part of the style, so they take their look from it. They follow the knobs that restyle what they borrow. Those are the Styling Foundations module's sizes and colours, and the look knobs of the POIs and traffic incidents modules. They update live, whether you set the knob before or after creating the module, and across a setStyle.
What each module borrows
| Module | What it borrows | The knobs it follows | Your own look instead |
|---|---|---|---|
PlacesModule, base-map marker type |
the POI labels and icons | POIsModule label.color, label.haloColor, sizeFactor; Styling labels.sizeFactor, symbols.sizeFactor |
label, or a layers override |
PlacesModule, circle-icon marker type |
the icon size | POIsModule sizeFactor; Styling symbols.sizeFactor |
a layers override |
PlacesModule, pin-clustered marker type |
the micro markers | POIsModule sizeFactor; Styling symbols.sizeFactor |
a layers override |
RoutingModule |
the delay colour of a traffic section |
TrafficIncidentsModule colors.minor, colors.moderate, colors.major |
a line-color under layers.sections.traffic.routeIncidentBackgroundLine |
RoutingModule, summary bubbles |
the label halo and label colours, for the bubble and its text | Styling colors.labelHalo, colors.label, which a theme sets |
summaryBubbles.color, summaryBubbles.label.color |
RoutingModule, border crossings |
the same, as the selected summary bubble takes them | Styling colors.labelHalo, colors.label |
countryCrossings.color, countryCrossings.label.color |
TrafficIncidentDetailsModule |
the line colour of each incident magnitude | TrafficIncidentsModule colors.minor, colors.moderate, colors.major, colors.closed |
None. The module always draws the style's incident colours. |
Landmarks3D plugin |
the colour, opacity, wall gradient and zoom range of the 3D buildings. While a Buildings3D shows, the colour, opacity and minimum zoom come from its walls.color, opacity and minZoom instead |
Styling colors.artificial, and colors.land it derives from |
its color, opacity, verticalGradient, minZoom and maxZoom knobs |
Buildings3D, in the Landmarks 3D plugin |
the wall colour of each kind of building, as the style's own 3D buildings paint it | Styling colors.artificial, and colors.land it derives from |
its walls.color knob, and roofs.color for the roofs |
import { PlacesModule, POIsModule, poisKnobCatalogue, setKnob } from '@tomtom-org/maps-sdk/map';
const places = await PlacesModule.create(map, { markerType: 'base-map' });
const pois = await POIsModule.get(map);
setKnob(pois, poisKnobCatalogue, 'label.color', '#be185d'); // the places' labels turn with the map's POIs
Who wins
- Your own look wins over the knob.
- If you set none of its knobs, a route keeps the SDK's own delay colours, which match the incidents of the light styles, and its summary bubbles and border crossings the SDK's light or dark default.
- The
pinmarker type borrows nothing, and no knob reaches it. - The knob still writes only the style's layers. The module reads the new look and redraws its own (Who owns what).
Related guides and examples
Related guides
- Map styling — the size knobs these parts follow
- POIs and Traffic incidents — the look knobs these parts follow
- Map colours and the accent — the colour the modules' own parts default to
- Place styling — the marker types and what each draws
- Route sections — the
trafficsection and its delay colours
Related examples
- Borrowed looks — places, a route and fetched traffic incidents following the knobs that restyle the style's POIs and incidents