@deck.gl/aggregation-layers

What is @deck.gl/aggregation-layers?

@deck.gl/aggregation-layers is a collection of Deck.gl layers designed for data aggregation and visualization. These layers are optimized for rendering large datasets and provide various aggregation techniques such as grid-based, hexagon-based, and contour-based visualizations.

What are @deck.gl/aggregation-layers's main functionalities?

GridLayer

The GridLayer aggregates data into a grid-based heatmap. Each cell in the grid represents the aggregated data points within that cell. This is useful for visualizing density and distribution of data points over a geographic area.

const {Deck} = require('@deck.gl/core');
const {GridLayer} = require('@deck.gl/aggregation-layers');

const deck = new Deck({
  initialViewState: {
    longitude: -122.45,
    latitude: 37.8,
    zoom: 12
  },
  controller: true,
  layers: [
    new GridLayer({
      id: 'grid-layer',
      data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-bike-parking.json',
      pickable: true,
      extruded: true,
      cellSize: 200,
      elevationScale: 4,
      getPosition: d => d.COORDINATES
    })
  ]
});

HexagonLayer

The HexagonLayer aggregates data into hexagonal bins, providing a hexagon-based heatmap. This is useful for visualizing spatial patterns and density in a more visually appealing way compared to grid-based aggregation.

const {Deck} = require('@deck.gl/core');
const {HexagonLayer} = require('@deck.gl/aggregation-layers');

const deck = new Deck({
  initialViewState: {
    longitude: -122.45,
    latitude: 37.8,
    zoom: 12
  },
  controller: true,
  layers: [
    new HexagonLayer({
      id: 'hexagon-layer',
      data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-bike-parking.json',
      pickable: true,
      extruded: true,
      radius: 200,
      elevationScale: 4,
      getPosition: d => d.COORDINATES
    })
  ]
});

ContourLayer

The ContourLayer generates contour lines based on the density of data points. This is useful for visualizing areas of high and low concentration, similar to topographic maps.

const {Deck} = require('@deck.gl/core');
const {ContourLayer} = require('@deck.gl/aggregation-layers');

const deck = new Deck({
  initialViewState: {
    longitude: -122.45,
    latitude: 37.8,
    zoom: 12
  },
  controller: true,
  layers: [
    new ContourLayer({
      id: 'contour-layer',
      data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-bike-parking.json',
      pickable: true,
      contours: [{threshold: 1, color: [255, 0, 0], strokeWidth: 2}],
      cellSize: 200,
      getPosition: d => d.COORDINATES
    })
  ]
});

Other packages similar to @deck.gl/aggregation-layers

leaflet.heat

Leaflet.heat is a simple heatmap plugin for Leaflet. It provides basic heatmap functionality and is easy to use for small to medium-sized datasets. Compared to @deck.gl/aggregation-layers, it is less feature-rich and not optimized for very large datasets.

heatmap.js

Heatmap.js is a JavaScript library for creating heatmaps. It is highly customizable and can handle large datasets efficiently. However, it does not provide the same level of integration with mapping libraries as @deck.gl/aggregation-layers.

kepler.gl

Kepler.gl is a powerful open-source geospatial analysis tool for large-scale data sets. It offers a wide range of visualization options, including heatmaps, but is more of a standalone application compared to the modular approach of @deck.gl/aggregation-layers.

README

The README file is missing

Changelog

deck.gl [v9.1.0-beta.3] - Jan 15 2025

• CARTO: Support gzip compression in RasterLayer (#9352)
• DataFilterExtension category filtering uint32 attribute (#9350)