The ArcLayer renders raised arcs joining pairs of source and target coordinates.
- JavaScript
- TypeScript
- React
import {Deck} from '@deck.gl/core';
import {ArcLayer} from '@deck.gl/layers';
const layer = new ArcLayer({
id: 'ArcLayer',
data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-segments.json',
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],
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]
});
import {Deck, PickingInfo} from '@deck.gl/core';
import {ArcLayer} 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 ArcLayer<BartSegment>({
id: 'ArcLayer',
data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-segments.json',
getSourcePosition: (d: BartSegment) => d.from.coordinates,
getTargetPosition: (d: BartSegment) => d.to.coordinates,
getSourceColor: (d: BartSegment) => [Math.sqrt(d.inbound), 140, 0],
getTargetColor: (d: BartSegment) => [Math.sqrt(d.outbound), 140, 0],
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]
});
import React from 'react';
import {DeckGL} from '@deck.gl/react';
import {ArcLayer} 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 ArcLayer<BartSegment>({
id: 'ArcLayer',
data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-segments.json',
getSourcePosition: (d: BartSegment) => d.from.coordinates,
getTargetPosition: (d: BartSegment) => d.to.coordinates,
getSourceColor: (d: BartSegment) => [Math.sqrt(d.inbound), 140, 0],
getTargetColor: (d: BartSegment) => [Math.sqrt(d.outbound), 140, 0],
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 {ArcLayer} from '@deck.gl/layers';
import type {ArcLayerProps} from '@deck.gl/layers';
new ArcLayer<DataT>(...props: ArcLayerProps<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.ArcLayer({});
Properties
Inherits from all Base Layer properties.
Render Options
greatCircle (boolean, optional)
- Default:
false
If true, create the arc along the shortest path on the earth surface. This option is only effective with data in the LNGLAT coordinate system.
numSegments (number, optional)
- Default:
50
The number of segments used to draw each arc. This prop can be used to make arcs smooth when using greatCircle with long paths.
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 too 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 too thick when zoomed in.
antialiasing (boolean, optional)
- Default:
false
When enabled, this prop computes edge coverage in the shader. When disabled, the layer relies on render-target multisampling. Shader-computed coverage can cause artifacts where arcs overlap. Only the edges along the width of the arc are smoothed — the two ends are not.
Other antialiasing techniques have different trade-offs; see Antialiasing and Multisampling in the luma.gl docs.
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.
getSourceColor (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 source color for all objects.
- If a function is provided, it is called on each object to retrieve its source color.
getTargetColor (Accessor<Color>, 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.
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.
getHeight (Accessor<number>, optional)
- Default:
1
Multiplier of layer height. 0 will make the layer flat.
getTilt (Accessor<number>, optional)
- Default:
0
Use to tilt the arc to the side if you have multiple arcs with the same source and target positions.
In degrees, can be positive or negative (-90 to +90).
Remarks
Using with GlobeView
When using this layer with GlobeView or MapLibre's globe projection, arcs may be invisible when viewed from certain angles because GlobeView enables back-face culling by default. To ensure arcs are visible from both sides, set:
new ArcLayer({
// ...other props
parameters: {cullMode: 'none'}
});
Source
modules/layers/src/arc-layer