Skip to main content

GridCellLayer

Edit on Codepen

This is the primitive layer rendered by CPUGridLayer after aggregation. Unlike the CPUGridLayer, it renders one column for each data object.

The GridCellLayer can render a grid-based heatmap. It is a variation of the ColumnLayer. It takes the constant width / height of all cells and bottom-left coordinate of each cell. The grid cells can be given a height using the getElevation accessor.

import DeckGL from '@deck.gl/react';
import {GridCellLayer} from '@deck.gl/layers';

function App({data, viewState}) {
  /**
   * Data format:
   * [
   *   {centroid: [-122.4, 37.7], value: 100},
   *   ...
   * ]
   */
  const layer = new GridCellLayer({
    id: 'grid-cell-layer',
    data,
    pickable: true,
    extruded: true,
    cellSize: 200,
    elevationScale: 5000,
    getPosition: d => d.centroid,
    getFillColor: d => [48, 128, d.value * 255, 255],
    getElevation: d => d.value
  });

  return <DeckGL viewState={viewState}
    layers={[layer]}
    getTooltip={({object}) => object && `height: ${object.value * 5000}m`} />;
}

Installation​

To install the dependencies from NPM:

npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/layers
import {GridCellLayer} from '@deck.gl/layers';
new GridCellLayer({});

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

Properties​

Inherits from all Base Layer properties.

Render Options​

cellSize (Number, optional) transition-enabled​
  • Default: 1000

Size of each grid cell in meters

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

Cell size scale factor. The size of cell is calculated by cellSize * coverage.

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

Elevation multiplier. The elevation of cell is calculated by elevationScale * getElevation(d). elevationScale is a handy property to scale all cell elevations without updating the data.

extruded (Boolean, optional)​
  • Default: true

Whether to enable grid elevation. If set to false, all grid will be flat.

material (Object, optional)​
  • Default: true

This is an object that contains material props for lighting effect applied on extruded polygons. Check the lighting guide for configurable settings.

Data Accessors​

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

Method called to retrieve the bottom-left corner ([minX, minY]) of each cell.

getColor (Function|Array, optional) transition-enabled​
  • Default: [255, 0, 255, 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.
getElevation (Function|Number, optional) transition-enabled​
  • Default: 1000

The elevation of each cell in meters.

  • If a number is provided, it is used as the elevation for all objects.
  • If a function is provided, it is called on each object to retrieve its elevation.

Source​

modules/layers/src/column-layer/grid-cell-layer.ts