The ArcLayer
renders raised arcs joining pairs of source and target coordinates.
import DeckGL from '@deck.gl/react';
import {ArcLayer} from '@deck.gl/layers';
function App({data, viewState}) {
/**
* 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,
getWidth: 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],
});
return <DeckGL viewState={viewState}
layers={[layer]}
getTooltip={({object}) => object && `${object.from.name} to ${object.to.name}`} />;
}
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';
new ArcLayer({});
To use pre-bundled scripts:
<script src="https://unpkg.com/deck.gl@^8.0.0/dist.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^8.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/layers@^8.0.0/dist.min.js"></script>
new deck.ArcLayer({});
Inherits from all Base Layer properties.
greatCircle
(Boolean, optional)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.
widthUnits
(String, optional)'pixels'
The units of the line width, one of 'meters'
, 'common'
, and 'pixels'
. See unit system.
widthScale
(Number, optional) 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) 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) 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.
getSourcePosition
(Function, optional) object => object.sourcePosition
Method called to retrieve the source position of each object.
getTargetPosition
(Function, optional) object => object.targetPosition
Method called to retrieve the target position of each object.
getSourceColor
(Function|Array, optional) [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.
getTargetColor
(Function|Array, optional) [0, 0, 0, 255]
The rgba color at the target, in r, g, b, [a]
. Each component is in the 0-255 range.
getWidth
(Function|Number, optional) 1
The line width of each object, in units specified by widthUnits
(default pixels).
getHeight
(Function|Number, optional) 1
Multiplier of layer height. 0
will make the layer flat.
getTilt
(Function|Number, optional) 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
).