Skip to main content
BackgroundLayer renders a solid color or pattern across the entire map. It is typically used as the base layer. Mapbox Style Specification

​
Props

​
id
string
required
A unique identifier for the layer.
​
existing
boolean
If true, references an existing layer in the style instead of creating a new one.
​
sourceID
string
default:"Mapbox.StyleSource.DefaultSourceID"
The source from which to obtain the data to style. Inferred from parent source only if the layer is a direct child to it.
​
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 in the layer stack.
​
minZoomLevel
number
The minimum zoom level at which the layer is visible.
​
maxZoomLevel
number
The maximum zoom level at which the layer is visible.
​
filter
FilterExpression
Filters features from the source layer based on a condition.
​
style
BackgroundLayerStyleProps
Customizable style attributes for the background layer.

​
Style Properties

​
style.visibility
'visible' | 'none'
default:"visible"
Controls whether the layer is displayed.
​
style.backgroundColor
string
default:"#000000"
The color with which the background will be drawn.Disabled by: backgroundPattern
​
style.backgroundPattern
string
Name of image in sprite to use for drawing an image background. For seamless patterns, image width and height must be a factor of two (2, 4, 8, …, 512).
​
style.backgroundOpacity
number
default:"1"
The opacity at which the background will be drawn. Range: 0-1.

​
Example

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

function Map() {
  return (
    <MapView>
      <BackgroundLayer
        id="background"
        style={{
          backgroundColor: '#f0f0f0',
          backgroundOpacity: 1,
        }}
      />
    </MapView>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us