@deck.gl/carto 9.0.0-beta.2 → 9.0.0-beta.3

package/dist/layers/h3-tileset-2d.js

@@ -0,0 +1,99 @@
+import { _Tileset2D as Tileset2D } from '@deck.gl/geo-layers';
+import { polygonToCells, latLngToCell, getResolution, cellToBoundary, cellToParent, gridDisk } from 'h3-js';
+function getHexagonsInBoundingBox({ west, north, east, south }, resolution) {
+    const longitudeSpan = Math.abs(east - west);
+    if (longitudeSpan > 180) {
+        // This is a known issue in h3-js: polygonToCells does not work correctly
+        // when longitude span is larger than 180 degrees.
+        const nSegments = Math.ceil(longitudeSpan / 180);
+        let h3Indices = [];
+        for (let s = 0; s < nSegments; s++) {
+            const segmentEast = east + s * 180;
+            const segmentWest = Math.min(segmentEast + 179.9999999, west);
+            h3Indices = h3Indices.concat(getHexagonsInBoundingBox({ west: segmentWest, north, east: segmentEast, south }, resolution));
+        }
+        return [...new Set(h3Indices)];
+    }
+    // `polygonToCells()` fills based on hexagon center, which means tiles vanish
+    // prematurely. Get more accurate coverage by oversampling
+    const oversample = 2;
+    const h3Indices = polygonToCells([
+        [
+            [west, north],
+            [west, south],
+            [east, south],
+            [east, north],
+            [west, north]
+        ]
+    ], resolution + oversample, true);
+    return oversample ? [...new Set(h3Indices.map(i => cellToParent(i, resolution)))] : h3Indices;
+}
+function tileToBoundingBox(index) {
+    const coordinates = cellToBoundary(index);
+    const latitudes = coordinates.map(c => c[0]);
+    const longitudes = coordinates.map(c => c[1]);
+    const west = Math.min(...longitudes);
+    const south = Math.min(...latitudes);
+    const east = Math.max(...longitudes);
+    const north = Math.max(...latitudes);
+    return { west, south, east, north };
+}
+// Resolution conversion function. Takes a WebMercatorViewport and returns
+// a H3 resolution such that the screen space size of the hexagons is
+// similar
+// Relative scale factor (0 = no biasing, 2 = a few hexagons cover view)
+const BIAS = 2;
+export function getHexagonResolution(viewport) {
+    const hexagonScaleFactor = (2 / 3) * viewport.zoom;
+    const latitudeScaleFactor = Math.log(1 / Math.cos((Math.PI * viewport.latitude) / 180));
+    // Clip and bias
+    return Math.max(0, Math.floor(hexagonScaleFactor + latitudeScaleFactor - BIAS));
+}
+export default class H3Tileset2D extends Tileset2D {
+    /**
+     * Returns all tile indices in the current viewport. If the current zoom level is smaller
+     * than minZoom, return an empty array. If the current zoom level is greater than maxZoom,
+     * return tiles that are on maxZoom.
+     */
+    // @ts-expect-error Tileset2D should be generic over TileIndex
+    getTileIndices({ viewport, minZoom, maxZoom }) {
+        if (viewport.latitude === undefined)
+            return [];
+        const [east, south, west, north] = viewport.getBounds();
+        let z = getHexagonResolution(viewport);
+        let indices;
+        if (typeof minZoom === 'number' && Number.isFinite(minZoom) && z < minZoom) {
+            // TODO support `extent` prop
+            return [];
+        }
+        if (typeof maxZoom === 'number' && Number.isFinite(maxZoom) && z > maxZoom) {
+            z = maxZoom;
+            // Once we are at max zoom, getHexagonsInBoundingBox doesn't work, simply
+            // get a ring centered on the hexagon in the viewport center
+            const center = latLngToCell(viewport.latitude, viewport.longitude, maxZoom);
+            indices = gridDisk(center, 1);
+        }
+        else {
+            indices = getHexagonsInBoundingBox({ west, north, east, south }, z);
+        }
+        return indices.map(i => ({ i }));
+    }
+    // @ts-expect-error Tileset2D should be generic over TileIndex
+    getTileId({ i }) {
+        return i;
+    }
+    // @ts-expect-error Tileset2D should be generic over TileIndex
+    getTileMetadata({ i }) {
+        return { bbox: tileToBoundingBox(i) };
+    }
+    // @ts-expect-error Tileset2D should be generic over TileIndex
+    getTileZoom({ i }) {
+        return getResolution(i);
+    }
+    // @ts-expect-error Tileset2D should be generic over TileIndex
+    getParentIndex(index) {
+        const resolution = getResolution(index.i);
+        const i = cellToParent(index.i, resolution - 1);
+        return { i };
+    }
+}

