Skip to main content

GeohashLayer

The GeohashLayer renders filled and/or stroked polygons based on the Geohash geospatial indexing system.

GeohashLayer is a CompositeLayer.

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

function App({data, viewState}) {
/**
* Data format:
* [
* {
* // Geohash in SF Bay Area
* geohash: "9q8yv",
* value: 0.7668453218020029
* },
* {
* geohash: "9q8yyp",
* value: 0.8789404786833306
* },
* ...
* ]
*/
const layer = new GeohashLayer({
id: 'geohash-layer',
data,
pickable: true,
wireframe: false,
filled: true,
extruded: true,
elevationScale: 1000,
getGeohash: d => d.geohash,
getFillColor: d => [d.value * 255, (1 - d.value) * 128, (1 - d.value) * 255],
getElevation: d => d.value
});

return <DeckGL viewState={viewState}
layers={[layer]}
getTooltip={({object}) => object && `${object.geohash} value: ${object.value}`} />;
}

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 {GeohashLayer} from '@deck.gl/geo-layers';
new GeohashLayer({});

To use pre-bundled scripts:

<script src="https://unpkg.com/deck.gl@^8.7.0/dist.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^8.7.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/layers@^8.7.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/geo-layers@^8.7.0/dist.min.js"></script>
new deck.GeohashLayer({});

Properties

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

Data Accessors

getGeohash (Function, optional)

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

  • default: object => object.geohash

Sub Layers

The GeohashLayer renders the following sublayers:

Source

modules/geo-layers/src/geohash-layer