Mixed map effects

Paint the map in watercolour with your own shader, under the plugin's bloom, grade and vignette.

import { TomTomConfig } from '@tomtom-org/maps-sdk/core';
import { BaseMapModule, POIsModule, TomTomMap } from '@tomtom-org/maps-sdk/map';
import { MapEffects } from '@tomtom-org/maps-sdk-plugin-map-effects';
import './style.css';
import { API_KEY } from './config';
import { WATERCOLOR_FRAGMENT } from './watercolor';

// (Set your own API key when working in your own environment)
TomTomConfig.instance.put({ apiKey: API_KEY });

(async () => {
    const map = new TomTomMap({
        mapLibre: {
            container: 'sdk-map',
            center: [12.3358, 45.4371],
            zoom: 14.5,
            // Bloom and your own passes read the map canvas back; MapLibre keeps it readable only when asked.
            canvasContextAttributes: { preserveDrawingBuffer: true },
        },
    });

    // A painting carries no lettering: only land, water, parks and streets are left to paint.
    await BaseMapModule.get(map, {
        groups: {
            allPlaceLabels: { visible: false },
            natureLabels: { visible: false },
            roadLabels: { visible: false },
            roadShields: { visible: false },
            houseNumbers: { visible: false },
            ferries: { visible: false },
        },
    });
    await POIsModule.get(map, { visible: false });

    const effects = new MapEffects(map, {
        bloom: { intensity: 0.85, radius: 38, threshold: 0.52 },
        grade: { contrast: 1.15 },
        vignette: { intensity: -0.6, reach: 0.55 },
    });

    // Runs inside the effects chain, before every overlay effect: bloom, the grade and the vignette
    // work on the painted map rather than on the raw one.
    effects.addPass({
        id: 'watercolor',
        fragment: WATERCOLOR_FRAGMENT,
        uniforms: () => ({ uScale: map.mapLibreMap.getPixelRatio() }),
    });
})();

Open Sandbox

Your own shader repaints Venice in watercolour. The plugin then backlights it with bloom, sharpens it with a contrast grade and frames it with a vignette.

BaseMapModule.get hides every label group and the ferry lines in one groups config, and POIsModule.get hides the POIs, so the painting carries no lettering.
MapEffects.addPass runs your shader inside the plugin’s WebGL chain, ahead of every overlay, so bloom, grade and vignette work on the painting.
The shader declares only its uniforms and main, and a uniforms function, read on every draw, keeps the brush at the map’s pixel ratio.