Skip to main content

<LineLayer />

LineLayer is a style layer that renders one or more stroked polylines on the map.

Props​

PropTypeDefaultRequiredDescription
styleLineLayerStylenonefalseCustomizable style attributes
sourceIDFIX ME UNKNOWN TYPEMLRNModule.StyleSource.DefaultSourceIDfalseFIX ME NO DESCRIPTION

Styles​

lineCap​

The display of line endings.

Type
enum
Default Value
butt
Supported Values

  • 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.

Expression Parameters
zoom

lineJoin​

The display of lines when joining.

Type
enum
Default Value
miter
Supported Values

  • 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.

Supported Style Functions
camera
Expression Parameters
zoom, feature

lineMiterLimit​

Used to automatically convert miter joins to bevel joins for sharp angles.

Type
number
Default Value
2
Expression Parameters
zoom

lineRoundLimit​

Used to automatically convert round joins to miter joins for shallow angles.

Type
number
Default Value
1.05
Expression Parameters
zoom

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.

Type
number
Expression Parameters
zoom, feature

visibility​

Whether this layer is displayed.

Type
enum
Default Value
visible
Supported Values

  • visible: The layer is shown.

  • none: The layer is not shown.

lineOpacity​

The opacity at which the line will be drawn.

Type
number
Default Value
1
Minimum
0
Maximum
1
Expression Parameters
zoom, feature, feature-state

lineOpacityTransition​

The transition affecting any changes to this layer’s lineOpacity property.

Type
{ duration, delay }
Units
milliseconds
Default Value
{ duration: 300, delay: 0 }

lineColor​

The color with which the line will be drawn.

Type
color
Default Value
#000000
Disabled By
linePattern
Expression Parameters
zoom, feature, feature-state

lineColorTransition​

The transition affecting any changes to this layer’s lineColor property.

Type
{ duration, delay }
Units
milliseconds
Default Value
{ duration: 300, delay: 0 }

lineTranslate​

The geometry's offset. Values are [x, y] where negatives indicate left and up, respectively.

Type
number[]
Default Value
0,0
Units
pixels
Expression Parameters
zoom

lineTranslateTransition​

The transition affecting any changes to this layer’s lineTranslate property.

Type
{ duration, delay }
Units
milliseconds
Default Value
{ duration: 300, delay: 0 }

lineTranslateAnchor​

Controls the frame of reference for lineTranslate.

Type
enum
Default Value
map
Supported Values

  • map: The line is translated relative to the map.

  • viewport: The line is translated relative to the viewport.

Requires
lineTranslate
Expression Parameters
zoom

lineWidth​

Stroke thickness.

Type
number
Default Value
1
Units
pixels
Minimum
0
Supported Style Functions
camera
Expression Parameters
zoom, feature, feature-state

lineWidthTransition​

The transition affecting any changes to this layer’s lineWidth property.

Type
{ duration, delay }
Units
milliseconds
Default Value
{ duration: 300, delay: 0 }

lineGapWidth​

Draws a line casing outside of a line's actual path. Value indicates the width of the inner gap.

Type
number
Default Value
0
Units
pixels
Minimum
0
Expression Parameters
zoom, feature, feature-state

lineGapWidthTransition​

The transition affecting any changes to this layer’s lineGapWidth property.

Type
{ duration, delay }
Units
milliseconds
Default Value
{ duration: 300, delay: 0 }

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.

Type
number
Default Value
0
Units
pixels
Expression Parameters
zoom, feature, feature-state

lineOffsetTransition​

The transition affecting any changes to this layer’s lineOffset property.

Type
{ duration, delay }
Units
milliseconds
Default Value
{ duration: 300, delay: 0 }

lineBlur​

Blur applied to the line, in pixels.

Type
number
Default Value
0
Units
pixels
Minimum
0
Expression Parameters
zoom, feature, feature-state

lineBlurTransition​

The transition affecting any changes to this layer’s lineBlur property.

Type
{ duration, delay }
Units
milliseconds
Default Value
{ duration: 300, delay: 0 }

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.

Type
number[]
Units
line widths
Minimum
0
Disabled By
linePattern
Expression Parameters
zoom

lineDasharrayTransition​

The transition affecting any changes to this layer’s lineDasharray property.

Type
{ duration, delay }
Units
milliseconds
Default Value
{ duration: 300, delay: 0 }

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.

Type
resolvedImage
Expression Parameters
zoom, feature

linePatternTransition​

The transition affecting any changes to this layer’s linePattern property.

Type
{ duration, delay }
Units
milliseconds
Default Value
{ duration: 300, delay: 0 }

lineGradient​

Defines a gradient with which to color a line feature. Can only be used with GeoJSON sources that specify "lineMetrics": true.

Type
color
Disabled By
lineDasharray, linePattern
Expression Parameters
line-progress