package/dist/layers/point-label-layer.js

@@ -0,0 +1,150 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { TextLayer, _TextBackgroundLayer as TextBackgroundLayer } from '@deck.gl/layers';
+const [LEFT, TOP, RIGHT, BOTTOM] = [0, 1, 2, 3];
+class EnhancedTextBackgroundLayer extends TextBackgroundLayer {
+    static { this.layerName = 'EnhancedTextBackgroundLayer'; }
+    getShaders() {
+        const shaders = super.getShaders();
+        let vs = shaders.vs;
+        // Modify shader so that the padding is offset by the pixel offset to ensure the padding
+        // always captures the anchor point. As padding is uniform we cannot pass it a per-label value
+        vs = vs.replaceAll('padding.', '_padding.');
+        vs = vs.replace('void main(void) {', 'void main(void) {\n  vec4 _padding = padding + instancePixelOffsets.xyxy * vec4(1.0, 1.0, -1.0, -1.0);');
+        return { ...shaders, vs };
+    }
+}
+// TextLayer which includes modified text-background-layer-vertex shader and only renders the
+// primary background layer in the collision pass
+class EnhancedTextLayer extends TextLayer {
+    static { this.layerName = 'EnhancedTextLayer'; }
+    filterSubLayer({ layer, renderPass }) {
+        const background = layer.id.includes('primary-background');
+        if (renderPass === 'collision') {
+            return background; // Only draw primary background layer in collision pass
+        }
+        return !background; // Do not draw background layer in other passes
+    }
+}
+const defaultProps = {
+    ...TextLayer.defaultProps,
+    getRadius: { type: 'accessor', value: 1 },
+    radiusScale: { type: 'number', min: 0, value: 1 }
+};
+export default class PointLabelLayer extends CompositeLayer {
+    static { this.layerName = 'PointLabelLayer'; }
+    static { this.defaultProps = defaultProps; }
+    calculatePixelOffset(secondary) {
+        const { getTextAnchor: anchor, getAlignmentBaseline: alignment, getRadius, getSecondaryText, radiusScale, secondarySizeScale, sizeScale } = this.props;
+        const xMult = anchor === 'middle' ? 0 : anchor === 'start' ? 1 : -1;
+        const yMult = alignment === 'center' ? 0 : alignment === 'bottom' ? 1 : -1;
+        // Padding based on font size (font size / 4)
+        const xPadding = sizeScale / 4;
+        const yPadding = sizeScale * (1 + 1 / 4);
+        // Place secondary label under main label (secondary label always 'top' baseline aligned)
+        const secondaryOffset = 0.6 * (1 - yMult) * sizeScale;
+        let yOffset = secondary ? secondaryOffset : 0;
+        // Special case, position relative to secondary label
+        if (anchor === 'middle' && alignment === 'top' && getSecondaryText) {
+            yOffset -= secondaryOffset;
+            yOffset -= secondarySizeScale;
+            yOffset += sizeScale;
+        }
+        // Padding based on point radius (radius/ 4)
+        const radiusPadding = 1 + 1 / 4;
+        return typeof getRadius === 'function'
+            ? (d, info) => {
+                const r = (info ? getRadius(d, info) : 1) * radiusScale * radiusPadding;
+                return [xMult * (r + xPadding), yMult * (r + yPadding) + yOffset];
+            }
+            : [
+                xMult * (getRadius * radiusScale * radiusPadding + xPadding),
+                yMult * (getRadius * radiusScale * radiusPadding + yPadding) + yOffset
+            ];
+    }
+    calculateBackgroundPadding() {
+        const { getTextAnchor: anchor, getAlignmentBaseline: alignment, sizeScale } = this.props;
+        // Heuristics to avoid label overlap
+        const paddingX = 12 * sizeScale;
+        const paddingY = 3 * sizeScale;
+        const backgroundPadding = [0, 0, 0, 0];
+        if (alignment === 'top') {
+            backgroundPadding[TOP] = paddingY;
+        }
+        else if (alignment === 'bottom') {
+            backgroundPadding[BOTTOM] = paddingY;
+        }
+        else {
+            backgroundPadding[TOP] = 0.5 * paddingY;
+            backgroundPadding[BOTTOM] = 0.5 * paddingY;
+        }
+        if (anchor === 'start') {
+            backgroundPadding[LEFT] = paddingX;
+        }
+        else if (anchor === 'end') {
+            backgroundPadding[RIGHT] = paddingX;
+        }
+        else {
+            backgroundPadding[LEFT] = 0.5 * paddingX;
+            backgroundPadding[RIGHT] = 0.5 * paddingX;
+        }
+        return backgroundPadding;
+    }
+    renderTextLayer(id, { updateTriggers: updateTriggersOverride = {}, ...props }) {
+        const { data, characterSet, fontFamily, fontSettings, fontWeight, outlineColor, outlineWidth, sizeScale, radiusScale, getAlignmentBaseline, getColor, getPosition, getTextAnchor, updateTriggers } = this.props;
+        return new EnhancedTextLayer(this.getSubLayerProps({
+            id,
+            data,
+            characterSet,
+            fontFamily,
+            fontSettings,
+            fontWeight,
+            outlineColor,
+            outlineWidth,
+            sizeScale,
+            getAlignmentBaseline,
+            getColor,
+            getPosition,
+            getTextAnchor,
+            updateTriggers: {
+                ...updateTriggers,
+                ...updateTriggersOverride,
+                getPixelOffset: [
+                    updateTriggers.getRadius,
+                    updateTriggers.getTextAnchor,
+                    updateTriggers.getAlignmentBaseline,
+                    radiusScale,
+                    sizeScale
+                ]
+            }
+        }), {
+            getSize: 1,
+            _subLayerProps: { background: { type: EnhancedTextBackgroundLayer } }
+        }, props);
+    }
+    renderLayers() {
+        const { getText, getSecondaryColor, getSecondaryText, secondaryOutlineColor, secondarySizeScale, updateTriggers } = this.props;
+        const getPixelOffset = this.calculatePixelOffset(false);
+        const backgroundPadding = this.calculateBackgroundPadding();
+        const out = [
+            // Text doesn't update via updateTrigger for some reason
+            this.renderTextLayer(`${updateTriggers.getText}-primary`, {
+                backgroundPadding,
+                getText,
+                getPixelOffset,
+                background: true // Only use background for primary label for faster collisions
+            }),
+            Boolean(getSecondaryText) &&
+                this.renderTextLayer(`${updateTriggers.getSecondaryText}-secondary`, {
+                    getText: getSecondaryText,
+                    getPixelOffset: this.calculatePixelOffset(true),
+                    getAlignmentBaseline: 'top',
+                    // updateTriggers: {getText: updateTriggers.getSecondaryText},
+                    // Optional overrides
+                    ...(getSecondaryColor && { getColor: getSecondaryColor }),
+                    ...(secondarySizeScale && { sizeScale: secondarySizeScale }),
+                    ...(secondaryOutlineColor && { outlineColor: secondaryOutlineColor })
+                })
+        ];
+        return out;
+    }
+}

