Mapbox spec: line
import { LineLayer } from '@rnmapbox/maps';
LineLayerLineLayer is a style layer that renders one or more stroked polylines on the map.
stringrequired A string that uniquely identifies the source in the style to which it is added.
booleanThe id refers to an existing layer in the style. Does not create a new layer.
stringThe 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
stringIdentifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.
stringInserts a layer above aboveLayerID.
stringInserts a layer below belowLayerID
numberInserts a layer at a specified index
FilterExpressionFilter only the features in the source layer that satisfy a condition that you define
numberThe minimum zoom level at which the layer gets parsed and appears.
numberThe maximum zoom level at which the layer gets parsed and appears.
'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
LineLayerStylePropsCustomizable style attributes
- lineCap
- lineJoin
- lineMiterLimit
- lineRoundLimit
- lineSortKey
- lineZOffset
- lineElevationReference
- lineCrossSlope
- visibility
- lineOpacity
- lineColor
- lineTranslate
- lineTranslateAnchor
- lineWidth
- lineGapWidth
- lineOffset
- lineBlur
- lineDasharray
- linePattern
- linePatternCrossFade
- lineGradient
- lineTrimOffset
- lineTrimFadeRange
- lineTrimColor
- lineEmissiveStrength
- lineBorderWidth
- lineBorderColor
- lineOcclusionOpacity
Name: lineCap
Mapbox spec: line-cap
The display of line endings.
enum
butt
butt - A cap with a squared-off end which is drawn to the exact endpoint of the line.
round - A cap with a rounded end which is drawn beyond the endpoint of the line at a radius of one-half of the line's width and centered on the endpoint of the line.
square - A cap with a squared-off end which is drawn beyond the endpoint of the line at a distance of one-half of the line's width.
Parameters: zoom, feature
Name: lineJoin
Mapbox spec: line-join
The display of lines when joining.
enum
miter
bevel - A join with a squared-off end which is drawn beyond the endpoint of the line at a distance of one-half of the line's width.
round - A join with a rounded end which is drawn beyond the endpoint of the line at a radius of one-half of the line's width and centered on the endpoint of the line.
miter - A join with a sharp, angled corner which is drawn with the outer sides beyond the endpoint of the path until they meet.
none - Line segments are not joined together, each one creates a separate line. Useful in combination with line-pattern. Line-cap property is not respected. Can't be used with data-driven styling.
camera
Parameters: zoom, feature
Name: lineMiterLimit
Mapbox spec: line-miter-limit
Used to automatically convert miter joins to bevel joins for sharp angles.
number
2
Parameters: zoom
Name: lineRoundLimit
Mapbox spec: line-round-limit
Used to automatically convert round joins to miter joins for shallow angles.
number
1.05
Parameters: zoom
Name: lineSortKey
Mapbox spec: line-sort-key
Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key.
number
Parameters: zoom, feature
Name: lineZOffset
Mapbox spec: line-z-offset
Vertical offset from ground, in meters. Not supported for globe projection at the moment.
number
0
lineElevationReference
Parameters: zoom, feature, line-progress
Name: lineElevationReference
Mapbox spec: line-elevation-reference
Selects the base of lineElevation. Some modes might require precomputed elevation data in the tileset.
enum
none
none - Elevated rendering is disabled.
sea - Elevated rendering is enabled. Use this mode to elevate lines relative to the sea level.
ground - Elevated rendering is enabled. Use this mode to elevate lines relative to the ground's height below them.
hd-road-markup - Elevated rendering is enabled. Use this mode to describe additive and stackable features that should exist only on top of road polygons.
Parameters: ``
Name: lineCrossSlope
Mapbox spec: line-cross-slope
Defines the slope of an elevated line. A value of 0 creates a horizontal line. A value of 1 creates a vertical line. Other values are currently not supported. If undefined, the line follows the terrain slope. This is an experimental property with some known issues:
- Vertical lines don't support line caps
lineJoin: roundis not supported with this property
number
lineZOffset
Parameters: ``
Name: visibility
Mapbox spec: visibility
Whether this layer is displayed.
enum
visible
visible - The layer is shown.
none - The layer is not shown.
Parameters: ``
Name: lineOpacity
Mapbox spec: line-opacity
The opacity at which the line will be drawn.
number
1
0
1
Parameters: zoom, feature, feature-state, measure-light
Name: lineOpacityTransition
The transition affecting any changes to this layer’s lineOpacity property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: lineColor
Mapbox spec: line-color
The color with which the line will be drawn.
color
#000000
linePattern
Parameters: zoom, feature, feature-state, measure-light
Name: lineColorTransition
The transition affecting any changes to this layer’s lineColor property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: lineTranslate
Mapbox spec: line-translate
The geometry's offset. Values are [x, y] where negatives indicate left and up, respectively.
array<number>
[0,0]
pixels
Parameters: zoom
Name: lineTranslateTransition
The transition affecting any changes to this layer’s lineTranslate property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: lineTranslateAnchor
Mapbox spec: line-translate-anchor
Controls the frame of reference for lineTranslate.
enum
map
map - The line is translated relative to the map.
viewport - The line is translated relative to the viewport.
lineTranslate
Parameters: zoom
Name: lineWidth
Mapbox spec: line-width
Stroke thickness.
number
1
pixels
0
camera
Parameters: zoom, feature, feature-state, measure-light, line-progress
Name: lineWidthTransition
The transition affecting any changes to this layer’s lineWidth property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: lineGapWidth
Mapbox spec: line-gap-width
Draws a line casing outside of a line's actual path. Value indicates the width of the inner gap.
number
0
pixels
0
Parameters: zoom, feature, feature-state, measure-light
Name: lineGapWidthTransition
The transition affecting any changes to this layer’s lineGapWidth property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: lineOffset
Mapbox spec: line-offset
The line's offset. For linear features, a positive value offsets the line to the right, relative to the direction of the line, and a negative value to the left. For polygon features, a positive value results in an inset, and a negative value results in an outset.
number
0
pixels
Parameters: zoom, feature, feature-state, measure-light
Name: lineOffsetTransition
The transition affecting any changes to this layer’s lineOffset property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: lineBlur
Mapbox spec: line-blur
Blur applied to the line, in pixels.
number
0
pixels
0
Parameters: zoom, feature, feature-state, measure-light
Name: lineBlurTransition
The transition affecting any changes to this layer’s lineBlur property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: lineDasharray
Mapbox spec: line-dasharray
Specifies the lengths of the alternating dashes and gaps that form the dash pattern. The lengths are later scaled by the line width. To convert a dash length to pixels, multiply the length by the current line width. Note that GeoJSON sources with lineMetrics: true specified won't render dashed lines to the expected scale. Also note that zoomDependent expressions will be evaluated only at integer zoom levels.
array<number>
line widths
0
linePattern
Parameters: zoom, feature
Name: linePattern
Mapbox spec: line-pattern
Name of image in sprite to use for drawing image lines. For seamless patterns, image width must be a factor of two (2, 4, 8, ..., 512). Note that zoomDependent expressions will be evaluated only at integer zoom levels.
resolvedImage
Parameters: zoom, feature
Name: linePatternCrossFade
Mapbox spec: line-pattern-cross-fade
Controls the transition progress between the image variants of linePattern. Zero means the first variant is used, one is the second, and in between they are blended together. Both images should be the same size and have the same type (either raster or vector).
number
0
0
1
linePattern
Parameters: zoom, measure-light
Name: lineGradient
Mapbox spec: line-gradient
A gradient used to color a line feature at various distances along its length. Defined using a step or interpolate expression which outputs a color for each corresponding lineProgress input value. lineProgress is a percentage of the line feature's total length as measured on the webmercator projected coordinate plane (a number between 0 and 1). Can only be used with GeoJSON sources that specify "lineMetrics": true.
color
linePattern
Parameters: line-progress
Name: lineTrimOffset
Mapbox spec: line-trim-offset
The line part between [trimStart, trimEnd] will be painted using lineTrimColor, which is transparent by default to produce a route vanishing effect. The line trimOff offset is based on the whole line range [0.0, 1.0].
array<number>
[0,0]
0,0
1,1
Name: lineTrimFadeRange
Mapbox spec: line-trim-fade-range
The fade range for the trimStart and trimEnd points is defined by the lineTrimOffset property. The first element of the array represents the fade range from the trimStart point toward the end of the line, while the second element defines the fade range from the trimEnd point toward the beginning of the line. The fade result is achieved by interpolating between lineTrimColor and the color specified by the lineColor or the lineGradient property.
array<number>
[0,0]
0,0
1,1
lineTrimOffset
Parameters: zoom, measure-light
Name: lineTrimColor
Mapbox spec: line-trim-color
The color to be used for rendering the trimmed line section that is defined by the lineTrimOffset property.
color
transparent
lineTrimOffset
Parameters: zoom, measure-light
Name: lineTrimColorTransition
The transition affecting any changes to this layer’s lineTrimColor property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: lineEmissiveStrength
Mapbox spec: line-emissive-strength
Controls the intensity of light emitted on the source features.
number
0
intensity
0
lights
Parameters: zoom, measure-light
Name: lineEmissiveStrengthTransition
The transition affecting any changes to this layer’s lineEmissiveStrength property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: lineBorderWidth
Mapbox spec: line-border-width
The width of the line border. A value of zero means no border.
number
0
0
Parameters: zoom, feature, feature-state
Name: lineBorderWidthTransition
The transition affecting any changes to this layer’s lineBorderWidth property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: lineBorderColor
Mapbox spec: line-border-color
The color of the line border. If lineBorderWidth is greater than zero and the alpha value of this color is 0 (default), the color for the border will be selected automatically based on the line color.
color
rgba(0, 0, 0, 0)
Parameters: zoom, feature, feature-state
Name: lineBorderColorTransition
The transition affecting any changes to this layer’s lineBorderColor property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: lineOcclusionOpacity
Mapbox spec: line-occlusion-opacity
Opacity multiplier (multiplies lineOpacity value) of the line part that is occluded by 3D objects. Value 0 hides occluded part, value 1 means the same opacity as nonOccluded part. The property is not supported when lineOpacity has dataDriven styling.
number
0
0
1
Parameters: zoom
Name: lineOcclusionOpacityTransition
The transition affecting any changes to this layer’s lineOcclusionOpacity property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}