Mapbox spec: [line](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#line) ```tsx import { LineLayer } from '@rnmapbox/maps'; LineLayer ``` LineLayer is a style layer that renders one or more stroked polylines on the map. ## props ### id ```tsx string ``` _required_ A string that uniquely identifies the source in the style to which it is added. ### existing ```tsx boolean ``` The id refers to an existing layer in the style. Does not create a new layer. [Show and hide layer](../examples/Map/ShowAndHideLayer) ### sourceID ```tsx 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 ```tsx string ``` Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style. ### aboveLayerID ```tsx string ``` Inserts a layer above aboveLayerID. ### belowLayerID ```tsx string ``` Inserts a layer below belowLayerID ### layerIndex ```tsx number ``` Inserts a layer at a specified index ### filter ```tsx FilterExpression ``` Filter only the features in the source layer that satisfy a condition that you define ### minZoomLevel ```tsx number ``` The minimum zoom level at which the layer gets parsed and appears. ### maxZoomLevel ```tsx number ``` The maximum zoom level at which the layer gets parsed and appears. ### slot ```tsx '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 ```tsx LineLayerStyleProps ``` Customizable style attributes ## styles * lineCap
* lineJoin
* lineMiterLimit
* lineRoundLimit
* lineSortKey
* lineZOffset
* lineElevationReference
* lineCrossSlope
* visibility
* lineElevationGroundScale
* lineOpacity
* lineColor
* lineTranslate
* lineTranslateAnchor
* lineWidth
* lineGapWidth
* lineOffset
* lineBlur
* lineDasharray
* linePattern
* linePatternCrossFade
* lineGradient
* lineTrimOffset
* lineTrimFadeRange
* lineTrimColor
* lineEmissiveStrength
* lineBorderWidth
* lineBorderColor
* lineOcclusionOpacity
___ ### lineCap Name: `lineCap` Mapbox spec: [line-cap](https://docs.mapbox.com/style-spec/reference/layers/#layout-line-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](https://docs.mapbox.com/style-spec/reference/layers/#layout-line-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](https://docs.mapbox.com/style-spec/reference/layers/#layout-line-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](https://docs.mapbox.com/style-spec/reference/layers/#layout-line-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](https://docs.mapbox.com/style-spec/reference/layers/#layout-line-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](https://docs.mapbox.com/style-spec/reference/layers/#layout-line-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](https://docs.mapbox.com/style-spec/reference/layers/#layout-line-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](https://docs.mapbox.com/style-spec/reference/layers/#layout-line-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](https://docs.mapbox.com/style-spec/reference/layers/#layout-line-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](https://docs.mapbox.com/style-spec/reference/layers/#layout-line-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](https://docs.mapbox.com/style-spec/reference/layers/#paint-line-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](https://docs.mapbox.com/style-spec/reference/layers/#paint-line-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](https://docs.mapbox.com/style-spec/reference/layers/#paint-line-line-translate) #### Description The geometry's offset. Values are [x, y] where negatives indicate left and up, respectively. #### Type `array` #### 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](https://docs.mapbox.com/style-spec/reference/layers/#paint-line-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](https://docs.mapbox.com/style-spec/reference/layers/#paint-line-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](https://docs.mapbox.com/style-spec/reference/layers/#paint-line-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](https://docs.mapbox.com/style-spec/reference/layers/#paint-line-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](https://docs.mapbox.com/style-spec/reference/layers/#paint-line-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](https://docs.mapbox.com/style-spec/reference/layers/#paint-line-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` #### Units `line widths` #### Minimum `0` #### Disabled By `linePattern` #### Expression Parameters: `zoom, feature` ___ ### linePattern Name: `linePattern` Mapbox spec: [line-pattern](https://docs.mapbox.com/style-spec/reference/layers/#paint-line-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](https://docs.mapbox.com/style-spec/reference/layers/#paint-line-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](https://docs.mapbox.com/style-spec/reference/layers/#paint-line-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](https://docs.mapbox.com/style-spec/reference/layers/#paint-line-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` #### Default Value `[0,0]` #### Minimum `0,0` #### Maximum `1,1` ___ ### lineTrimFadeRange Name: `lineTrimFadeRange` Mapbox spec: [line-trim-fade-range](https://docs.mapbox.com/style-spec/reference/layers/#paint-line-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` #### 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](https://docs.mapbox.com/style-spec/reference/layers/#paint-line-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](https://docs.mapbox.com/style-spec/reference/layers/#paint-line-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](https://docs.mapbox.com/style-spec/reference/layers/#paint-line-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](https://docs.mapbox.com/style-spec/reference/layers/#paint-line-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](https://docs.mapbox.com/style-spec/reference/layers/#paint-line-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}`