Display a globe with an atmosphere

Replicates the MapLibre example Display a globe with an atmosphere.

Zoom in past 5 and the atmosphere fades out

The complete document

display-a-globe-with-an-atmosphere.yaml

# yaml-language-server: $schema=https://docs.maplibre-yaml.org/schema/latest/map.schema.json
# Gallery twin of https://maplibre.org/maplibre-gl-js/docs/examples/display-a-globe-with-an-atmosphere/
# The atmosphere is the sky's `atmosphere-blend`, faded out as you zoom in.
# Upstream also anchors the light to the map; a `light:` key is separate
# work, so the default light applies here.
type: map
id: display-a-globe-with-an-atmosphere
config:
  center: [137.9150899566626, 36.25956997955441]
  zoom: 0
  mapStyle: { version: 8, sources: {}, layers: [] }
sources:
  satellite:
    type: raster
    tiles:
      - "https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2020_3857/default/g/{z}/{y}/{x}.jpg"
    tileSize: 256
    attribution: "Sentinel-2 cloudless by EOX IT Services GmbH"
layers:
  - id: Satellite
    type: raster
    source: satellite
projection:
  type: globe
sky:
  atmosphere-blend: ["interpolate", ["linear"], ["zoom"], 0, 1, 5, 1, 7, 0]

What to notice

• The atmosphere is a property of sky:. atmosphere-blend takes a zoom expression, which here keeps the halo at full strength to zoom 5 and fades it out by zoom 7.
• Upstream paints its page black, so space around the globe is black. That backdrop belongs to the host page, not the map document, so here the globe sits on this page’s own background.
• Upstream also anchors the style’s light to the map. A document-level light: key is separate work, so the default light applies here; the globe and atmosphere are identical.
• The atmosphere draws only under globe projection, which needs maplibre-gl 5.0.0 or later.