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.

Source

modules/layers/src/line-layer