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 sets how bright a pixel must be to glow, and bloom.radius how far the glow spreads:

import { MapEffects } from '@tomtom-org/maps-sdk-plugin-map-effects';

const effects = new MapEffects(map);
effects.updateConfig({ 'bloom.intensity': 0.5, 'bloom.threshold': 0.6 });

The map needs preserveDrawingBuffer: true, since bloom reads the map canvas back.

Scoping bloom by colour

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

import { setKnob } from '@tomtom-org/maps-sdk/map';
import { effectKnobCatalogue } from '@tomtom-org/maps-sdk-plugin-map-effects';

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; an entry that is neither a name nor a CSS colour throws RangeError.
• 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: each name is read with getStyleColor, so a recolour or a style switch moves the scope with nothing to keep in sync. No module needs to exist for a name to resolve.
  • 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): bloom then 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 canvas at a quarter of the pixels, redrawn every frame and blended in screen mode, because a glow needs the original and its blur, which a backdrop-filter cannot give. It draws from the GPU chain's output, so it glows over the depth of field's defocus, and a pass of your own that shifts hues may need a wider bloom.onlyTolerance for a scope to find its colours. Keep bloom.radius moderate on large canvases.

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