Skip to main content


The H3HexagonLayer renders hexagons from the H3 geospatial indexing system.

H3HexagonLayer is a CompositeLayer.

import {Deck} from '';
import {H3HexagonLayer} from '';

const layer = new H3HexagonLayer({
id: 'H3HexagonLayer',
data: '',

extruded: true,
getHexagon: d => d.hex,
getFillColor: d => [255, (1 - d.count / 500) * 255, 0],
getElevation: d => d.count,
elevationScale: 20,
pickable: true

new Deck({
initialViewState: {
longitude: -122.4,
latitude: 37.74,
zoom: 11
controller: true,
getTooltip: ({object}) => object && `${object.hex} count: ${object.count}`,
layers: [layer]


To install the dependencies from NPM:

npm install
# or
npm install
import {H3HexagonLayer} from '';
import type {H3HexagonLayerProps} from '';

new H3HexagonLayer<DataT>(...props: H3HexagonLayerProps<DataT>[]);

To use pre-bundled scripts:

<script src="^4.0.0"></script>
<script src="^9.0.0/dist.min.js"></script>
<!-- or -->
<script src="^9.0.0/dist.min.js"></script>
<script src="^9.0.0/dist.min.js"></script>
<script src="^9.0.0/dist.min.js"></script>
new deck.H3HexagonLayer({});

Note that h3-js must be included before


Inherits from all Base Layer, CompositeLayer, and PolygonLayer properties, plus the following:

Render Options

highPrecision (boolean, optional)

  • Default: 'auto'

Each hexagon in the H3 indexing system is slightly different in shape. To draw a large number of hexagons efficiently, the H3HexagonLayer may choose to use instanced drawing by assuming that all hexagons within the current viewport have the same shape as the one at the center of the current viewport. The discrepancy is usually too small to be visible.

There are several cases in which high-precision mode is required. In these cases, H3HexagonLayer may choose to switch to high-precision mode, where it trades performance for accuracy:

  • The input set contains a pentagon. There are 12 pentagons world wide at each resolution, and these cells and their immediate neighbors have significant differences in shape.
  • The input set is at a coarse resolution (res 0 through res 5). These cells have larger differences in shape, particularly when using a Mercator projection.
  • The input set contains hexagons with different resolutions.

Possible values:

  • 'auto': The layer chooses the mode automatically. High-precision rendering is only used if an edge case is encountered in the data.
  • true: Always use high-precision rendering.
  • false: Always use instanced rendering, regardless of the characteristics of the data.

coverage (number, optional) transition-enabled

  • Default: 1

Hexagon radius multiplier, between 0 - 1. When coverage = 1, hexagon is rendered with actual size, by specifying a different value (between 0 and 1) hexagon can be scaled down.

Data Accessors

getHexagon (Accessor<string>, optional)

  • Default: object => object.hexagon

Method called to retrieve the H3 hexagon index of each object. Note that all hexagons within one H3HexagonLayer must use the same resolution.

Sub Layers

The H3HexagonLayer renders the following sublayers: