Skip to main content
HillshadeLayer renders client-side hillshading based on DEM data. 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.
​
sourceLayerID
string
Identifier of the layer within the source.
​
aboveLayerID
string
Inserts the layer above the specified layer ID.
​
belowLayerID
string
Inserts the layer below the specified layer ID.
​
slot
'bottom' | 'middle' | 'top'
The slot this layer is assigned to. v11 only
​
minZoomLevel
number
Minimum zoom level for layer visibility.
​
maxZoomLevel
number
Maximum zoom level for layer visibility.
​
filter
FilterExpression
Filters features based on a condition.
​
style
HillshadeLayerStyleProps
required
Customizable style attributes.

​
Style Properties

​
style.visibility
'visible' | 'none'
default:"visible"
Controls layer visibility.
​
style.hillshadeIlluminationDirection
number
default:"335"
The direction of the light source used to generate the hillshading. Range: 0-359 degrees.
​
style.hillshadeIlluminationAnchor
'map' | 'viewport'
default:"viewport"
Direction of the light source. When map is set, light direction is determined by hillshadeIlluminationDirection.
​
style.hillshadeExaggeration
number
default:"0.5"
Intensity of the hillshade. Range: 0-1.
​
style.hillshadeShadowColor
string
default:"#000000"
The shading color of areas that face away from the light source.
​
style.hillshadeHighlightColor
string
default:"#FFFFFF"
The shading color of areas that face towards the light source.
​
style.hillshadeAccentColor
string
default:"#000000"
The shading color used to accentuate rugged terrain like sharp cliffs and gorges.

​
Example

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

function Map() {
  return (
    <MapView>
      <RasterDemSource
        id="terrain"
        url="mapbox://mapbox.terrain-rgb"
        tileSize={256}
      >
        <HillshadeLayer
          id="hillshade"
          style={{
            hillshadeExaggeration: 0.6,
            hillshadeIlluminationDirection: 335,
            hillshadeShadowColor: '#473B24',
            hillshadeHighlightColor: '#FFFFFF',
          }}
        />
      </RasterDemSource>
    </MapView>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us