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 en 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
lineJoin
lineMiterLimit
lineRoundLimit
lineSortKey
visibility
lineOpacity
lineColor
lineTranslate
lineTranslateAnchor
lineWidth
lineGapWidth
lineOffset
lineBlur
lineDasharray
linePattern
lineGradient
lineTrimOffset

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.

Supported Style Functions

camera

Expression

Parameters: zoom, feature

lineMiterLimit

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

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>

Parameters: line-progress

lineTrimOffset

Name: lineTrimOffset

Mapbox spec: line-trim-offset

Description

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

Type

array<number>

Default Value

[0,0]

Minimum

0,0

Maximum

1,1