Skip to main content


The QuadkeyLayer renders filled and/or stroked polygons based on the Quadkey geospatial indexing system.

QuadkeyLayer is a CompositeLayer.

import {Deck} from '';
import {QuadkeyLayer} from '';

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

extruded: true,
getQuadkey: d => d.quadkey,
getFillColor: d => [d.value * 128, (1 - d.value) * 255, (1 - d.value) * 255, 180],
getElevation: d => d.value,
elevationScale: 1000,
pickable: true

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


To install the dependencies from NPM:

npm install
# or
npm install
import {QuadkeyLayer} from '';
import type {QuadkeyLayerProps} from '';

new QuadkeyLayer<DataT>(...props: QuadkeyLayerProps<DataT>[]);

To use pre-bundled scripts:

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


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

Data Accessors

getQuadkey (Accessor<string>, optional)

Called for each data object to retrieve the quadkey string identifier.

  • default: object => object.quadkey

Sub Layers

The QuadkeyLayer renders the following sublayers: