Grade, tint, fog, edge blur and vignette

Five of the map effects plugin's effects are overlays laid over the map: grade and tint mute the base map so your data reads first, fog and edge blur give the rim of the view depth or focus, and vignette darkens or lightens the edges. Each is off by default. The playground below puts them on one panel with the other effects:

Muting the base map: grade and tint

grade sets the brightness, contrast and saturation of the whole frame, and tint lays a colour over it. Together they quiet the base map under your own data layers — the visual half of the data-viz styling preset, which quiets the map's content:

effects.updateConfig({ 'grade.saturation': 0.4, 'grade.brightness': 0.85, 'tint.opacity': 0.15 });

Fog or edge blur?

Both blur the rim of the view and both take a reach. They differ in what happens to the rim's colour:

Fog blurs and washes the rim towards the colour of the air: pale over a light style, dark over a dark one, following the map's light/dark theme. It reads as distance.
Edge blur blurs and leaves colour alone, so it reads as a lens. Use it when the rim's colour still carries data.

Use fog for depth, edge blur for focus; together they compound, which is rarely what you want.

effects.updateConfig({ 'fog.intensity': 0.6, 'fog.reach': 0.4 });

Vignette

vignette.intensity darkens the edges when negative and lightens them when positive; vignette.reach sets how far in it reaches:

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

setKnob(effects, effectKnobCatalogue, 'vignette.intensity', -0.5);

The knobs

Knob	Range	Default
`grade.brightness`, `grade.contrast`	0.5–1.5	1
`grade.saturation`	0–1.5	1
`tint.color`, `tint.opacity`	colour, 0–1	`#1f2937`, 0 (off)
`fog.intensity`, `fog.reach`	0–1	0 (off), 0.4
`edgeBlur.intensity` (CSS px), `edgeBlur.reach`	0–30, 0–1	0 (off), 0.5
`vignette.intensity` (negative darkens, positive lightens), `vignette.reach`	−1–1, 0–1	0 (off), 0.45

How they render

backdrop-filter layers for grade, fog and edge blur, a gradient for vignette and a flat layer for tint, stacked over the GPU chain's result. Being CSS, they need no redrawing as the map moves and no readable map canvas.