Skip to main content


The S2Layer renders filled and/or stroked polygons based on the S2 geospatial indexing system.

S2Layer is a CompositeLayer.

import {Deck} from '';
import {S2Layer} from '';

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

extruded: true,
getS2Token: d => d.token,
getFillColor: d => [d.value * 255, (1 - d.value) * 255, (1 - d.value) * 128],
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.token} value: ${object.value}`,
layers: [layer]


To install the dependencies from NPM:

npm install
# or
npm install
import {S2Layer} from '';
import type {S2LayerProps} from '';

new S2Layer<DataT>(...props: S2LayerProps<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.S2Layer({});


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

Data Accessors

getS2Token (Accessor<string>, optional) transition-enabled

Called for each data object to retrieve the identifier of the S2 cell. May return one of the following:

  • A string that is the cell's hex token
  • A string that is the Hilbert quad key (containing /)
  • A Long object that is the cell's id

Check S2 Cell for more details.

  • default: object => object.token

Sub Layers

The S2Layer renders the following sublayers: