Grade, tint, fog, edge blur and vignette

Five of the map effects are overlays on the map. Grade and tint mute the base map so your data stands out. Fog and edge blur add depth or focus at the view’s rim, and vignette darkens or lightens the edges. Each is off by default. The playground below shows 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. They are the visual half of the data-viz styling preset, which quiets the map’s content.

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

Fog or edge blur?

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

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

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

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

Vignette

A negative vignette.intensity darkens the edges and a positive one lightens them. vignette.reach sets how far in it reaches.

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

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

The knobs

How they render

Grade, fog and edge blur are backdrop-filter layers, vignette is a gradient and tint is a flat layer. They stack over the GPU chain’s result and the bloom. Because they are CSS, they need no redrawing as the map moves, and they don’t need a readable map canvas.

Related guides and examples

Related guides

• Map effects plugin - Setup, how the effects render, and every knob
• Map styling - The data-viz preset these effects complete

Related examples

• Map effects playground - Every effect on one panel
• Mixed map effects - A contrast grade and a vignette over a watercolour pass