Atmosphere

Atmosphere configures the atmospheric effects around the globe, including fog, sky color, horizon blend, and stars. It creates a realistic visualization of the Earth’s atmosphere when using globe projection.

Import

import { Atmosphere } from '@rnmapbox/maps';

Basic Usage

import { MapView, Atmosphere, Camera } from '@rnmapbox/maps';

function MyMap() {
  return (
    <MapView
      style={{ flex: 1 }}
      projection="globe"
    >
      <Atmosphere
        style={{
          color: '#add8e6',
          highColor: '#245cdf',
          horizonBlend: 0.1,
          starIntensity: 0.5,
        }}
      />
      <Camera
        centerCoordinate={[0, 0]}
        zoomLevel={1}
      />
    </MapView>
  );
}

Props

style

AtmosphereLayerStyleProps

required

Customizable style attributes for the atmosphere.

Style Properties

The style prop accepts an AtmosphereLayerStyleProps object with the following properties:

range

style.range

[number, number]

default:"[0.5, 10]"

The start and end distance range in which fog fades from fully transparent to fully opaque. The distance to the point at the center of the map is defined as zero, so negative values are closer to the camera, and positive values are farther away.Range: -20 to 20

<Atmosphere
  style={{
    range: [0.5, 10],
  }}
/>

rangeTransition

style.rangeTransition

{ duration: number, delay: number }

default:"{ duration: 300, delay: 0 }"

The transition affecting any changes to the range property.

<Atmosphere
  style={{
    range: [0.5, 10],
    rangeTransition: { duration: 1000, delay: 0 },
  }}
/>

color

style.color

string

default:"#ffffff"

The color of the atmosphere region immediately below the horizon and within the range, and above the horizon and within horizonBlend. Using opacity is recommended only for smoothly transitioning fog on/off, as anything less than 100% opacity results in more tiles being loaded and drawn.

<Atmosphere
  style={{
    color: '#add8e6',
  }}
/>

colorTransition

style.colorTransition

{ duration: number, delay: number }

default:"{ duration: 300, delay: 0 }"

The transition affecting any changes to the color property.

<Atmosphere
  style={{
    color: '#add8e6',
    colorTransition: { duration: 1000, delay: 0 },
  }}
/>

highColor

style.highColor

string

default:"#245cdf"

The color of the atmosphere region above the horizon. highColor extends further above the horizon than the color property, and its spread can be controlled with horizonBlend. The opacity can be set to 0 to remove the high atmosphere color contribution.

<Atmosphere
  style={{
    highColor: '#245cdf',
  }}
/>

highColorTransition

style.highColorTransition

{ duration: number, delay: number }

default:"{ duration: 300, delay: 0 }"

The transition affecting any changes to the highColor property.

<Atmosphere
  style={{
    highColor: '#245cdf',
    highColorTransition: { duration: 1000, delay: 0 },
  }}
/>

spaceColor

style.spaceColor

string

default:"interpolate,linear,zoom,4,#010b19,7,#367ab9"

The color of the region above the horizon and after the end of the horizonBlend contribution. This represents outer space. The opacity can be set to 0 to have a transparent background.

<Atmosphere
  style={{
    spaceColor: '#000000',
  }}
/>

spaceColorTransition

style.spaceColorTransition

{ duration: number, delay: number }

default:"{ duration: 300, delay: 0 }"

The transition affecting any changes to the spaceColor property.

<Atmosphere
  style={{
    spaceColor: '#000000',
    spaceColorTransition: { duration: 1000, delay: 0 },
  }}
/>

horizonBlend

style.horizonBlend

number

default:"interpolate,linear,zoom,4,0.2,7,0.1"

Horizon blend applies a smooth fade from the color of the atmosphere to the color of space. A value of zero leaves a sharp transition from atmosphere to space. Increasing the value blends the color of atmosphere into increasingly high angles of the sky.Range: 0 to 1

