TomTom LogoDocs
Products
Resources
Pricing
Sign in
Maps SDK for JavaScript
Introduction
Guides
Examples
API Reference

Globe and sky

VERSION 1.0.0-rc.1PUBLIC PREVIEW

The Styling Foundations module’s view knobs hold the projection and sky, the map-level MapLibre state that a style switch would otherwise reset. So a globe stays a globe across setStyle. Like any other knobs, they work with setKnob, getKnob, resetKnob and getConfig(), on every style.

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.visible', true); // without it, a globe has 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 does for you.

Sky colours

view.sky.color and view.sky.horizonColor colour the sky. If you don’t set them, they take:

  • The style’s own sky, if the style declares one.
  • Otherwise, the style’s light or dark theme: daylit blue with a white horizon on a light style, night blue with a dim horizon on a dark one.

The colour behind the map

view.space.color is the colour behind the map. It shows around the planet on a globe, where the map canvas is transparent.

  • If your page already gives the map container a background, that colour is the knob’s default, and a reset returns to it.
  • Otherwise, it follows the style theme: white on a light style, the night sky’s blue on a dark one. The SDK re-applies it after a setStyle, so it follows a light-to-dark switch.
setKnob(styling, stylingFoundationsKnobCatalogue, 'view.space.color', '#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. To see it, raise maxPitch on the map.

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 keeps one distance of a tilted view sharp and blurs the rest.

  • Map styling — the knobs, their catalogue, presets and settings
  • Terrain — hillshade and the 3D surface a pitched globe shows