The Scatterplot Layer takes in paired latitude and longitude coordinated points and renders them as circles with a certain radius.
import DeckGL from '@deck.gl/react';
import {ScatterplotLayer} from '@deck.gl/layers';
function App({data, viewState}) {
/**
* Data format:
* [
* {name: 'Colma (COLM)', code:'CM', address: '365 D Street, Colma CA 94014', exits: 4214, coordinates: [-122.466233, 37.684638]},
* ...
* ]
*/
const layer = new ScatterplotLayer({
id: 'scatterplot-layer',
data,
pickable: true,
opacity: 0.8,
stroked: true,
filled: true,
radiusScale: 6,
radiusMinPixels: 1,
radiusMaxPixels: 100,
lineWidthMinPixels: 1,
getPosition: d => d.coordinates,
getRadius: d => Math.sqrt(d.exits),
getFillColor: d => [255, 140, 0],
getLineColor: d => [0, 0, 0]
});
return <DeckGL viewState={viewState}
layers={[layer]}
getTooltip={({object}) => object && `${object.name}\n${object.address}`} />;
}
To install the dependencies from NPM:
npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/layers
import {ScatterplotLayer} from '@deck.gl/layers';
new ScatterplotLayer({});
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.ScatterplotLayer({});
Inherits from all Base Layer properties.
radiusUnits
(String, optional) 'meters'
The units of the point radius, one of 'meters'
, 'pixels'
. When zooming in and out, meter sizes scale with the base map, and pixel sizes remain the same on screen.
radiusScale
(Number, optional) 1
A global radius multiplier for all points.
lineWidthUnits
(String, optional) 'meters'
The units of the line width, one of 'meters'
, 'pixels'
. When zooming in and out, meter sizes scale with the base map, and pixel sizes remain the same on screen.
lineWidthScale
(Number, optional) 1
A global line width multiplier for all points.
stroked
(Boolean, optional)false
Only draw outline of points. It falls back to outline
if not provided.
filled
(Boolean, optional)true
Draw the filled area of a point.
radiusMinPixels
(Number, optional) 0
The minimum radius in pixels. This prop can be used to prevent the circle from getting too small when zoomed out.
radiusMaxPixels
(Number, optional) Number.MAX_SAFE_INTEGER
The maximum radius in pixels. This prop can be used to prevent the circle from getting too big when zoomed in.
lineWidthMinPixels
(Number, optional) 0
The minimum line width in pixels. This prop can be used to prevent the stroke from getting too thin when zoomed out.
lineWidthMaxPixels
(Number, optional) Number.MAX_SAFE_INTEGER
The maximum line width in pixels. This prop can be used to prevent the path from getting too thick when zoomed in.
getPosition
(Function, optional) object => object.position
Method called to retrieve the position of each object.
getRadius
(Function|Number, optional) 1
The radius of each object, in units specified by radiusUnits
(default meters).
getColor
(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.
It will be overridden by getLineColor
and getFillColor
if these new accessors are specified.
getFillColor
(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.
getColor
.getLineColor
(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.
getColor
.getLineWidth
(Function|Array, optional) 1
The width of the outline of each object, in units specified by lineWidthUnits
(default meters).
strokeWidth
.