docs/api-reference/carto/vector-tile-layer.md
VectorTileLayer is a layer for visualizing tiled vector data. It extends the MVTLayer with CARTO-specific optimizations for efficient vector tile rendering, including binary data format support and separate geometry/attribute loading.
import {DeckGL} from '@deck.gl/react';
import {VectorTileLayer} from '@deck.gl/carto';
import {vectorTableSource} from '@carto/api-client';
function App({viewState}) {
const data = vectorTableSource({
accessToken: 'XXX',
connectionName: 'carto_dw',
tableName: 'carto-demo-data.demo_tables.chicago_crime_sample',
});
const layer = new VectorTileLayer({
data,
pointRadiusMinPixels: 2,
getLineColor: [0, 0, 0, 200],
getFillColor: [238, 77, 90],
lineWidthMinPixels: 1
})
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 {VectorTileLayer} from '@deck.gl/carto';
new VectorTileLayer({});
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.VectorTileLayer({});
Inherits all properties from MVTLayer.
data (TilejsonResult) {#data}Required. A valid TilejsonResult object.
Use one of the following Data Sources to fetch this from the CARTO API:
autoLabels (boolean | object, optional) {#autolabels}falseIf true, automatically creates labels for lines and polygons at their centroids.
For more control over labeling, pass an object with the following properties:
uniqueIdProperty (string): Property name to use for deduplication. Only creates a single label for each unique feature value.