Skip to main content
SymbolLayer is a style layer that renders icon and text labels at points or along lines on the map. 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
SymbolLayerStyleProps
required
Customizable style attributes.
​
children
JSX.Element | JSX.Element[]
Deprecated: Use Image component instead.

​
Style Properties

​
style.visibility
'visible' | 'none'
default:"visible"
Controls layer visibility.
​
style.symbolPlacement
'point' | 'line' | 'line-center'
default:"point"
Label placement relative to its geometry.
​
style.iconImage
string
Name of image in sprite to use for drawing an icon.
​
style.iconSize
number
default:"1"
Scales the original size of the icon. Minimum: 0
​
style.iconRotate
number
default:"0"
Rotates the icon clockwise in degrees.
​
style.iconOpacity
number
default:"1"
The opacity at which the icon will be drawn. Range: 0-1.
​
style.iconColor
string
default:"#000000"
The color of the icon. This can only be used with SDF icons.
​
style.textField
string
Value to use for a text label.
​
style.textFont
string[]
Font stack to use for displaying text.
​
style.textSize
number
default:"16"
Font size in pixels. Minimum: 0
​
style.textOpacity
number
default:"1"
The opacity at which the text will be drawn. Range: 0-1.
​
style.textColor
string
default:"#000000"
The color with which the text will be drawn.
​
style.textHaloColor
string
default:"rgba(0, 0, 0, 0)"
The color of the text’s halo, which helps it stand out from backgrounds.
​
style.textHaloWidth
number
default:"0"
Distance of halo to the font outline in pixels. Minimum: 0

​
Example

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

const markers = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [-122.4, 37.8],
      },
      properties: { title: 'San Francisco' },
    },
  ],
};

function Map() {
  return (
    <MapView>
      <ShapeSource id="markers" shape={markers}>
        <SymbolLayer
          id="marker-labels"
          style={{
            textField: ['get', 'title'],
            textSize: 14,
            textColor: '#000',
            textHaloColor: '#fff',
            textHaloWidth: 2,
            textAnchor: 'top',
            textOffset: [0, 1],
          }}
        />
      </ShapeSource>
    </MapView>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us