package/dist/layers/quadbin-layer.js

@@ -0,0 +1,21 @@
+import { _GeoCellLayer as GeoCellLayer } from '@deck.gl/geo-layers';
+import { getQuadbinPolygon } from "./quadbin-utils.js";
+const defaultProps = {
+    getQuadbin: { type: 'accessor', value: (d) => d.quadbin }
+};
+export default class QuadbinLayer extends GeoCellLayer {
+    static { this.layerName = 'QuadbinLayer'; }
+    static { this.defaultProps = defaultProps; }
+    indexToBounds() {
+        const { data, extruded, getQuadbin } = this.props;
+        // To avoid z-fighting reduce polygon footprint when extruding
+        const coverage = extruded ? 0.99 : 1;
+        return {
+            data,
+            _normalize: false,
+            positionFormat: 'XY',
+            getPolygon: (x, objectInfo) => getQuadbinPolygon(getQuadbin(x, objectInfo), coverage),
+            updateTriggers: { getPolygon: coverage }
+        };
+    }
+}

package/dist/layers/quadbin-tile-layer.js

@@ -0,0 +1,47 @@
+import { CompositeLayer } from '@deck.gl/core';
+import QuadbinLayer from "./quadbin-layer.js";
+import QuadbinTileset2D from "./quadbin-tileset-2d.js";
+import SpatialIndexTileLayer from "./spatial-index-tile-layer.js";
+import { hexToBigInt } from 'quadbin';
+import { injectAccessToken, TilejsonPropType } from "./utils.js";
+export const renderSubLayers = props => {
+    const { data } = props;
+    if (!data || !data.length)
+        return null;
+    const isBigInt = typeof data[0].id === 'bigint';
+    return new QuadbinLayer(props, {
+        getQuadbin: isBigInt ? d => d.id : d => hexToBigInt(d.id)
+    });
+};
+const defaultProps = {
+    data: TilejsonPropType
+};
+export default class QuadbinTileLayer extends CompositeLayer {
+    static { this.layerName = 'QuadbinTileLayer'; }
+    static { this.defaultProps = defaultProps; }
+    getLoadOptions() {
+        const loadOptions = super.getLoadOptions() || {};
+        const tileJSON = this.props.data;
+        injectAccessToken(loadOptions, tileJSON.accessToken);
+        loadOptions.cartoSpatialTile = { ...loadOptions.cartoSpatialTile, scheme: 'quadbin' };
+        return loadOptions;
+    }
+    renderLayers() {
+        const tileJSON = this.props.data;
+        if (!tileJSON)
+            return null;
+        const { tiles: data, maxresolution: maxZoom } = tileJSON;
+        return [
+            // @ts-ignore
+            new SpatialIndexTileLayer(this.props, {
+                id: `quadbin-tile-layer-${this.props.id}`,
+                data,
+                // TODO: Tileset2D should be generic over TileIndex type
+                TilesetClass: QuadbinTileset2D,
+                renderSubLayers,
+                maxZoom,
+                loadOptions: this.getLoadOptions()
+            })
+        ];
+    }
+}

