arc-layer.md

ArcLayer

The Arc Layer renders raised arcs joining pairs of source and target points, specified as latitude/longitude coordinates.

import DeckGL, {ArcLayer} from 'deck.gl';

const App = ({data, viewport}) => {

  /**
   * Data format:
   * [
   *   {
   *     inbound: 72633,
   *     outbound: 74735,
   *     from: {
   *       name: '19th St. Oakland (19TH)',
   *       coordinates: [-122.269029, 37.80787]
   *     },
   *     to: {
   *       name: '12th St. Oakland City Center (12TH)',
   *       coordinates: [-122.271604, 37.803664]
   *   },
   *   ...
   * ]
   */
  const layer = new ArcLayer({
    id: 'arc-layer',
    data,
    pickable: true,
    getStrokeWidth: 12,
    getSourcePosition: d => d.from.coordinates,
    getTargetPosition: d => d.to.coordinates,
    getSourceColor: d => [Math.sqrt(d.inbound), 140, 0],
    getTargetColor: d => [Math.sqrt(d.outbound), 140, 0],
    onHover: ({object}) => setTooltip(`${object.from.name} to ${object.to.name}`)
  });

  return (<DeckGL {...viewport} layers={[layer]} />);
};

Properties

Inherits from all Base Layer properties.

Render Options

fp64 (Boolean, optional)

• Default: false

Whether the layer should be rendered in high-precision 64-bit mode. Note that since deck.gl v6.1, the default 32-bit projection uses a hybrid mode that matches 64-bit precision with significantly better performance.

Data Accessors

getSourcePosition (Function, optional)

• Default: object => object.sourcePosition

Method called to retrieve the source position of each object.

getTargetPosition (Function, optional)

• Default: object => object.targetPosition

Method called to retrieve the target position of each object.

getSourceColor (Function|Array, optional)

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

The rgba color at the source, in r, g, b, [a]. Each component is in the 0-255 range.

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

getTargetColor (Function|Array, optional)

• Default [0, 0, 0, 255]

The rgba color at the target, in r, g, b, [a]. Each component is in the 0-255 range.

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

getStrokeWidth (Function|Number, optional)

• Default: 1

The stroke width of each object, in pixels.

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

Source

/arc-layer