docs/api-reference/carto/h3-tile-layer.md
H3TileLayer is a layer for visualizing tiled data described using the H3 Spatial Index.
import {DeckGL} from '@deck.gl/react';
import {H3TileLayer} from '@deck.gl/carto';
import {h3QuerySource} from '@carto/api-client';
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]} />;
}
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({});
Inherits all properties from H3HexagonLayer and TileLayer, with exceptions and additions noted below.
data (TilejsonResult) {#data}Required. A valid TilejsonResult object.
Use one of the following Data Sources to fetch this from the CARTO API: