Skip to main content

LineLayer

Mapbox spec: line

import { LineLayer } from '@rnmapbox/maps';

LineLayer

LineLayer is a style layer that renders one or more stroked polylines 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.

Show and hide 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​

LineLayerStyleProps

Customizable style attributes

styles​

lineCap​

Name: lineCap

Mapbox spec: line-cap

Description​

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, feature

lineJoin​

Name: lineJoin

Mapbox spec: line-join

Description​

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

Supported Style Functions​

camera

Expression​

Parameters: zoom, feature

lineMiterLimit​

Name: lineMiterLimit

Mapbox spec: line-miter-limit

Description​

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

Type​

number

Default Value​

2

Expression​

Parameters: zoom

lineRoundLimit​

Name: lineRoundLimit

Mapbox spec: line-round-limit

Description​

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

Type​

number

Default Value​

1.05

Expression​

Parameters: zoom

lineSortKey​

Name: lineSortKey

Mapbox spec: line-sort-key

Description​

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

lineZOffset​

Name: lineZOffset

Mapbox spec: line-z-offset

Description​

Vertical offset from ground, in meters. Not supported for globe projection at the moment.

Type​

number

Default Value​

0

Requires​

lineElevationReference

Expression​

Parameters: zoom, feature, line-progress

lineElevationReference​

Name: lineElevationReference

Mapbox spec: line-elevation-reference

Description​

Selects the base of lineElevation. Some modes might require precomputed elevation data in the tileset.

Type​

enum

Default Value​

none

Supported Values​

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.

Expression​

Parameters: ``

lineCrossSlope​

Name: lineCrossSlope

Mapbox spec: line-cross-slope

Description​

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: round is not supported with this property

Type​

number

Requires​

lineZOffset

Expression​

Parameters: ``

visibility​

Name: visibility

Mapbox spec: visibility

Description​

Whether this layer is displayed.

Type​

enum

Default Value​

visible

Supported Values​

visible - The layer is shown.
none - The layer is not shown.

Expression​

Parameters: ``

lineElevationGroundScale​

Name: lineElevationGroundScale

Mapbox spec: line-elevation-ground-scale

Description​

Controls how much the elevation of lines with lineElevationReference set to sea scales with terrain exaggeration. A value of 0 keeps the line at a fixed altitude above sea level. A value of 1 scales the elevation proportionally with terrain exaggeration.

Type​

number

Default Value​

0

Minimum​

0

Maximum​

1

Requires​

lineZOffset

Expression​

Parameters: zoom, feature, line-progress

lineElevationGroundScaleTransition​

Name: lineElevationGroundScaleTransition

Description​

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

Type​

{ duration, delay }

Units​

milliseconds

Default Value​

{duration: 300, delay: 0}

lineOpacity​

Name: lineOpacity

Mapbox spec: line-opacity

Description​

The opacity at which the line will be drawn.

Type​

number

Default Value​

1

Minimum​

0

Maximum​

1

Expression​

Parameters: zoom, feature, feature-state, measure-light

lineOpacityTransition​

Name: lineOpacityTransition

Description​

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

Type​

{ duration, delay }

Units​

milliseconds

Default Value​

{duration: 300, delay: 0}

lineColor​

Name: lineColor

Mapbox spec: line-color

Description​

The color with which the line will be drawn.

Type​

color

Default Value​

#000000

Disabled By​

linePattern

Expression​

Parameters: zoom, feature, feature-state, measure-light

lineColorTransition​

Name: lineColorTransition

Description​

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

Type​

{ duration, delay }

Units​

milliseconds

Default Value​

{duration: 300, delay: 0}

lineTranslate​

Name: lineTranslate

Mapbox spec: line-translate

Description​

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

Type​

array<number>

Default Value​

[0,0]

Units​

pixels

Expression​

Parameters: zoom

lineTranslateTransition​

Name: lineTranslateTransition

Description​

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

Type​

{ duration, delay }

Units​

milliseconds

Default Value​

{duration: 300, delay: 0}

lineTranslateAnchor​

Name: lineTranslateAnchor

Mapbox spec: line-translate-anchor

Description​

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​

Name: lineWidth

Mapbox spec: line-width

Description​

Stroke thickness.

Type​

number

Default Value​

1

Units​

pixels

Minimum​

0

Supported Style Functions​

camera

Expression​

Parameters: zoom, feature, feature-state, measure-light, line-progress

lineWidthTransition​

Name: lineWidthTransition

Description​

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

Type​

{ duration, delay }

Units​

milliseconds

Default Value​

{duration: 300, delay: 0}

lineGapWidth​

Name: lineGapWidth

