LineLayer

Edit on Codepen

The LineLayer renders straight lines joining pairs of source and target coordinates.

JavaScript

import {Deck} from '@deck.gl/core';
import {LineLayer} from '@deck.gl/layers';

const layer = new LineLayer({
  id: 'LineLayer',
  data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-segments.json',
  
  getColor: d => [Math.sqrt(d.inbound + d.outbound), 140, 0],
  getSourcePosition: d => d.from.coordinates,
  getTargetPosition: d => d.to.coordinates,
  getWidth: 12,
  pickable: true
});

new Deck({
  initialViewState: {
    longitude: -122.4,
    latitude: 37.74,
    zoom: 11
  },
  controller: true,
  getTooltip: ({object}) => object && `${object.from.name} to ${object.to.name}`,
  layers: [layer]
});

TypeScript

import {Deck, PickingInfo} from '@deck.gl/core';
import {LineLayer} from '@deck.gl/layers';

type BartSegment = {
  inbound: number;
  outbound: number;
  from: {
    name: string;
    coordinate: [longitude: number, latitude: number];
  };
  to: {
    name: string;
    coordinate: [longitude: number, latitude: number];
  };
};

const layer = new LineLayer<BartSegment>({
  id: 'LineLayer',
  data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-segments.json',
  
  getColor: (d: BartSegment) => [Math.sqrt(d.inbound + d.outbound), 140, 0],
  getSourcePosition: (d: BartSegment) => d.from.coordinates,
  getTargetPosition: (d: BartSegment) => d.to.coordinates,
  getWidth: 12,
  pickable: true
});

new Deck({
  initialViewState: {
    longitude: -122.4,
    latitude: 37.74,
    zoom: 11
  },
  controller: true,
  getTooltip: ({object}: PickingInfo<BartSegment>) => object && `${object.from.name} to ${object.to.name}`,
  layers: [layer]
});

React

import React from 'react';
import {DeckGL} from '@deck.gl/react';
import {LineLayer} from '@deck.gl/layers';
import type {PickingInfo} from '@deck.gl/core';

type BartSegment = {
  inbound: number;
  outbound: number;
  from: {
    name: string;
    coordinate: [longitude: number, latitude: number];
  };
  to: {
    name: string;
    coordinate: [longitude: number, latitude: number];
  };
};

function App() {
  const layer = new LineLayer<BartSegment>({
    id: 'LineLayer',
    data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-segments.json',
    
    getColor: (d: BartSegment) => [Math.sqrt(d.inbound + d.outbound), 140, 0],
    getSourcePosition: (d: BartSegment) => d.from.coordinates,
    getTargetPosition: (d: BartSegment) => d.to.coordinates,
    getWidth: 12,
    pickable: true
  });

  return <DeckGL
    initialViewState={{
      longitude: -122.4,
      latitude: 37.74,
      zoom: 11
    }}
    controller
    getTooltip={({object}: PickingInfo<BartSegment>) => object && `${object.from.name} to ${object.to.name}`}
    layers={[layer]}
  />;
}

Installation

To install the dependencies from NPM:

npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/layers

import {LineLayer} from '@deck.gl/layers';
import type {LineLayerProps} from '@deck.gl/layers';

new LineLayer<DataT>(...props: LineLayerProps<DataT>[]);

To use pre-bundled scripts:

<script src="https://unpkg.com/deck.gl@^9.0.0/dist.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^9.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/layers@^9.0.0/dist.min.js"></script>

new deck.LineLayer({});

Properties

Inherits from all Base Layer properties.

Render Options

The width used to draw each line. Unit is pixels.

widthUnits (string, optional)

• Default: 'pixels'

The units of the line width, one of 'meters', 'common', and 'pixels'. See unit system.

widthScale (number, optional)

• Default: 1

The scaling multiplier for the width of each line. This prop is a very efficient way to change the width of all objects, comparing to recalculating the width for each object with getWidth.

widthMinPixels (number, optional)

• Default: 0

The minimum line width in pixels. This prop can be used to prevent the line from getting to thin when zoomed out.

widthMaxPixels (number, optional)

• Default: Number.MAX_SAFE_INTEGER

The maximum line width in pixels. This prop can be used to prevent the line from getting to thick when zoomed in.

Data Accessors

getSourcePosition (Accessor<Position>, optional)

• Default: object => object.sourcePosition

Method called to retrieve the source position of each object.

getTargetPosition (Accessor<Position>, optional)

• Default: object => object.targetPosition

Method called to retrieve the target position of each object.

getColor (Accessor<Color>, optional)

• Default: [0, 0, 0, 255]

The rgba color is in the format of [r, g, b, [a]]. Each channel is a number between 0-255 and a is 255 if not supplied.

• If an array is provided, it is used as the color for all objects.
• If a function is provided, it is called on each object to retrieve its color.

getWidth (Accessor<number>, optional)

• Default: 1

The line width of each object, in units specified by widthUnits (default pixels).

• If a number is provided, it is used as the line width for all objects.
• If a function is provided, it is called on each object to retrieve its line width.

Remarks

Using with GlobeView

When using this layer with GlobeView or MapLibre's globe projection, lines may be invisible when viewed from certain angles because GlobeView enables back-face culling by default. To ensure lines are visible from both sides, set:

new LineLayer({
  // ...other props
  parameters: {cullMode: 'none'}
});

Source

modules/layers/src/line-layer