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';
const App = ({data, viewport}) => {
/**
* 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],
onHover: ({object, x, y}) => {
const tooltip = `${object.name}\n${object.address}`;
/* Update tooltip
http://deck.gl/#/documentation/developer-guide/adding-interactivity?section=example-display-a-tooltip-for-hovered-object
*/
}
});
return (<DeckGL {...viewport} layers={[layer]} />);
};
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@^7.0.0/dist.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^7.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/layers@^7.0.0/dist.min.js"></script>
new deck.ScatterplotLayer({});
Inherits from all Base Layer properties.
- Default:
1
A global radius multiplier for all points.
- Default:
'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.
- Default:
1
A global line width multiplier for all points.
- Default:
false
Only draw outline of points. It falls back to outline
if not provided.
- Default:
true
Draw the filled area of a point.
- Default:
0
The minimum radius in pixels. This prop can be used to prevent the circle from getting too small when zoomed out.
- Default:
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.
- Default:
0
The minimum line width in pixels. This prop can be used to prevent the stroke from getting too thin when zoomed out.
- Default:
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) ![transition-enabled](https://camo.githubusercontent.com/aa74f0ace0d5465cffce434043c0173dfa451ac83382c23c975b6cb827d6c7e3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7472616e736974696f6e2d656e61626c65642d677265656e2e7376673f7374796c653d666c61742d737175617265253232)
- Default:
object => object.position
Method called to retrieve the position of each object.
getRadius
(Function|Number, optional) ![transition-enabled](https://camo.githubusercontent.com/aa74f0ace0d5465cffce434043c0173dfa451ac83382c23c975b6cb827d6c7e3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7472616e736974696f6e2d656e61626c65642d677265656e2e7376673f7374796c653d666c61742d737175617265253232)
- Default:
1
The radius of each object, in meters.
- If a number is provided, it is used as the radius for all objects.
- If a function is provided, it is called on each object to retrieve its radius.
getColor
(Function|Array, optional) ![transition-enabled](https://camo.githubusercontent.com/aa74f0ace0d5465cffce434043c0173dfa451ac83382c23c975b6cb827d6c7e3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7472616e736974696f6e2d656e61626c65642d677265656e2e7376673f7374796c653d666c61742d737175617265253232)
- Default:
[0, 0, 0, 255]
The rgba color of each object, in r, g, b, [a]
. Each component is in the 0-255 range.
- 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.
It will be overridden by getLineColor
and getFillColor
if these new accessors are specified.
getFillColor
(Function|Array, optional) ![transition-enabled](https://camo.githubusercontent.com/aa74f0ace0d5465cffce434043c0173dfa451ac83382c23c975b6cb827d6c7e3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7472616e736974696f6e2d656e61626c65642d677265656e2e7376673f7374796c653d666c61742d737175617265253232)
- Default:
[0, 0, 0, 255]
The rgba color of each object, in r, g, b, [a]
. Each component is in the 0-255 range.
- If an array is provided, it is used as the filled color for all objects.
- If a function is provided, it is called on each object to retrieve its color.
- If not provided, it falls back to
getColor
.
getLineColor
(Function|Array, optional) ![transition-enabled](https://camo.githubusercontent.com/aa74f0ace0d5465cffce434043c0173dfa451ac83382c23c975b6cb827d6c7e3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7472616e736974696f6e2d656e61626c65642d677265656e2e7376673f7374796c653d666c61742d737175617265253232)
- Default:
[0, 0, 0, 255]
The rgba color of each object, in r, g, b, [a]
. Each component is in the 0-255 range.
- If an array is provided, it is used as the outline color for all objects.
- If a function is provided, it is called on each object to retrieve its color.
- If not provided, it falls back to
getColor
.
getLineWidth
(Function|Array, optional) ![transition-enabled](https://camo.githubusercontent.com/aa74f0ace0d5465cffce434043c0173dfa451ac83382c23c975b6cb827d6c7e3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7472616e736974696f6e2d656e61626c65642d677265656e2e7376673f7374796c653d666c61742d737175617265253232)
- Default:
1
The width of the outline of each object, in units specified by lineWidthUnits
(default meters).
- If a number is provided, it is used as the outline width for all objects.
- If a function is provided, it is called on each object to retrieve its outline width.
- If not provided, it falls back to
strokeWidth
.