Skip to main content
SkyLayer is a spherical dome around the map that is always rendered behind all other layers. Mapbox Style Specification

​
Props

​
id
string
required
A unique identifier for the layer.
​
existing
boolean
If true, references an existing layer in the style.
​
sourceID
string
default:"Mapbox.StyleSource.DefaultSourceID"
The source from which to obtain data.
​
aboveLayerID
string
Inserts the layer above the specified layer ID.
​
belowLayerID
string
Inserts the layer below the specified layer ID.
​
layerIndex
number
Inserts the layer at a specified index.
​
filter
FilterExpression
Filters features based on a condition.
​
style
SkyLayerStyleProps
Customizable style attributes.

​
Style Properties

​
style.visibility
'visible' | 'none'
default:"visible"
Controls layer visibility.
​
style.skyType
'gradient' | 'atmosphere'
default:"atmosphere"
The type of the sky. gradient renders the sky with a gradient that can be configured. atmosphere renders with a simulated atmospheric scattering algorithm.
​
style.skyAtmosphereSun
number[]
Position of the sun center [azimuthal angle, polar angle] in degrees. The azimuthal angle indicates the position of the sun relative to 0° north. The polar angle indicates the height of the sun.
​
style.skyAtmosphereSunIntensity
number
default:"10"
Intensity of the sun as a light source in the atmosphere. Range: 0-100.
​
style.skyGradientCenter
number[]
default:"[0,0]"
Position of the gradient center [azimuthal angle, polar angle] in degrees.
​
style.skyGradientRadius
number
default:"90"
The angular distance (measured in degrees) from skyGradientCenter up to which the gradient extends. Range: 0-180.
​
style.skyGradient
string
Defines a radial color gradient with which to color the sky.
​
style.skyAtmosphereHaloColor
string
default:"white"
The color of the atmosphere region immediately above the horizon.
​
style.skyAtmosphereColor
string
default:"white"
The color of the atmosphere region above the horizon.
​
style.skyOpacity
number
default:"1"
The opacity of the entire sky layer. Range: 0-1.

​
Example

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

function Map() {
  return (
    <MapView>
      <SkyLayer
        id="sky"
        style={{
          skyType: 'atmosphere',
          skyAtmosphereSun: [0, 90],
          skyAtmosphereSunIntensity: 15,
        }}
      />
    </MapView>
  );
}

​
Gradient Sky Example

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

function Map() {
  return (
    <MapView>
      <SkyLayer
        id="sky"
        style={{
          skyType: 'gradient',
          skyGradientCenter: [0, 0],
          skyGradientRadius: 90,
          skyGradient: [
            'interpolate',
            ['linear'],
            ['sky-radial-progress'],
            0.8, 'rgba(135, 206, 235, 1.0)',
            1, 'rgba(0,0,0,0.1)',
          ],
        }}
      />
    </MapView>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us