This is the documentation of version 0.64.0. Go to the latest version, 1.0.0-rc.5.

Globe and sky

The Styling Foundations module's view knobs own the map-level MapLibre state that a style switch would otherwise reset — projection and sky — so a globe stays a globe across setStyle. They are knobs like any other: setKnob, getKnob, resetKnob and getConfig() carry them, and they work on any style, custom ones included.

Projection and sky

import { setKnob, StylingFoundationsModule, stylingFoundationsKnobCatalogue } from '@tomtom-org/maps-sdk/map';

const styling = await StylingFoundationsModule.get(map);
setKnob(styling, stylingFoundationsKnobCatalogue, 'view.projection', 'globe');
setKnob(styling, stylingFoundationsKnobCatalogue, 'view.sky', true); // without it, a globe has no atmosphere

Sky colours

view.skyColor and view.horizonColor colour the sky. Left unset, they take:

The colour behind the map

view.spaceColor is the colour behind the map — what a globe leaves visible around the planet, where the map canvas is transparent.

setKnob(styling, stylingFoundationsKnobCatalogue, 'view.spaceColor', '#05070d');

What to expect

The demo above zooms a globe into 3D terrain; the 3D terrain playground keeps a tilted camera, its sky and its relief across a style switch. The map effects plugin's depth of field holds one distance of a tilted view sharp and defocuses the rest.

Related guides and examples

Related guides

Related examples