Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
203 lines (129 sloc) 6.96 KB

@deck.gl/layers

ScatterplotLayer

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]} />);
};

Installation

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({});

Properties

Inherits from all Base Layer properties.

Render Options

radiusScale (Number, optional) transition-enabled
  • Default: 1

A global radius multiplier for all points.

lineWidthUnits (String, optional) transition-enabled
  • 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.

lineWidthScale (Number, optional) transition-enabled
  • Default: 1

A global line width multiplier for all points.

stroked (Boolean, optional)
  • Default: false

Only draw outline of points. It falls back to outline if not provided.

filled (Boolean, optional)
  • Default: true

Draw the filled area of a point.

radiusMinPixels (Number, optional) transition-enabled
  • Default: 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) transition-enabled
  • 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.

lineWidthMinPixels (Number, optional) transition-enabled
  • Default: 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) transition-enabled
  • 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.

Data Accessors

getPosition (Function, optional) transition-enabled
  • Default: object => object.position

Method called to retrieve the position of each object.

getRadius (Function|Number, optional) transition-enabled
  • 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
  • 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
  • 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
  • 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
  • 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.

Source

modules/layers/src/scatterplot-layer

You can’t perform that action at this time.