package/dist/layers/quadbin-tileset-2d.js

@@ -0,0 +1,27 @@
+import { _Tileset2D as Tileset2D } from '@deck.gl/geo-layers';
+import { bigIntToHex, cellToParent, cellToTile, getResolution, tileToCell } from 'quadbin';
+export default class QuadbinTileset2D extends Tileset2D {
+    // @ts-expect-error for spatial indices, TileSet2d should be parametrized by TileIndexT
+    getTileIndices(opts) {
+        return super
+            .getTileIndices(opts)
+            .map(tileToCell)
+            .map(q => ({ q, i: bigIntToHex(q) }));
+    }
+    // @ts-expect-error TileIndex must be generic
+    getTileId({ q, i }) {
+        return i || bigIntToHex(q);
+    }
+    // @ts-expect-error TileIndex must be generic
+    getTileMetadata({ q }) {
+        return super.getTileMetadata(cellToTile(q));
+    }
+    // @ts-expect-error TileIndex must be generic
+    getTileZoom({ q }) {
+        return Number(getResolution(q));
+    }
+    // @ts-expect-error TileIndex must be generic
+    getParentIndex({ q }) {
+        return { q: cellToParent(q) };
+    }
+}

package/dist/layers/quadbin-utils.js

@@ -0,0 +1,21 @@
+import { worldToLngLat } from '@math.gl/web-mercator';
+import { cellToTile } from 'quadbin';
+const TILE_SIZE = 512;
+export function quadbinToOffset(quadbin) {
+    const { x, y, z } = cellToTile(quadbin);
+    const scale = TILE_SIZE / (1 << z);
+    return [x * scale, TILE_SIZE - y * scale, scale];
+}
+export function quadbinToWorldBounds(quadbin, coverage) {
+    const [xOffset, yOffset, scale] = quadbinToOffset(quadbin);
+    return [
+        [xOffset, yOffset],
+        [xOffset + coverage * scale, yOffset - coverage * scale]
+    ];
+}
+export function getQuadbinPolygon(quadbin, coverage = 1) {
+    const [topLeft, bottomRight] = quadbinToWorldBounds(quadbin, coverage);
+    const [w, n] = worldToLngLat(topLeft);
+    const [e, s] = worldToLngLat(bottomRight);
+    return [e, n, e, s, w, s, w, n, e, n];
+}

