s2-layer.md

S2Layer (Experimental)

The S2Layer renders filled and/or stroked polygons, with geometry automatically calculated based on an S2 token (geospatial index). It uses Uses the s2-geometry library for S2 polygon calculations.

S2Layer is a CompositeLayer.

import DeckGL from '@deck.gl/react';
import {S2Layer} from '@deck.gl/geo-layers';

const App = ({data, viewport}) => {

  /**
   * Data format:
   * [
   *   {
   *     // S2 Cell in SF Bay Area
   *     token: "80858004",
   *     value: 0.5979242952642347
   *   },
   *   {
   *     token: "8085800c",
   *     value: 0.5446256069712141
   *   },
   *   ...
   * ]
   */
  const layer = new S2Layer({
    id: 's2-layer',
    data,
    pickable: true,
    wireframe: false,
    filled: true,
    extruded: true,
    elevationScale: 1000,
    getS2Token: d => d.token,
    getFillColor: d => [d.value * 255, (1 - d.value) * 255, (1 - d.value) * 128],
    getElevation: d => d.value,
    onHover: ({object, x, y}) => {
      const tooltip = `${object.token} value: ${object.value}`;
      /* Update tooltip
         http://deck.gl/#/documentation/developer-guide/adding-interactivity?section=example-display-a-tooltip-for-hovered-object
      */
    }
  });

  return (<DeckGL {...viewport} layers={[layer]} />);
};

Installation

To install the dependencies from NPM:

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

import {S2Layer} from '@deck.gl/geo-layers';
new S2Layer({});

To use pre-bundled scripts:

<script src="https://bundle.run/[email protected]"></script>
<script src="https://unpkg.com/deck.gl@^7.0.0/dist.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^7.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/layers@^7.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/geo-layers@^7.0.0/dist.min.js"></script>

new deck.S2Layer({});

Properties

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

Data Accessors

getS2Token (Function, optional)

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:

• cell - a PolygonLayer rendering all S2 cells.

Source

modules/geo-layers/src/s2-layer