Skip to main content

H3TileLayer

H3TileLayer is a layer for visualizing tiled data described using the H3 Spatial Index.

Usage​

import DeckGL from '@deck.gl/react';
import {H3TileLayer, h3QuerySource} from '@deck.gl/carto';

function App({viewState}) {
  const data = h3QuerySource({
    accessToken: 'XXX',
    connectionName: 'carto_dw',
    sqlQuery: 'select * from carto-demo-data.demo_tables.chicago_crime_sample',
  });

  const layer = new H3TileLayer({
    data,
    getFillColor: d => d.properties.color
  })

  return <DeckGL viewState={viewState} layers={[layer]} />;
}

Installation​

To install the dependencies from NPM:

npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/layers @deck.gl/carto
import {H3TileLayer} from '@deck.gl/carto';
new H3TileLayer({});

To use pre-bundled scripts:

<script src="https://unpkg.com/deck.gl@^9.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/carto@^9.0.0/dist.min.js"></script>

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

Properties​

Inherits all properties from H3HexagonLayer and TileLayer, with exceptions indicated below.

data (TilejsonResult)​

Required. A valid TilejsonResult object.

Use one of the following Data Sources to fetch this from the CARTO API:

Source​

modules/carto/src/layers/h3-tile-layer.ts