SymbolLayer
Mapbox spec: symbol
import { SymbolLayer } from '@rnmapbox/maps';
SymbolLayer
SymbolLayer is a style layer that renders icon and text labels at points or along lines on the map.
props
id
string
required A string that uniquely identifies the source in the style to which it is added.
existing
boolean
The id refers to an existing layer in the style. Does not create a new layer.
sourceID
string
The source from which to obtain the data to style. If the source has not yet been added to the current style, the behavior is undefined. Inferred from parent source only if the layer is a direct child to it.
defaults to: Mapbox.StyleSource.DefaultSourceID
sourceLayerID
string
Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.
aboveLayerID
string
Inserts a layer above aboveLayerID.
belowLayerID
string
Inserts a layer below belowLayerID
layerIndex
number
Inserts a layer at a specified index
filter
FilterExpression
Filter only the features in the source layer that satisfy a condition that you define
minZoomLevel
number
The minimum zoom level at which the layer gets parsed and appears.
maxZoomLevel
number
The maximum zoom level at which the layer gets parsed and appears.
slot
'bottom' | 'middle' | 'top'
The slot this layer is assigned to. If specified, and a slot with that name exists, it will be placed at that position in the layer order.
v11 only
style
SymbolLayerStyleProps
required Customizable style attributes
children
JSX.Element | JSX.Element[]
@deprecated passed children used to create an image with id of symbol in style and also set the iconImageName property accordingly. This is now deprecated, use Image component instead.
styles
-
symbolPlacement
-
symbolSpacing
-
symbolAvoidEdges
-
symbolSortKey
-
symbolZOrder
-
symbolZElevate
-
symbolElevationReference
-
iconAllowOverlap
-
iconIgnorePlacement
-
iconOptional
-
iconRotationAlignment
-
iconSize
-
iconTextFit
-
iconTextFitPadding
-
iconImage
-
iconRotate
-
iconPadding
-
iconKeepUpright
-
iconOffset
-
iconAnchor
-
iconPitchAlignment
-
textPitchAlignment
-
textRotationAlignment
-
textField
-
textFont
-
textSize
-
textMaxWidth
-
textLineHeight
-
textLetterSpacing
-
textJustify
-
textRadialOffset
-
textVariableAnchor
-
textAnchor
-
textMaxAngle
-
textWritingMode
-
textRotate
-
textPadding
-
textKeepUpright
-
textTransform
-
textOffset
-
textAllowOverlap
-
textIgnorePlacement
-
textOptional
-
visibility
-
iconOpacity
-
iconOcclusionOpacity
-
iconEmissiveStrength
-
textEmissiveStrength
-
iconColor
-
iconHaloColor
-
iconHaloWidth
-
iconHaloBlur
-
iconTranslate
-
iconTranslateAnchor
-
iconImageCrossFade
-
textOpacity
-
textOcclusionOpacity
-
textColor
-
textHaloColor
-
textHaloWidth
-
textHaloBlur
-
textTranslate
-
textTranslateAnchor
-
iconColorSaturation
-
iconColorContrast
-
iconColorBrightnessMin
-
iconColorBrightnessMax
-
symbolZOffset
symbolPlacement
Name: symbolPlacement
Mapbox spec: symbol-placement
Description
Label placement relative to its geometry.
Type
enum
Default Value
point
Supported Values
point - The label is placed at the point where the geometry is located.
line - The label is placed along the line of the geometry. Can only be used on LineString and Polygon geometries.
line-center - The label is placed at the center of the line of the geometry. Can only be used on LineString and Polygon geometries. Note that a single feature in a vector tile may contain multiple line geometries.
Expression
Parameters: zoom
symbolSpacing
Name: symbolSpacing
Mapbox spec: symbol-spacing
Description
Distance between two symbol anchors.
Type
number
Default Value
250
Units
pixels
Minimum
1
Expression
Parameters: zoom
symbolAvoidEdges
Name: symbolAvoidEdges
Mapbox spec: symbol-avoid-edges
Description
If true, the symbols will not cross tile edges to avoid mutual collisions. Recommended in layers that don't have enough padding in the vector tile to prevent collisions, or if it is a point symbol layer placed after a line symbol layer. When using a client that supports global collision detection, like Mapbox GL JS version 0.42.0 or greater, enabling this property is not needed to prevent clipped labels at tile boundaries.
Type
boolean
Default Value
false
Expression
Parameters: zoom
symbolSortKey
Name: symbolSortKey
Mapbox spec: symbol-sort-key
Description
Sorts features in ascending order based on this value. Features with lower sort keys are drawn and placed first. When iconAllowOverlap or textAllowOverlap is false, features with a lower sort key will have priority during placement. When iconAllowOverlap or textAllowOverlap is set to true, features with a higher sort key will overlap over features with a lower sort key.
Type
number
Expression
Parameters: zoom, feature
symbolZOrder
Name: symbolZOrder
Mapbox spec: symbol-z-order
Description
Determines whether overlapping symbols in the same layer are rendered in the order that they appear in the data source or by their yPosition relative to the viewport. To control the order and prioritization of symbols otherwise, use symbolSortKey.
Type
enum
Default Value
auto
Supported Values
auto - Sorts symbols by symbol-sort-key if set. Otherwise, sorts symbols by their y-position relative to the viewport if icon-allow-overlap or text-allow-overlap is set to true or icon-ignore-placement or text-ignore-placement is false.
viewport-y - Sorts symbols by their y-position relative to the viewport if any of the following is set to true: icon-allow-overlap, text-allow-overlap, icon-ignore-placement, text-ignore-placement.
source - Sorts symbols by symbol-sort-key if set. Otherwise, no sorting is applied; symbols are rendered in the same order as the source data.
Expression
Parameters: zoom
symbolZElevate
Name: symbolZElevate
Mapbox spec: symbol-z-elevate
Description
Position symbol on buildings (both fill extrusions and models) rooftops. In order to have minimal impact on performance, this is supported only when fillExtrusionHeight is not zoomDependent and remains unchanged. For fading in buildings when zooming in, fillExtrusionVerticalScale should be used and symbols would raise with building rooftops. Symbols are sorted by elevation, except in cases when viewportY sorting or symbolSortKey are applied.
Type
boolean
Default Value
false
Expression
Parameters: zoom
symbolElevationReference
Name: symbolElevationReference
Mapbox spec: symbol-elevation-reference
Description
Selects the base of symbolElevation.
Type
enum
Default Value
ground
Supported Values
sea - Elevate symbols relative to the sea level.
ground - Elevate symbols relative to the ground's height below them.
hd-road-markup - Use this mode to enable elevated behavior for features that are rendered on top of 3D road polygons. The feature is currently being developed.
Expression
Parameters: zoom
iconAllowOverlap
Name: iconAllowOverlap
Mapbox spec: icon-allow-overlap
Description
If true, the icon will be visible even if it collides with other previously drawn symbols.
Type
boolean
Default Value
false
Requires
iconImage
Expression
Parameters: zoom
iconIgnorePlacement
Name: iconIgnorePlacement
Mapbox spec: icon-ignore-placement
Description
If true, other symbols can be visible even if they collide with the icon.
Type
boolean