ColumnLayer

Edit on Codepen

The ColumnLayer renders extruded cylinders (tessellated regular polygons) at given coordinates. It is the primitive layer rendered by HexagonLayer after aggregation. Unlike the HexagonLayer, it renders one column for each data object.

JavaScript

import {Deck} from '@deck.gl/core';
import {ColumnLayer} from '@deck.gl/layers';

const layer = new ColumnLayer({
  id: 'ColumnLayer',
  data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/hexagons.json',
  diskResolution: 12,
  extruded: true,
  radius: 250,
  elevationScale: 5000,
  getElevation: d => d.value,
  getFillColor: d => [48, 128, d.value * 255, 255],
  getPosition: d => d.centroid,
  pickable: true
});

new Deck({
  initialViewState: {
    longitude: -122.4,
    latitude: 37.74,
    zoom: 11
  },
  controller: true,
  getTooltip: ({object}) => object && `height: ${object.value * 5000}m`,
  layers: [layer]
});

TypeScript

import {Deck, PickingInfo} from '@deck.gl/core';
import {ColumnLayer} from '@deck.gl/layers';

type DataType = {
  value: number;
  centroid: [longitude: number, latitude: number];
};

const layer = new ColumnLayer<DataType>({
  id: 'ColumnLayer',
  data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/hexagons.json',
  diskResolution: 12,
  extruded: true,
  radius: 250,
  elevationScale: 5000,
  getElevation: (d: DataType) => d.value,
  getFillColor: (d: DataType) => [48, 128, d.value * 255, 255],
  getPosition: (d: DataType) => d.centroid,
  pickable: true
});

new Deck({
  initialViewState: {
    longitude: -122.4,
    latitude: 37.74,
    zoom: 11
  },
  controller: true,
  getTooltip: ({object}: PickingInfo<DataType>) => object && `height: ${object.value * 5000}m`,
  layers: [layer]
});

React

import React from 'react';
import DeckGL from '@deck.gl/react';
import {ColumnLayer} from '@deck.gl/layers';
import type {PickingInfo} from '@deck.gl/core';

type DataType = {
  value: number;
  centroid: [longitude: number, latitude: number];
};

function App() {
  const layer = new ColumnLayer<DataType>({
    id: 'ColumnLayer',
    data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/hexagons.json',
    diskResolution: 12,
    extruded: true,
    radius: 250,
    elevationScale: 5000,
    getElevation: (d: DataType) => d.value,
    getFillColor: (d: DataType) => [48, 128, d.value * 255, 255],
    getPosition: (d: DataType) => d.centroid,
    pickable: true
  });

  return <DeckGL
    initialViewState={{
      longitude: -122.4,
      latitude: 37.74,
      zoom: 11
    }}
    controller
    getTooltip={({object}: PickingInfo<DataType>) => object && `height: ${object.value * 5000}m`}
    layers={[layer]}
  />;
}

Installation

To install the dependencies from NPM:

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

import {ColumnLayer} from '@deck.gl/layers';
import type {ColumnLayerProps} from '@deck.gl/layers';

new ColumnLayer<DataT>(...props: ColumnLayerProps<DataT>[]);

To use pre-bundled scripts:

<script src="https://unpkg.com/deck.gl@^9.0.0/dist.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^9.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/layers@^9.0.0/dist.min.js"></script>

new deck.ColumnLayer({});

Properties

Inherits from all Base Layer properties.

Render Options

diskResolution (number, optional)

• Default: 20

The number of sides to render the disk as. The disk is a regular polygon that fits inside the given radius. A higher resolution will yield a smoother look close-up, but also need more resources to render.

radius (number, optional)

• Default: 1000

Disk size in units specified by radiusUnits (default meters).

angle (number, optional)

• Default: 0

Disk rotation, counter-clockwise in degrees.

vertices (Position[], optional)

Replace the default geometry (regular polygon that fits inside the unit circle) with a custom one. The length of the array must be at least diskResolution. Each vertex is a point [x, y] that is the offset from the instance position, relative to the radius.

offset (number[2], optional)

• Default: [0, 0]

Disk offset from the position, relative to the radius. By default, the disk is centered at each position.

coverage (number, optional)

• Default: 1

Radius multiplier, between 0 - 1. The radius of the disk is calculated by coverage * radius

elevationScale (number, optional)

• Default: 1

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

filled (boolean, optional)

• Default: true

Whether to draw a filled column (solid fill).

stroked (boolean, optional)

• Default: false

Whether to draw an outline around the disks. Only applies if extruded: false.

extruded (boolean, optional)

• Default: true

Whether to extrude the columns. If set to false, all columns will be rendered as flat polygons.

wireframe (boolean, optional)

• Default: false

Whether to generate a line wireframe of the column. The outline will have "horizontal" lines closing the top and bottom polygons and a vertical line (a "strut") for each vertex around the disk. Only applies if extruded: true.

flatShading (boolean, optional)

• Default: false

If true, the vertical surfaces of the columns use flat shading. If false, use smooth shading. Only effective if extruded is true.

radiusUnits (string, optional)

• Default: 'meters'

The units of the radius, one of 'meters', 'common', and 'pixels'. See unit system.

lineWidthUnits (string, optional)

• Default: 'meters'

The units of the line width, one of 'meters', 'common', and 'pixels'. See unit system.

lineWidthScale (boolean, optional)

• Default: 1

The line width multiplier that multiplied to all outlines if the stroked attribute is true.

lineWidthMinPixels (number, optional)

• Default: 0

The minimum outline width in pixels.

lineWidthMaxPixels (number, optional)

• Default: Number.MAX_SAFE_INTEGER

The maximum outline width in pixels.

material (Material, 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 (Accessor<Position>, optional)

• Default: object => object.position

Method called to retrieve the position of each column, in [x, y]. An optional third component can be used to set the elevation of the bottom.

getFillColor (Accessor<Color>, optional)

• Default: [0, 0, 0, 255]

The rgba color is in the format of [r, g, b, [a]]. Each channel is a number between 0-255 and a is 255 if not supplied.

• 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.
• If not provided, it falls back to getColor.

getLineColor (Accessor<Color>, optional)

• Default: [0, 0, 0, 255]

The rgba color is in the format of [r, g, b, [a]]. Each channel is a number between 0-255 and a is 255 if not supplied.

• If an array is provided, it is used as the outline color for all columns.
• If a function is provided, it is called on each object to retrieve its outline color.
• If not provided, it falls back to getColor.

getElevation (Accessor<number>, optional)

• 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.

getLineWidth (Accessor<number>, optional)

• Default: 1

The width of the outline of the column, in units specified by lineWidthUnits (default meters). Only applies if extruded: false and stroked: true.

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

Source

modules/layers/src/column-layer