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
- The
globepreset sets both in one call. - 3D terrain is not a knob: it needs the elevation style part loaded first, which
TerrainModuledoes for you.
Sky colours
view.skyColor and view.horizonColor colour the sky. Left unset, they take:
- The style's own
sky, where the style declares one; - otherwise the style's light/dark theme: a daylit blue with a white horizon over a light style, a night blue with a dim horizon over a dark one.
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.
- Your page's background wins: where the page already gives the map container a background, that colour is the knob's default and what a reset returns to.
- Otherwise it follows the style theme — white on a light style, the night sky's blue on a dark one — and is re-applied after a
setStyle, so a light-to-dark switch carries it.
setKnob(styling, stylingFoundationsKnobCatalogue, 'view.spaceColor', '#05070d');
What to expect
- The globe flattens to Mercator between zoom 11 and 12, by design.
- Fog over a tilted view starts at pitch 60, which is also MapLibre's default
maxPitch: raisemaxPitchon the map to see it.
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
- Map styling — the knobs, their catalogue, presets and settings
- Terrain — hillshade and the 3D surface a pitched globe shows
Related examples
- Globe and 3D terrain — the
viewknobs, then 3D terrain as you zoom in - 3D terrain playground — sky and relief that outlive a style switch