<Atmosphere
  style={{
    horizonBlend: 0.1,
  }}
/>

horizonBlendTransition

style.horizonBlendTransition

{ duration: number, delay: number }

default:"{ duration: 300, delay: 0 }"

The transition affecting any changes to the horizonBlend property.

<Atmosphere
  style={{
    horizonBlend: 0.1,
    horizonBlendTransition: { duration: 1000, delay: 0 },
  }}
/>

starIntensity

style.starIntensity

number

default:"interpolate,linear,zoom,5,0.35,6,0"

A value controlling the star intensity where 0 will show no stars and 1 will show stars at their maximum intensity.Range: 0 to 1

<Atmosphere
  style={{
    starIntensity: 0.5,
  }}
/>

starIntensityTransition

style.starIntensityTransition

{ duration: number, delay: number }

default:"{ duration: 300, delay: 0 }"

The transition affecting any changes to the starIntensity property.

<Atmosphere
  style={{
    starIntensity: 0.5,
    starIntensityTransition: { duration: 1000, delay: 0 },
  }}
/>

verticalRange

style.verticalRange

[number, number]

default:"[0, 0]"

An array of two number values, specifying the vertical range, measured in meters, over which the fog should gradually fade out. When both parameters are set to zero, the fog will be rendered without any vertical constraints.Minimum: 0

<Atmosphere
  style={{
    verticalRange: [0, 10000],
  }}
/>

verticalRangeTransition

style.verticalRangeTransition

{ duration: number, delay: number }

default:"{ duration: 300, delay: 0 }"

The transition affecting any changes to the verticalRange property.

<Atmosphere
  style={{
    verticalRange: [0, 10000],
    verticalRangeTransition: { duration: 1000, delay: 0 },
  }}
/>

Examples

Basic Atmosphere
Night Sky
Sunrise
With Fog
Time-Based Atmosphere

import { MapView, Atmosphere, Camera } from '@rnmapbox/maps';

function BasicAtmosphere() {
  return (
    <MapView
      style={{ flex: 1 }}
      projection="globe"
    >
      <Atmosphere
        style={{
          color: '#add8e6',
          highColor: '#245cdf',
          horizonBlend: 0.1,
        }}
      />
      <Camera
        centerCoordinate={[0, 0]}
        zoomLevel={1}
      />
    </MapView>
  );
}

import { MapView, Atmosphere, Camera } from '@rnmapbox/maps';

function NightSky() {
  return (
    <MapView
      style={{ flex: 1 }}
      projection="globe"
      styleURL="mapbox://styles/mapbox/dark-v11"
    >
      <Atmosphere
        style={{
          color: '#1a1a2e',
          highColor: '#16213e',
          spaceColor: '#0f0e17',
          horizonBlend: 0.2,
          starIntensity: 0.8,
        }}
      />
      <Camera
        centerCoordinate={[0, 0]}
        zoomLevel={1}
      />
    </MapView>
  );
}

import { MapView, Atmosphere, Camera } from '@rnmapbox/maps';

function Sunrise() {
  return (
    <MapView
      style={{ flex: 1 }}
      projection="globe"
    >
      <Atmosphere
        style={{
          color: '#ffa07a',
          highColor: '#ff6347',
          spaceColor: '#191970',
          horizonBlend: 0.3,
          starIntensity: 0.3,
        }}
      />
      <Camera
        centerCoordinate={[0, 0]}
        zoomLevel={1}
      />
    </MapView>
  );
}

import { MapView, Atmosphere, Camera } from '@rnmapbox/maps';

function WithFog() {
  return (
    <MapView
      style={{ flex: 1 }}
      projection="globe"
    >
      <Atmosphere
        style={{
          range: [0.5, 8],
          color: 'rgba(220, 220, 220, 0.5)',
          highColor: '#87ceeb',
          horizonBlend: 0.2,
        }}
      />
      <Camera
        centerCoordinate={[0, 20]}
        zoomLevel={2}
        pitch={60}
      />
    </MapView>
  );
}

