Bloom

Bloom is the map effects plugin's emphasis for dark and driving styles: lit roads, traffic tubes and route lines glow. The playground below puts every bloom knob on one panel, the colour scope included:

Turning it on

Bloom is off until bloom.intensity is above 0. bloom.threshold decides how bright a pixel must be to glow, and bloom.radius how far the glow spreads:

const effects = new MapEffects(map);

effects.updateConfig({ 'bloom.intensity': 0.5, 'bloom.threshold': 0.6 });

Bloom reads the map canvas back, so the map needs canvasContextAttributes: { preserveDrawingBuffer: true } (Usage).

Scoping bloom by colour

bloom.only lists the colours bloom may light. Entries mix freely, and the default [] lights the whole frame.

effects.updateConfig({ 'bloom.intensity': 0.9, 'bloom.only': ['traffic'] }); // a group of style colours
setKnob(effects, effectKnobCatalogue, 'bloom.only', ['traffic.incidents.colors.major', 'traffic.incidents.colors.closed']); // single knobs

const routeColor = '#1a73e8';                                                 // the color your RoutingModule draws routes in
setKnob(effects, effectKnobCatalogue, 'bloom.only', ['traffic', routeColor]); // plus a CSS colour of your own

• The names come from the SDK's styleColorKnobIds, so a colour knob any module gains is scopable with no change here. effectKnobCatalogue lists them in the knob's options, and set throws RangeError on an entry that is neither a name nor a CSS colour.
• A scope keys on colour, not on layers: the effects see the rendered map as one flat image, so bloom keeps the pixels wearing a listed colour.
  • It follows the style: the scope reads each colour with getStyleColor, so a recolour on whichever module holds the knob, or a style switch, moves it, with nothing in your app to keep in sync. No module needs to exist for a name to resolve to the style's own colour.
  • Anything else wearing those colours glows too, since a colour key cannot tell it from traffic.
  • Only what the style paints differently separates: the TomTom styles give flow and incidents one palette (traffic.flow.colors.stationary is traffic.incidents.colors.major), so traffic.flow also keys those incidents.
  • A colour no literal stands for scopes to nothing (a custom style, a data-driven expression), and bloom lights the whole frame, with one console warning.
• Brightness is not compared: an antialiased edge and its lit centre are one colour at two levels, and bloom.threshold judges level.
  • bloom.onlyTolerance covers the blending an edge picks up: raise it if edges drop out, lower it if a neighbouring severity lights up.
  • Its 0.15 default keeps a moderate jam, 0.217 from a major one, out of a traffic.incidents.colors.major scope.
• A scope lets you lower the cut: with the city keyed out by colour, bloom.threshold can sit under the darkest thing worth lighting.
  • monoDark paints a major jam hsl(0, 100%, 28%): 64/255 of it survives a 0.45 cut, 110/255 a 0.25 one.
  • The Traffic flow with bloom example cuts at 0.25, with a grade deepening the city the traffic glows against.

How it renders

Bloom is neither a GPU pass nor a CSS overlay: a small canvas (a quarter of the pixels) redrawn from the finished artwork every frame and blended in screen mode, because a glow needs the original and its blur, which a backdrop-filter cannot give. It reads the output of the GPU chain rather than the raw map, so a highlight the depth of field defocused glows as the wide soft disc a photograph gives it. A pass of your own that shifts hues runs before bloom's colour key, so a bloom.only scope may need a wider bloom.onlyTolerance to find its colours. The overview shows the whole order.

Related guides and examples

Related guides

• Map effects plugin - Setup, how the effects render, and every knob
• Map styling - The map-wide colour ids bloom.only names, and getStyleColor
• Traffic flow and Traffic incidents - The traffic a scoped bloom lights, and its colours

Related examples

• Bloom playground - Every bloom knob, the colour scope included
• Traffic flow with bloom - Live traffic glowing over a dark map