LineLayer is a style layer that renders one or more stroked polylines on the map.
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| id | string |
none |
true |
A string that uniquely identifies the source in the style to which it is added. |
| sourceID | string |
MapboxGL.StyleSource.DefaultSourceID |
false |
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. |
| sourceLayerID | string |
none |
false |
Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style. |
| aboveLayerID | string |
none |
false |
Inserts a layer above aboveLayerID. |
| belowLayerID | string |
none |
false |
Inserts a layer below belowLayerID |
| layerIndex | number |
none |
false |
Inserts a layer at a specified index |
| filter | FilterExpression |
none |
false |
Filter only the features in the source layer that satisfy a condition that you define |
| minZoomLevel | number |
none |
false |
The minimum zoom level at which the layer gets parsed and appears. |
| maxZoomLevel | number |
none |
false |
The maximum zoom level at which the layer gets parsed and appears. |
| style | LineLayerStyleProps |
none |
false |
Customizable style attributes |
- lineCap
- lineJoin
- lineMiterLimit
- lineRoundLimit
- lineSortKey
- visibility
- lineOpacity
- lineColor
- lineTranslate
- lineTranslateAnchor
- lineWidth
- lineGapWidth
- lineOffset
- lineBlur
- lineDasharray
- linePattern
- lineGradient
- lineTrimOffset
Name: lineCap
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
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.
camera
Parameters: zoom, feature
Name: lineMiterLimit
Used to automatically convert miter joins to bevel joins for sharp angles.
number
2
Parameters: zoom
Name: lineRoundLimit
Used to automatically convert round joins to miter joins for shallow angles.
number
1.05
Parameters: zoom
Name: lineSortKey
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: visibility
Whether this layer is displayed.
enum
visible
visible - The layer is shown.
none - The layer is not shown.
Name: lineOpacity
The opacity at which the line will be drawn.
number
1
0
1
Parameters: zoom, feature, feature-state
lineOpacityTransition
The transition affecting any changes to this layer’s lineOpacity property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: lineColor
The color with which the line will be drawn.
color
#000000
linePattern
Parameters: zoom, feature, feature-state
lineColorTransition
The transition affecting any changes to this layer’s lineColor property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: lineTranslate
The geometry's offset. Values are [x, y] where negatives indicate left and up, respectively.
array<number>
[0,0]
pixels
Parameters: zoom
lineTranslateTransition
The transition affecting any changes to this layer’s lineTranslate property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: lineTranslateAnchor
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
Stroke thickness.
number
1
pixels
0
camera
Parameters: zoom, feature, feature-state
lineWidthTransition
The transition affecting any changes to this layer’s lineWidth property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: lineGapWidth
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
lineGapWidthTransition
The transition affecting any changes to this layer’s lineGapWidth property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: lineOffset
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
lineOffsetTransition
The transition affecting any changes to this layer’s lineOffset property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: lineBlur
Blur applied to the line, in pixels.
number
0
pixels
0
Parameters: zoom, feature, feature-state
lineBlurTransition
The transition affecting any changes to this layer’s lineBlur property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: lineDasharray
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
lineDasharrayTransition
The transition affecting any changes to this layer’s lineDasharray property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: linePattern
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
linePatternTransition
The transition affecting any changes to this layer’s linePattern property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: lineGradient
Defines a gradient with which to color a line feature. Can only be used with GeoJSON sources that specify "lineMetrics": true.
color
linePattern
Parameters: line-progress
Name: lineTrimOffset
The line part between [trimStart, trimEnd] will be marked as transparent to make 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