Skip to main content
LineLayer is a style layer that renders one or more stroked polylines on the map. Mapbox Style Specification

​
Props

​
id
string
required
A unique identifier for the layer.
​
existing
boolean
If true, references an existing layer in the style.
​
sourceID
string
default:"Mapbox.StyleSource.DefaultSourceID"
The source from which to obtain data.
​
sourceLayerID
string
Identifier of the layer within the source.
​
aboveLayerID
string
Inserts the layer above the specified layer ID.
​
belowLayerID
string
Inserts the layer below the specified layer ID.
​
slot
'bottom' | 'middle' | 'top'
The slot this layer is assigned to. v11 only
​
minZoomLevel
number
Minimum zoom level for layer visibility.
​
maxZoomLevel
number
Maximum zoom level for layer visibility.
​
filter
FilterExpression
Filters features based on a condition.
​
style
LineLayerStyleProps
Customizable style attributes.

​
Style Properties

​
style.visibility
'visible' | 'none'
default:"visible"
Controls layer visibility.
​
style.lineCap
'butt' | 'round' | 'square'
default:"butt"
The display of line endings.
​
style.lineJoin
'bevel' | 'round' | 'miter' | 'none'
default:"miter"
The display of lines when joining.
​
style.lineOpacity
number
default:"1"
The opacity at which the line will be drawn. Range: 0-1.
​
style.lineColor
string
default:"#000000"
The color with which the line will be drawn. Disabled by: linePattern
​
style.lineWidth
number
default:"1"
Stroke thickness in pixels. Minimum: 0
​
style.lineGapWidth
number
default:"0"
Draws a line casing outside of a line’s actual path. Value indicates the width of the inner gap in pixels.
​
style.lineOffset
number
default:"0"
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.
​
style.lineBlur
number
default:"0"
Blur applied to the line, in pixels. Minimum: 0
​
style.lineDasharray
number[]
Specifies the lengths of the alternating dashes and gaps that form the dash pattern. Disabled by: linePattern
​
style.linePattern
string
Name of image in sprite to use for drawing image lines.

​
Example

import { MapView, ShapeSource, LineLayer } from '@rnmapbox/maps';

const route = {
  type: 'Feature',
  geometry: {
    type: 'LineString',
    coordinates: [
      [-122.4, 37.8],
      [-122.5, 37.7],
      [-122.6, 37.8],
    ],
  },
};

function Map() {
  return (
    <MapView>
      <ShapeSource id="route" shape={route}>
        <LineLayer
          id="route-line"
          style={{
            lineColor: '#ed6498',
            lineWidth: 5,
            lineCap: 'round',
            lineJoin: 'round',
            lineOpacity: 0.9,
          }}
        />
      </ShapeSource>
    </MapView>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us