Skip to main content

QuadbinTileLayer

QuadbinTileLayer is a layer for visualizing tiled data described using the Quadbin Spatial Index.

Usage​

import DeckGL from '@deck.gl/react';
import {QuadbinTileLayer, quadbinTilesetSource} from '@deck.gl/carto';

function App({viewState}) {
  const data = quadbinTilesetSource({
    accessToken: 'XXX',
    connectionName: 'carto_dw',
    tableName: 'carto-demo-data.demo_tilesets.quadbin'
  });

  const layer = new QuadbinTileLayer({
    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 {QuadbinTileLayer} from '@deck.gl/carto';
new QuadbinTileLayer({});

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.QuadbinTileLayer({});

Properties​

Inherits all properties from QuadkeyLayer 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:

Data Accessors​

getQuadbin (Accessor<BigInt>, optional)​

Note that the getQuadkey accessor is replaced with getQuadbin.

Called for each data object to retrieve the quadbin bigint identifier.

  • default: object => object.quadbin

Source​

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