package/dist/{esm/layers → layers}/raster-layer-vertex.glsl.js

@@ -96,4 +96,3 @@ void main(void) {
   DECKGL_FILTER_COLOR(vColor, geometry);
 }
 `;
-//# sourceMappingURL=raster-layer-vertex.glsl.js.map

package/dist/layers/raster-layer.js

@@ -0,0 +1,97 @@
+import { GL } from '@luma.gl/constants';
+import { CompositeLayer } from '@deck.gl/core';
+import { ColumnLayer } from '@deck.gl/layers';
+import { quadbinToOffset } from "./quadbin-utils.js";
+import vs from "./raster-layer-vertex.glsl.js";
+import { assert, createBinaryProxy } from "../utils.js";
+const defaultProps = {
+    ...ColumnLayer.defaultProps,
+    extruded: false,
+    diskResolution: 4,
+    vertices: [
+        [-0.5, -0.5],
+        [0.5, -0.5],
+        [0.5, 0.5],
+        [-0.5, 0.5]
+    ]
+};
+// Modified ColumnLayer with custom vertex shader
+class RasterColumnLayer extends ColumnLayer {
+    static { this.layerName = 'RasterColumnLayer'; }
+    getShaders() {
+        const shaders = super.getShaders();
+        return { ...shaders, vs };
+    }
+    initializeState() {
+        // Only add attributes needed by shader
+        const attributeManager = this.getAttributeManager();
+        /* eslint-disable max-len */
+        attributeManager.addInstanced({
+            instanceElevations: {
+                size: 1,
+                transition: true,
+                accessor: 'getElevation'
+            },
+            instanceFillColors: {
+                size: this.props.colorFormat.length,
+                type: GL.UNSIGNED_BYTE,
+                normalized: true,
+                transition: true,
+                accessor: 'getFillColor',
+                defaultValue: [0, 0, 0, 255]
+            },
+            instanceLineColors: {
+                size: this.props.colorFormat.length,
+                type: GL.UNSIGNED_BYTE,
+                normalized: true,
+                transition: true,
+                accessor: 'getLineColor',
+                defaultValue: [255, 255, 255, 255]
+            }
+        });
+    }
+}
+// Adapter layer around RasterColumnLayer that converts data & accessors into correct format
+export default class RasterLayer extends CompositeLayer {
+    static { this.layerName = 'RasterLayer'; }
+    static { this.defaultProps = defaultProps; }
+    renderLayers() {
+        // Rendering props underlying layer
+        const { data, getElevation, getFillColor, getLineColor, getLineWidth, tileIndex, updateTriggers } = this.props;
+        if (!data || !tileIndex)
+            return null;
+        const { blockWidth, blockHeight } = data;
+        assert(blockWidth === blockHeight, `blockWidth (${blockWidth}) must equal blockHeight (${blockHeight})`);
+        const [xOffset, yOffset, scale] = quadbinToOffset(tileIndex);
+        const offset = [xOffset, yOffset, scale / blockWidth];
+        // Filled Column Layer
+        const CellLayer = this.getSubLayerClass('column', RasterColumnLayer);
+        return new CellLayer(this.props, this.getSubLayerProps({
+            id: 'cell',
+            updateTriggers,
+            getElevation: this.getSubLayerAccessor(getElevation),
+            getFillColor: this.getSubLayerAccessor(getFillColor),
+            getLineColor: this.getSubLayerAccessor(getLineColor),
+            getLineWidth: this.getSubLayerAccessor(getLineWidth)
+        }), {
+            data: {
+                data, // Pass through data for getSubLayerAccessor()
+                length: blockWidth * blockHeight
+            },
+            offset
+        });
+    }
+    getSubLayerAccessor(accessor) {
+        if (typeof accessor !== 'function') {
+            return super.getSubLayerAccessor(accessor);
+        }
+        // Proxy values back in standard feature format
+        return (object, info) => {
+            const { data, index } = info;
+            const binaryData = data.data;
+            const proxy = createBinaryProxy(binaryData.cells, index);
+            // @ts-ignore (TS2349) accessor is always function
+            return accessor({ properties: proxy }, info);
+        };
+    }
+}

package/dist/layers/raster-tile-layer.js

@@ -0,0 +1,43 @@
+import { CompositeLayer } from '@deck.gl/core';
+import RasterLayer from "./raster-layer.js";
+import QuadbinTileset2D from "./quadbin-tileset-2d.js";
+import SpatialIndexTileLayer from "./spatial-index-tile-layer.js";
+import { injectAccessToken, TilejsonPropType } from "./utils.js";
+export const renderSubLayers = props => {
+    const tileIndex = props.tile?.index?.q;
+    if (!tileIndex)
+        return null;
+    return new RasterLayer(props, { tileIndex });
+};
+const defaultProps = {
+    data: TilejsonPropType
+};
+export default class RasterTileLayer extends CompositeLayer {
+    static { this.layerName = 'RasterTileLayer'; }
+    static { this.defaultProps = defaultProps; }
+    getLoadOptions() {
+        const loadOptions = super.getLoadOptions() || {};
+        const tileJSON = this.props.data;
+        injectAccessToken(loadOptions, tileJSON.accessToken);
+        return loadOptions;
+    }
+    renderLayers() {
+        const tileJSON = this.props.data;
+        if (!tileJSON)
+            return null;
+        const { tiles: data, minzoom: minZoom, maxzoom: maxZoom } = tileJSON;
+        return [
+            // @ts-ignore
+            new SpatialIndexTileLayer(this.props, {
+                id: `raster-tile-layer-${this.props.id}`,
+                data,
+                // TODO: Tileset2D should be generic over TileIndex type
+                TilesetClass: QuadbinTileset2D,
+                renderSubLayers,
+                minZoom,
+                maxZoom,
+                loadOptions: this.getLoadOptions()
+            })
+        ];
+    }
+}

package/dist/layers/schema/carto-properties-tile-loader.js

@@ -0,0 +1,21 @@
+import { TileReader } from "./carto-properties-tile.js";
+import { parsePbf } from "./tile-loader-utils.js";
+const CartoPropertiesTileLoader = {
+    name: 'CARTO Properties Tile',
+    version: '1',
+    id: 'cartoPropertiesTile',
+    module: 'carto',
+    extensions: ['pbf'],
+    mimeTypes: ['application/vnd.carto-properties-tile'],
+    category: 'geometry',
+    worker: false,
+    parse: async (arrayBuffer, options) => parseCartoPropertiesTile(arrayBuffer, options),
+    parseSync: parseCartoPropertiesTile,
+    options: {}
+};
+function parseCartoPropertiesTile(arrayBuffer, options) {
+    if (!arrayBuffer)
+        return null;
+    return parsePbf(arrayBuffer, TileReader);
+}
+export default CartoPropertiesTileLoader;

package/dist/layers/schema/carto-properties-tile.js

@@ -0,0 +1,14 @@
+import { NumericPropKeyValueReader, PropertiesReader } from "./carto-tile.js";
+export class TileReader {
+    static read(pbf, end) {
+        return pbf.readFields(TileReader._readField, { properties: [], numericProps: {} }, end);
+    }
+    static _readField(tag, obj, pbf) {
+        if (tag === 1)
+            obj.properties.push(PropertiesReader.read(pbf, pbf.readVarint() + pbf.pos));
+        else if (tag === 2) {
+            const entry = NumericPropKeyValueReader.read(pbf, pbf.readVarint() + pbf.pos);
+            obj.numericProps[entry.key] = entry.value;
+        }
+    }
+}

package/dist/layers/schema/carto-raster-tile-loader.js

@@ -0,0 +1,36 @@
+import { TileReader } from "./carto-raster-tile.js";
+import { parsePbf } from "./tile-loader-utils.js";
+import { getWorkerUrl } from "../../utils.js";
+const VERSION = typeof "9.0.0-beta.2" !== 'undefined' ? "9.0.0-beta.2" : 'latest';
+const id = 'cartoRasterTile';
+const DEFAULT_OPTIONS = {
+    cartoRasterTile: {
+        workerUrl: getWorkerUrl(id, VERSION)
+    }
+};
+const CartoRasterTileLoader = {
+    name: 'CARTO Raster Tile',
+    version: VERSION,
+    id,
+    module: 'carto',
+    extensions: ['pbf'],
+    mimeTypes: ['application/vnd.carto-raster-tile'],
+    category: 'geometry',
+    parse: async (arrayBuffer, options) => parseCartoRasterTile(arrayBuffer, options),
+    parseSync: parseCartoRasterTile,
+    worker: true,
+    options: DEFAULT_OPTIONS
+};
+function parseCartoRasterTile(arrayBuffer, options) {
+    if (!arrayBuffer)
+        return null;
+    const tile = parsePbf(arrayBuffer, TileReader);
+    const { bands, blockHeight, blockWidth } = tile;
+    const numericProps = {};
+    for (let i = 0; i < bands.length; i++) {
+        const { name, data } = bands[i];
+        numericProps[name] = data;
+    }
+    return { blockWidth, blockHeight, cells: { numericProps, properties: [] } };
+}
+export default CartoRasterTileLoader;

package/dist/layers/schema/carto-raster-tile.js

@@ -0,0 +1,46 @@
+import { readPackedTypedArray } from "./fast-pbf.js";
+const ARRAY_TYPES = {
+    uint8: Uint8Array,
+    uint16: Uint16Array,
+    uint32: Uint32Array,
+    uint64: BigUint64Array,
+    int8: Int8Array,
+    int16: Int16Array,
+    int32: Int32Array,
+    int64: BigInt64Array,
+    float32: Float32Array,
+    float64: Float64Array
+};
+// Band ========================================
+export class BandReader {
+    static read(pbf, end) {
+        return pbf.readFields(BandReader._readField, { name: '', type: '', data: null }, end);
+    }
+    static _readField(tag, obj, pbf) {
+        if (tag === 1)
+            obj.name = pbf.readString();
+        else if (tag === 2)
+            obj.type = pbf.readString();
+        else if (tag === 3) {
+            const TypedArray = ARRAY_TYPES[obj.type];
+            if (!TypedArray) {
+                throw Error(`Invalid data type: ${obj.type}`);
+            }
+            obj.data = {};
+            readPackedTypedArray(TypedArray, pbf, obj.data);
+        }
+    }
+}
+export class TileReader {
+    static read(pbf, end) {
+        return pbf.readFields(TileReader._readField, { blockWidth: 0, blockHeight: 0, bands: [] }, end);
+    }
+    static _readField(tag, obj, pbf) {
+        if (tag === 1)
+            obj.blockWidth = pbf.readVarint();
+        else if (tag === 2)
+            obj.blockHeight = pbf.readVarint();
+        else if (tag === 3)
+            obj.bands.push(BandReader.read(pbf, pbf.readVarint() + pbf.pos));
+    }
+}

package/dist/layers/schema/carto-spatial-tile-loader.js

@@ -0,0 +1,35 @@
+import { TileReader } from "./carto-spatial-tile.js";
+import { parsePbf } from "./tile-loader-utils.js";
+import { getWorkerUrl } from "../../utils.js";
+import { binaryToSpatialjson } from "./spatialjson-utils.js";
+const VERSION = typeof "9.0.0-beta.2" !== 'undefined' ? "9.0.0-beta.2" : 'latest';
+const id = 'cartoSpatialTile';
+const DEFAULT_OPTIONS = {
+    cartoSpatialTile: {
+        scheme: 'quadbin',
+        workerUrl: getWorkerUrl(id, VERSION)
+    }
+};
+const CartoSpatialTileLoader = {
+    name: 'CARTO Spatial Tile',
+    version: VERSION,
+    id,
+    module: 'carto',
+    extensions: ['pbf'],
+    mimeTypes: ['application/vnd.carto-spatial-tile'],
+    category: 'geometry',
+    parse: async (arrayBuffer, options) => parseCartoSpatialTile(arrayBuffer, options),
+    parseSync: parseCartoSpatialTile,
+    worker: true,
+    options: DEFAULT_OPTIONS
+};
+function parseCartoSpatialTile(arrayBuffer, options) {
+    if (!arrayBuffer)
+        return null;
+    const tile = parsePbf(arrayBuffer, TileReader);
+    const { cells } = tile;
+    const scheme = options?.cartoSpatialTile?.scheme;
+    const data = { cells, scheme };
+    return binaryToSpatialjson(data);
+}
+export default CartoSpatialTileLoader;