HeatmapLayer

HeatmapLayer can be used to visualize spatial distribution of data. It internally implements [Gaussian Kernel Density Estimation](https://en.wikipedia.org/wiki/Kernel_(statistics%29#Kernel_functions_in_common_use) to render heatmaps.

import DeckGL from '@deck.gl/react';
import {HeatmapLayer} from '@deck.gl/aggregation-layers';

function App({data, viewState}) {
  /**
   * Data format:
   * [
   *   {COORDINATES: [-122.42177834, 37.78346622], WEIGHT: 10},
   *   ...
   * ]
   */
  const layer = new HeatmapLayer({
    id: 'heatmapLayer',
    getPosition: d => d.COORDINATES,
    getWeight: d => d.WEIGHT    
  });

  return <DeckGL viewState={viewState} layers={[layer]} />;
}

Installation

To install the dependencies from NPM:

npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/layers @deck.gl/aggregation-layers

import {HeatmapLayer} from '@deck.gl/aggregation-layers';
new HeatmapLayer({});

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>
<script src="https://unpkg.com/@deck.gl/aggregation-layers@^8.0.0/dist.min.js"></script>

new deck.HeatmapLayer({});

Properties

Inherits from all Base Layer and CompositeLayer properties.

Render Options

radiusPixels (Number, optional)

• Default: 30

Radius of the circle in pixels, to which the weight of an object is distributed.

colorRange (Array, optional)

• Default:

Specified as an array of colors [color1, color2, ... color6]. Each color is an array of 3 or 4 values [R, G, B] or [R, G, B, A], representing Red, Green, Blue and Alpha channels. Each channel is a value between 0 and 255. When Alpha is not provided, a value of 255 is used. By default colorRange is set to colorbrewer 6-class YlOrRd.

intensity (Number, optional)

• Default: 1

Value that is multiplied with the total weight at a pixel to obtain the final weight. A value larger than 1 biases the output color towards the higher end of the spectrum, and a value less than 1 biases the output color towards the lower end of the spectrum.

threshold (Number, optional)

• Default: 0.05

The HeatmapLayer reduces the opacity of the pixels with relatively low weight to create a fading effect at the edge. A larger threshold smoothens the boundaries of color blobs, while making pixels with low relative weight harder to spot (due to low alpha value).

threshold is defined as the ratio of the fading weight to the max weight, between 0 and 1. For example, 0.1 affects all pixels with weight under 10% of the max.

threshold is ignored when colorDomain is specified.

colorDomain (Array, optional)

• Default: null

Weight of each data object is distributed to to all the pixels in a circle centered at the object position, weight a pixel receives is inversely proportional to its distance from the center. Pixels that fall into multiple circles will have sum of all weights. And the weight of the pixel determines its color. When colorDomain is specified, all pixels with weight with in specified colorDomain will get mapped to colorRange, pixels with weight less than colorDomain[0] will fade out (reduced alpha) and pixels with weight more than colorDomain[1] will mapped to the highest color in colorRange.

When not specified, maximum weight (maxWeight) is auto calculated and domain will be set to [maxWeight * threshold, maxWeight].

NOTES:

• It is recommend to use default value for regular use cases.
• On Windows browsers due to an ANGLE issue, auto calculation of maximum weight doesn't work, hence on Windows, colorDomain should be used with a non zero maximum value.

Data Accessors

getPosition (Function, optional)

• Default: object => object.position

Method called to retrieve the position of each point.

getWeight (Function, optional)

• Default: 1

Method called to retrieve weight of each point. By default each point will use a weight of 1.

Source

modules/aggregation-layers/src/heatmap-layer