import { useState, useEffect } from 'react';
import { MapView, Atmosphere, Camera } from '@rnmapbox/maps';

function TimeBasedAtmosphere() {
  const [hour, setHour] = useState(new Date().getHours());

  useEffect(() => {
    const interval = setInterval(() => {
      setHour(new Date().getHours());
    }, 60000); // Update every minute
    return () => clearInterval(interval);
  }, []);

  const isDaytime = hour >= 6 && hour < 18;
  const isEvening = hour >= 18 && hour < 21;

  const getAtmosphereStyle = () => {
    if (isDaytime) {
      return {
        color: '#add8e6',
        highColor: '#245cdf',
        spaceColor: '#87ceeb',
        horizonBlend: 0.1,
        starIntensity: 0,
      };
    } else if (isEvening) {
      return {
        color: '#ff6347',
        highColor: '#ff4500',
        spaceColor: '#191970',
        horizonBlend: 0.3,
        starIntensity: 0.5,
      };
    } else {
      return {
        color: '#1a1a2e',
        highColor: '#16213e',
        spaceColor: '#0f0e17',
        horizonBlend: 0.2,
        starIntensity: 0.9,
      };
    }
  };

  return (
    <MapView
      style={{ flex: 1 }}
      projection="globe"
    >
      <Atmosphere
        style={{
          ...getAtmosphereStyle(),
          colorTransition: { duration: 2000, delay: 0 },
          highColorTransition: { duration: 2000, delay: 0 },
          spaceColorTransition: { duration: 2000, delay: 0 },
          starIntensityTransition: { duration: 2000, delay: 0 },
        }}
      />
      <Camera
        centerCoordinate={[0, 0]}
        zoomLevel={1}
      />
    </MapView>
  );
}

Best Practices

Use with Globe Projection: Atmosphere effects are most visible and impactful when using projection="globe" on the MapView.
Performance Considerations: Using opacity values less than 100% on the color property results in more tiles being loaded. Use opacity sparingly.
Smooth Transitions: Use transition properties to create smooth animations when changing atmospheric conditions.
Coordinate with Style: Match your atmosphere colors with your map style for a cohesive visual experience.

MapView - The map container (use with projection="globe")
Light - Configure lighting for 3D features
StyleImport - Configure the Mapbox Standard style
SkyLayer - Alternative sky configuration

Core Components

Sources

Layers

Annotations

Location

Assets

Terrain

Offline & Utilities

Modules

Atmosphere

Atmosphere

Import

Basic Usage

Props

style

Style Properties

range

rangeTransition

color

colorTransition

highColor

highColorTransition

spaceColor

spaceColorTransition

horizonBlend

horizonBlendTransition

starIntensity

starIntensityTransition

verticalRange

verticalRangeTransition

Examples

Best Practices

Additional Resources

Build docs developers (and LLMs) love

Core Components

Sources

Layers

Annotations

Location

Assets

Terrain

Offline & Utilities

Modules

​Atmosphere

​Import

​Basic Usage

​Props

​style

​Style Properties

​range

​rangeTransition

​color

​colorTransition

​highColor

​highColorTransition

​spaceColor

​spaceColorTransition

​horizonBlend

​horizonBlendTransition

​starIntensity

​starIntensityTransition

​verticalRange

​verticalRangeTransition

​Examples

​Best Practices

​Related Components

​Additional Resources

Build docs developers (and LLMs) love

Atmosphere

Import

Basic Usage

Props

style

Style Properties

range

rangeTransition

color

colorTransition

highColor

highColorTransition

spaceColor

spaceColorTransition

horizonBlend

horizonBlendTransition

starIntensity

starIntensityTransition

verticalRange

verticalRangeTransition

Examples

Best Practices

Related Components

Additional Resources