Mapbox spec: line-gap-width

Description​

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, measure-light

lineGapWidthTransition​

Name: lineGapWidthTransition

Description​

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

Type​

{ duration, delay }

Units​

milliseconds

Default Value​

{duration: 300, delay: 0}

lineOffset​

Name: lineOffset

Mapbox spec: line-offset

Description​

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, measure-light

lineOffsetTransition​

Name: lineOffsetTransition

Description​

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

Type​

{ duration, delay }

Units​

milliseconds

Default Value​

{duration: 300, delay: 0}

lineBlur​

Name: lineBlur

Mapbox spec: line-blur

Description​

Blur applied to the line, in pixels.

Type​

number

Default Value​

0

Units​

pixels

Minimum​

0

Expression​

Parameters: zoom, feature, feature-state, measure-light

lineBlurTransition​

Name: lineBlurTransition

Description​

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

Type​

{ duration, delay }

Units​

milliseconds

Default Value​

{duration: 300, delay: 0}

lineDasharray​

Name: lineDasharray

Mapbox spec: line-dasharray

Description​

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​

array<number>

Units​

line widths

Minimum​

0

Disabled By​

linePattern

Expression​

Parameters: zoom, feature

linePattern​

Name: linePattern

Mapbox spec: line-pattern

Description​

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

linePatternCrossFade​

Name: linePatternCrossFade

Mapbox spec: line-pattern-cross-fade

Description​

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

Type​

number

Default Value​

0

Minimum​

0

Maximum​

1

Requires​

linePattern

Expression​

Parameters: zoom, measure-light

lineGradient​

Name: lineGradient

Mapbox spec: line-gradient

Description​

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.

Type​

color

Disabled By​

linePattern

Expression​

Parameters: line-progress

lineTrimOffset​

Name: lineTrimOffset

Mapbox spec: line-trim-offset

Description​

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

Type​

array<number>

Default Value​

[0,0]

Minimum​

0,0

Maximum​

1,1

lineTrimFadeRange​

Name: lineTrimFadeRange

Mapbox spec: line-trim-fade-range

Description​

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.

Type​

array<number>

Default Value​

[0,0]

Minimum​

0,0

Maximum​

1,1

Requires​

lineTrimOffset

Expression​

Parameters: zoom, measure-light

lineTrimColor​

Name: lineTrimColor

Mapbox spec: line-trim-color

Description​

The color to be used for rendering the trimmed line section that is defined by the lineTrimOffset property.

Type​

color

Default Value​

transparent

Requires​

lineTrimOffset

Expression​

Parameters: zoom, measure-light

lineTrimColorTransition​

Name: lineTrimColorTransition

Description​

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

Type​

{ duration, delay }

Units​

milliseconds

Default Value​

{duration: 300, delay: 0}

lineEmissiveStrength​

Name: lineEmissiveStrength

Mapbox spec: line-emissive-strength

Description​

Controls the intensity of light emitted on the source features.

Type​

number

Default Value​

0

Units​

intensity

Minimum​

0

Requires​

lights

Expression​

Parameters: zoom, measure-light, line-progress

lineEmissiveStrengthTransition​

Name: lineEmissiveStrengthTransition

Description​

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

Type​

{ duration, delay }

Units​

milliseconds

Default Value​

{duration: 300, delay: 0}

lineBorderWidth​

Name: lineBorderWidth

Mapbox spec: line-border-width

Description​

The width of the line border. A value of zero means no border.

Type​

number

Default Value​

0

Minimum​

0

Expression​

Parameters: zoom, feature, feature-state

lineBorderWidthTransition​

Name: lineBorderWidthTransition

Description​

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

Type​

{ duration, delay }

Units​

milliseconds

Default Value​

{duration: 300, delay: 0}

lineBorderColor​

Name: lineBorderColor

Mapbox spec: line-border-color

Description​

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.

Type​

color

Default Value​

rgba(0, 0, 0, 0)

Expression​

Parameters: zoom, feature, feature-state

lineBorderColorTransition​

Name: lineBorderColorTransition

Description​

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

Type​

{ duration, delay }

Units​

milliseconds

Default Value​

{duration: 300, delay: 0}

lineOcclusionOpacity​

Name: lineOcclusionOpacity

Mapbox spec: line-occlusion-opacity

Description​

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.

Type​

number

Default Value​

0

Minimum​

0

Maximum​

1

Expression​

Parameters: zoom

lineOcclusionOpacityTransition​

Name: lineOcclusionOpacityTransition

Description​

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

Type​

{ duration, delay }

Units​

milliseconds

Default Value​

{duration: 300, delay: 0}