Skip to main content
RasterLayer displays raster imagery from a raster tile source. 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
RasterLayerStyleProps
required
Customizable style attributes.

​
Style Properties

​
style.visibility
'visible' | 'none'
default:"visible"
Controls layer visibility.
​
style.rasterOpacity
number
default:"1"
The opacity at which the image will be drawn. Range: 0-1.
​
style.rasterHueRotate
number
default:"0"
Rotates hues around the color wheel in degrees.
​
style.rasterBrightnessMin
number
default:"0"
Increase or reduce the brightness of the image. Range: 0-1.
​
style.rasterBrightnessMax
number
default:"1"
Increase or reduce the brightness of the image. Range: 0-1.
​
style.rasterSaturation
number
default:"0"
Increase or reduce the saturation of the image. Range: -1 to 1.
​
style.rasterContrast
number
default:"0"
Increase or reduce the contrast of the image. Range: -1 to 1.
​
style.rasterResampling
'linear' | 'nearest'
default:"linear"
The resampling/interpolation method to use for overscaling.

​
Example

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

function Map() {
  return (
    <MapView>
      <RasterSource
        id="satellite"
        tileUrlTemplates={['https://tiles.example.com/{z}/{x}/{y}.png']}
        tileSize={256}
      >
        <RasterLayer
          id="satellite-layer"
          style={{
            rasterOpacity: 0.8,
            rasterSaturation: 0.2,
          }}
        />
      </RasterSource>
    </MapView>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us