This is the documentation of version 0.63.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: set, get, reset and getConfig() carry them, and they work on any style, custom ones included.

Projection and sky

const styling = await StylingFoundationsModule.get(map);

setKnob(styling, stylingFoundationsKnobCatalogue, 'view.projection', 'globe');
setKnob(styling, stylingFoundationsKnobCatalogue, 'view.sky', true); // MapLibre's default sky is fully transparent: a globe with no atmosphere

The globe preset sets both in one call. 3D terrain is not a knob: it needs the elevation style part loaded first, which TerrainModule.get does for you.

Sky colours

The sky follows 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. view.skyColor and view.horizonColor override either, and a style that declares its own sky wins over both.

The colour behind the map

view.spaceColor is the colour behind the map — what a globe leaves visible around the planet. The map canvas is transparent there, so something has to fill it. Where your page already gives the map container a background, that colour is the knob's default and what a reset returns to, so the SDK never paints over your own styling. Where it does not, the knob follows the style theme as the sky does, and is re-applied after a setStyle, so switching light to dark carries the surround with it:

setKnob(styling, stylingFoundationsKnobCatalogue, 'view.spaceColor', '#05070d'); // or leave it to follow the style theme

What to expect

Three things worth knowing, measured rather than assumed:

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 adds a depth of field over a tilted view.

Related guides and examples

Related guides

Related examples