@deck.gl/geo-layers 9.0.0-beta.2 → 9.0.0-beta.3

package/dist/mesh-layer/mesh-layer.js

@@ -0,0 +1,129 @@
+import { parsePBRMaterial } from '@luma.gl/gltf';
+import { pbr } from '@luma.gl/shadertools';
+import { Model } from '@luma.gl/engine';
+import { GL } from '@luma.gl/constants';
+import { SimpleMeshLayer } from '@deck.gl/mesh-layers';
+import vs from "./mesh-layer-vertex.glsl.js";
+import fs from "./mesh-layer-fragment.glsl.js";
+function validateGeometryAttributes(attributes) {
+    const positionAttribute = attributes.positions || attributes.POSITION;
+    const vertexCount = positionAttribute.value.length / positionAttribute.size;
+    const hasColorAttribute = attributes.COLOR_0 || attributes.colors;
+    if (!hasColorAttribute) {
+        attributes.colors = {
+            size: 4,
+            value: new Uint8Array(vertexCount * 4).fill(255),
+            normalized: true
+        };
+    }
+}
+const defaultProps = {
+    pbrMaterial: { type: 'object', value: null },
+    featureIds: { type: 'array', value: null, optional: true }
+};
+export default class MeshLayer extends SimpleMeshLayer {
+    static { this.layerName = 'MeshLayer'; }
+    static { this.defaultProps = defaultProps; }
+    getShaders() {
+        const shaders = super.getShaders();
+        const modules = shaders.modules;
+        modules.push(pbr);
+        return { ...shaders, vs, fs };
+    }
+    initializeState() {
+        const { featureIds } = this.props;
+        super.initializeState();
+        const attributeManager = this.getAttributeManager();
+        if (featureIds) {
+            // attributeManager is always defined in a primitive layer
+            attributeManager.add({
+                featureIdsPickingColors: {
+                    type: GL.UNSIGNED_BYTE,
+                    size: 3,
+                    noAlloc: true,
+                    // eslint-disable-next-line @typescript-eslint/unbound-method
+                    update: this.calculateFeatureIdsPickingColors
+                }
+            });
+        }
+    }
+    updateState(params) {
+        super.updateState(params);
+        const { props, oldProps } = params;
+        if (props.pbrMaterial !== oldProps.pbrMaterial) {
+            this.updatePbrMaterialUniforms(props.pbrMaterial);
+        }
+    }
+    draw(opts) {
+        const { featureIds } = this.props;
+        if (!this.state.model) {
+            return;
+        }
+        this.state.model.setUniforms({
+            // Needed for PBR (TODO: find better way to get it)
+            // eslint-disable-next-line camelcase
+            u_Camera: this.state.model.uniforms.project_uCameraPosition,
+            pickFeatureIds: Boolean(featureIds)
+        });
+        super.draw(opts);
+    }
+    getModel(mesh) {
+        const { id, pbrMaterial } = this.props;
+        const parsedPBRMaterial = this.parseMaterial(pbrMaterial, mesh);
+        // Keep material to explicitly remove textures
+        this.setState({ parsedPBRMaterial });
+        const shaders = this.getShaders();
+        validateGeometryAttributes(mesh.attributes);
+        const model = new Model(this.context.device, {
+            ...this.getShaders(),
+            id,
+            geometry: mesh,
+            bufferLayout: this.getAttributeManager().getBufferLayouts(),
+            defines: {
+                ...shaders.defines,
+                ...parsedPBRMaterial?.defines,
+                HAS_UV_REGIONS: mesh.attributes.uvRegions ? 1 : 0
+            },
+            parameters: parsedPBRMaterial?.parameters,
+            isInstanced: true
+        });
+        return model;
+    }
+    updatePbrMaterialUniforms(pbrMaterial) {
+        const { model } = this.state;
+        if (model) {
+            const { mesh } = this.props;
+            const parsedPBRMaterial = this.parseMaterial(pbrMaterial, mesh);
+            // Keep material to explicitly remove textures
+            this.setState({ parsedPBRMaterial });
+            model.setBindings(parsedPBRMaterial.bindings);
+            model.setUniforms(parsedPBRMaterial.uniforms);
+        }
+    }
+    parseMaterial(pbrMaterial, mesh) {
+        const unlit = Boolean(pbrMaterial.pbrMetallicRoughness && pbrMaterial.pbrMetallicRoughness.baseColorTexture);
+        return parsePBRMaterial(this.context.device, { unlit, ...pbrMaterial }, { NORMAL: mesh.attributes.normals, TEXCOORD_0: mesh.attributes.texCoords }, {
+            pbrDebug: false,
+            lights: true,
+            useTangents: false
+        });
+    }
+    calculateFeatureIdsPickingColors(attribute) {
+        // This updater is only called if featureIds is not null
+        const featureIds = this.props.featureIds;
+        const value = new Uint8ClampedArray(featureIds.length * attribute.size);
+        const pickingColor = [];
+        for (let index = 0; index < featureIds.length; index++) {
+            this.encodePickingColor(featureIds[index], pickingColor);
+            value[index * 3] = pickingColor[0];
+            value[index * 3 + 1] = pickingColor[1];
+            value[index * 3 + 2] = pickingColor[2];
+        }
+        attribute.value = value;
+    }
+    finalizeState(context) {
+        super.finalizeState(context);
+        this.state.parsedPBRMaterial?.generatedTextures.forEach(texture => texture.destroy());
+        this.setState({ parsedPBRMaterial: null });
+    }
+}

package/{typed → dist}/mvt-layer/coordinate-transform.d.ts

@@ -1,4 +1,4 @@
 import { Viewport } from '@deck.gl/core';
-import { GeoBoundingBox } from '../tileset-2d';
+import { GeoBoundingBox } from '../tileset-2d/index';
 export declare function transform(geometry: any, bbox: GeoBoundingBox, viewport: Viewport): any;
 //# sourceMappingURL=coordinate-transform.d.ts.map

package/{typed → dist}/mvt-layer/coordinate-transform.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"coordinate-transform.d.ts","sourceRoot":"","sources":["../../src/mvt-layer/coordinate-transform.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAEvC,OAAO,EAAC,cAAc,EAAC,MAAM,eAAe,CAAC;AA0C7C,wBAAgB,SAAS,CAAC,QAAQ,KAAA,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAE,QAAQ,OAa3E"}
+{"version":3,"file":"coordinate-transform.d.ts","sourceRoot":"","sources":["../../src/mvt-layer/coordinate-transform.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAEvC,OAAO,EAAC,cAAc,EAAC,MAAM,qBAAqB,CAAC;AA0CnD,wBAAgB,SAAS,CAAC,QAAQ,KAAA,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAE,QAAQ,OAa3E"}

package/dist/mvt-layer/coordinate-transform.js

@@ -0,0 +1,41 @@
+import { lerp } from '@math.gl/core';
+const availableTransformations = {
+    Point,
+    MultiPoint,
+    LineString,
+    MultiLineString,
+    Polygon,
+    MultiPolygon
+};
+function Point([pointX, pointY], [nw, se], viewport) {
+    const x = lerp(nw[0], se[0], pointX);
+    const y = lerp(nw[1], se[1], pointY);
+    return viewport.unprojectFlat([x, y]);
+}
+function getPoints(geometry, bbox, viewport) {
+    return geometry.map(g => Point(g, bbox, viewport));
+}
+function MultiPoint(multiPoint, bbox, viewport) {
+    return getPoints(multiPoint, bbox, viewport);
+}
+function LineString(line, bbox, viewport) {
+    return getPoints(line, bbox, viewport);
+}
+function MultiLineString(multiLineString, bbox, viewport) {
+    return multiLineString.map(lineString => LineString(lineString, bbox, viewport));
+}
+function Polygon(polygon, bbox, viewport) {
+    return polygon.map(polygonRing => getPoints(polygonRing, bbox, viewport));
+}
+function MultiPolygon(multiPolygon, bbox, viewport) {
+    return multiPolygon.map(polygon => Polygon(polygon, bbox, viewport));
+}
+export function transform(geometry, bbox, viewport) {
+    const nw = viewport.projectFlat([bbox.west, bbox.north]);
+    const se = viewport.projectFlat([bbox.east, bbox.south]);
+    const projectedBbox = [nw, se];
+    return {
+        ...geometry,
+        coordinates: availableTransformations[geometry.type](geometry.coordinates, projectedBbox, viewport)
+    };
+}

package/dist/mvt-layer/find-index-binary.d.ts

@@ -0,0 +1,11 @@
+import type { BinaryFeatureCollection } from '@loaders.gl/schema';
+/**
+ * Return the index of feature (numericProps or featureIds) for given feature id
+ * Example: findIndexBinary(data, 'id', 33) will return the index in the array of numericProps
+ * of the feature 33.
+ */
+export default function findIndexBinary(data: BinaryFeatureCollection, // The data in binary format
+uniqueIdProperty: string, // Name of the unique id property
+featureId: string | number, // feature id to find
+layerName: string | null): number;
+//# sourceMappingURL=find-index-binary.d.ts.map

package/dist/mvt-layer/find-index-binary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"find-index-binary.d.ts","sourceRoot":"","sources":["../../src/mvt-layer/find-index-binary.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,uBAAuB,EAIxB,MAAM,oBAAoB,CAAC;AAK5B;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,IAAI,EAAE,uBAAuB,EAAE,4BAA4B;AAC3D,gBAAgB,EAAE,MAAM,EAAE,iCAAiC;AAC3D,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,qBAAqB;AACjD,SAAS,EAAE,MAAM,GAAG,IAAI,GACvB,MAAM,CASR"}

package/dist/mvt-layer/find-index-binary.js

@@ -0,0 +1,96 @@
+const GEOM_TYPES = ['points', 'lines', 'polygons'];
+/**
+ * Return the index of feature (numericProps or featureIds) for given feature id
+ * Example: findIndexBinary(data, 'id', 33) will return the index in the array of numericProps
+ * of the feature 33.
+ */
+export default function findIndexBinary(data, // The data in binary format
+uniqueIdProperty, // Name of the unique id property
+featureId, // feature id to find
+layerName // the layer to search in
+) {
+    for (const gt of GEOM_TYPES) {
+        const index = data[gt] && findIndexByType(data[gt], uniqueIdProperty, featureId, layerName);
+        if (index >= 0) {
+            return index;
+        }
+    }
+    return -1;
+}
+function findIndexByType(geomData, uniqueIdProperty, featureId, layerName) {
+    const featureIds = geomData.featureIds.value;
+    if (!featureIds.length) {
+        return -1;
+    }
+    let startFeatureIndex = 0;
+    let endFeatureIndex = featureIds[featureIds.length - 1] + 1;
+    if (layerName) {
+        const layerRange = getLayerRange(geomData, layerName);
+        if (layerRange) {
+            startFeatureIndex = layerRange[0];
+            endFeatureIndex = layerRange[1] + 1;
+        }
+        else {
+            return -1;
+        }
+    }
+    // Look for the uniqueIdProperty
+    let featureIndex = -1;
+    if (uniqueIdProperty in geomData.numericProps) {
+        const vertexIndex = geomData.numericProps[uniqueIdProperty].value.findIndex((x, i) => x === featureId && featureIds[i] >= startFeatureIndex && featureIds[i] < endFeatureIndex);
+        return vertexIndex >= 0 ? geomData.globalFeatureIds.value[vertexIndex] : -1;
+    }
+    else if (uniqueIdProperty) {
+        featureIndex = findIndex(geomData.properties, elem => elem[uniqueIdProperty] === featureId, startFeatureIndex, endFeatureIndex);
+    }
+    else if (geomData.fields) {
+        featureIndex = findIndex(geomData.fields, (elem) => elem.id === featureId, startFeatureIndex, endFeatureIndex);
+    }
+    return featureIndex >= 0 ? getGlobalFeatureId(geomData, featureIndex) : -1;
+}
+// Returns [firstFeatureIndex, lastFeatureIndex]
+// MVTLoader parses tiles layer-by-layer, so each layer is a continuous range
+function getLayerRange(geomData, layerName) {
+    if (!geomData.__layers) {
+        // Cache a map from properties.layerName to index ranges
+        const layerNames = {};
+        const { properties } = geomData;
+        for (let i = 0; i < properties.length; i++) {
+            const { layerName: key } = properties[i];
+            if (!key) {
+                // ignore
+            }
+            else if (layerNames[key]) {
+                layerNames[key][1] = i;
+            }
+            else {
+                layerNames[key] = [i, i];
+            }
+        }
+        geomData.__layers = layerNames;
+    }
+    return geomData.__layers[layerName];
+}
+// Returns global feature id
+function getGlobalFeatureId(geomData, featureIndex) {
+    if (!geomData.__ids) {
+        // Cache a map from featureId to globalFeatureId
+        const result = [];
+        const featureIds = geomData.featureIds.value;
+        const globalFeatureIds = geomData.globalFeatureIds.value;
+        for (let i = 0; i < featureIds.length; i++) {
+            result[featureIds[i]] = globalFeatureIds[i];
+        }
+        geomData.__ids = result;
+    }
+    return geomData.__ids[featureIndex];
+}
+// Like array.findIndex, but only search within a range
+function findIndex(array, predicate, startIndex, endIndex) {
+    for (let i = startIndex; i < endIndex; i++) {
+        if (predicate(array[i], i)) {
+            return i;
+        }
+    }
+    return -1;
+}

package/{typed → dist}/mvt-layer/mvt-layer.d.ts

@@ -4,8 +4,8 @@ import type { Loader } from '@loaders.gl/loader-utils';
 import type { BinaryFeatureCollection } from '@loaders.gl/schema';
 import type { Feature } from 'geojson';
 import TileLayer, { TiledPickingInfo, TileLayerProps } from '../tile-layer/tile-layer';
-import type { Tileset2DProps, TileLoadProps } from '../tileset-2d';
-import { Tile2DHeader, URLTemplate } from '../tileset-2d';
+import type { Tileset2DProps, TileLoadProps } from '../tileset-2d/index';
+import { Tile2DHeader, URLTemplate } from '../tileset-2d/index';
 export type TileJson = {
     tilejson: string;
     tiles: string[];
@@ -18,9 +18,10 @@ export type TileJson = {
 };
 type ParsedMvtTile = Feature[] | BinaryFeatureCollection;
 /** All props supported by the MVTLayer */
-export type MVTLayerProps = _MVTLayerProps & Omit<GeoJsonLayerProps, 'data'> & TileLayerProps<ParsedMvtTile>;
+export type MVTLayerProps = _MVTLayerProps & Omit<GeoJsonLayerProps, 'data'> & Omit<TileLayerProps<ParsedMvtTile>, 'data'>;
 /** Props added by the MVTLayer  */
 export type _MVTLayerProps = {
+    data: TileJson | URLTemplate;
     /** Called if `data` is a TileJSON URL when it is successfully fetched. */
     onDataLoad?: ((tilejson: TileJson | null) => void) | null;
     /** Needed for highlighting a feature split across two or more tiles. */
@@ -47,8 +48,8 @@ export default class MVTLayer<ExtraProps extends {} = {}> extends TileLayer<Pars
     state: TileLayer<ParsedMvtTile>['state'] & {
         binary: boolean;
         data: URLTemplate;
-        tileJSON: any;
-        highlightColor: number[];
+        tileJSON: TileJson | null;
+        highlightColor?: number[];
         hoveredFeatureId: number | string | null;
         hoveredFeatureLayerName: string | null;
     };

package/dist/mvt-layer/mvt-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mvt-layer.d.ts","sourceRoot":"","sources":["../../src/mvt-layer/mvt-layer.ts"],"names":[],"mappings":"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"}

package/dist/mvt-layer/mvt-layer.js

@@ -0,0 +1,305 @@
+import { log, COORDINATE_SYSTEM } from '@deck.gl/core';
+import { GeoJsonLayer } from '@deck.gl/layers';
+import { ClipExtension } from '@deck.gl/extensions';
+import { Matrix4 } from '@math.gl/core';
+import { MVTWorkerLoader } from '@loaders.gl/mvt';
+import { binaryToGeojson } from '@loaders.gl/gis';
+import { transform } from "./coordinate-transform.js";
+import findIndexBinary from "./find-index-binary.js";
+import TileLayer from "../tile-layer/tile-layer.js";
+import { urlType, getURLFromTemplate, isGeoBoundingBox, isURLTemplate } from "../tileset-2d/index.js";
+const WORLD_SIZE = 512;
+const defaultProps = {
+    ...GeoJsonLayer.defaultProps,
+    data: urlType,
+    onDataLoad: { type: 'function', value: null, optional: true, compare: false },
+    uniqueIdProperty: '',
+    highlightedFeatureId: null,
+    loaders: [MVTWorkerLoader],
+    binary: true
+};
+/** Render data formatted as [Mapbox Vector Tiles](https://docs.mapbox.com/vector-tiles/specification/). */
+export default class MVTLayer extends TileLayer {
+    static { this.layerName = 'MVTLayer'; }
+    static { this.defaultProps = defaultProps; }
+    initializeState() {
+        super.initializeState();
+        // GlobeView doesn't work well with binary data
+        const binary = this.context.viewport.resolution !== undefined ? false : this.props.binary;
+        this.setState({
+            binary,
+            data: null,
+            tileJSON: null,
+            hoveredFeatureId: null,
+            hoveredFeatureLayerName: null
+        });
+    }
+    get isLoaded() {
+        return Boolean(this.state?.data && super.isLoaded);
+    }
+    updateState({ props, oldProps, context, changeFlags }) {
+        if (changeFlags.dataChanged) {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            this._updateTileData();
+        }
+        if (this.state?.data) {
+            super.updateState({ props, oldProps, context, changeFlags });
+            this._setWGS84PropertyForTiles();
+        }
+        const { highlightColor } = props;
+        if (highlightColor !== oldProps.highlightColor && Array.isArray(highlightColor)) {
+            this.setState({ highlightColor });
+        }
+    }
+    /* eslint-disable complexity */
+    async _updateTileData() {
+        let data = this.props.data;
+        let tileJSON = null;
+        if (typeof data === 'string' && !isURLTemplate(data)) {
+            const { onDataLoad, fetch } = this.props;
+            this.setState({ data: null, tileJSON: null });
+            try {
+                tileJSON = await fetch(data, { propName: 'data', layer: this, loaders: [] });
+            }
+            catch (error) {
+                this.raiseError(error, 'loading TileJSON');
+                data = null;
+            }
+            if (onDataLoad) {
+                onDataLoad(tileJSON, { propName: 'data', layer: this });
+            }
+        }
+        else if (data && typeof data === 'object' && 'tilejson' in data) {
+            tileJSON = data;
+        }
+        if (tileJSON) {
+            data = tileJSON.tiles;
+        }
+        this.setState({ data, tileJSON });
+    }
+    _getTilesetOptions() {
+        const opts = super._getTilesetOptions();
+        const tileJSON = this.state.tileJSON;
+        const { minZoom, maxZoom } = this.props;
+        if (tileJSON) {
+            if (Number.isFinite(tileJSON.minzoom) && tileJSON.minzoom > minZoom) {
+                opts.minZoom = tileJSON.minzoom;
+            }
+            if (Number.isFinite(tileJSON.maxzoom) &&
+                (!Number.isFinite(maxZoom) || tileJSON.maxzoom < maxZoom)) {
+                opts.maxZoom = tileJSON.maxzoom;
+            }
+        }
+        return opts;
+    }
+    /* eslint-disable complexity */
+    renderLayers() {
+        if (!this.state?.data)
+            return null;
+        return super.renderLayers();
+    }
+    getTileData(loadProps) {
+        const { data, binary } = this.state;
+        const { index, signal } = loadProps;
+        const url = getURLFromTemplate(data, loadProps);
+        if (!url) {
+            return Promise.reject('Invalid URL');
+        }
+        let loadOptions = this.getLoadOptions();
+        const { fetch } = this.props;
+        loadOptions = {
+            ...loadOptions,
+            mimeType: 'application/x-protobuf',
+            mvt: {
+                ...loadOptions?.mvt,
+                coordinates: this.context.viewport.resolution ? 'wgs84' : 'local',
+                tileIndex: index
+                // Local worker debug
+                // workerUrl: `modules/mvt/dist/mvt-loader.worker.js`
+                // Set worker to null to skip web workers
+                // workerUrl: null
+            },
+            gis: binary ? { format: 'binary' } : {}
+        };
+        return fetch(url, { propName: 'data', layer: this, loadOptions, signal });
+    }
+    renderSubLayers(props) {
+        const { x, y, z } = props.tile.index;
+        const worldScale = Math.pow(2, z);
+        const xScale = WORLD_SIZE / worldScale;
+        const yScale = -xScale;
+        const xOffset = (WORLD_SIZE * x) / worldScale;
+        const yOffset = WORLD_SIZE * (1 - y / worldScale);
+        const modelMatrix = new Matrix4().scale([xScale, yScale, 1]);
+        props.autoHighlight = false;
+        if (!this.context.viewport.resolution) {
+            props.modelMatrix = modelMatrix;
+            props.coordinateOrigin = [xOffset, yOffset, 0];
+            props.coordinateSystem = COORDINATE_SYSTEM.CARTESIAN;
+            props.extensions = [...(props.extensions || []), new ClipExtension()];
+        }
+        const subLayers = super.renderSubLayers(props);
+        if (this.state.binary && !(subLayers instanceof GeoJsonLayer)) {
+            log.warn('renderSubLayers() must return GeoJsonLayer when using binary:true')();
+        }
+        return subLayers;
+    }
+    _updateAutoHighlight(info) {
+        const { uniqueIdProperty } = this.props;
+        const { hoveredFeatureId, hoveredFeatureLayerName } = this.state;
+        const hoveredFeature = info.object;
+        let newHoveredFeatureId = null;
+        let newHoveredFeatureLayerName = null;
+        if (hoveredFeature) {
+            newHoveredFeatureId = getFeatureUniqueId(hoveredFeature, uniqueIdProperty);
+            newHoveredFeatureLayerName = getFeatureLayerName(hoveredFeature);
+        }
+        let { highlightColor } = this.props;
+        if (typeof highlightColor === 'function') {
+            highlightColor = highlightColor(info);
+        }
+        if (hoveredFeatureId !== newHoveredFeatureId ||
+            hoveredFeatureLayerName !== newHoveredFeatureLayerName) {
+            this.setState({
+                highlightColor,
+                hoveredFeatureId: newHoveredFeatureId,
+                hoveredFeatureLayerName: newHoveredFeatureLayerName
+            });
+        }
+    }
+    getPickingInfo(params) {
+        const info = super.getPickingInfo(params);
+        const isWGS84 = Boolean(this.context.viewport.resolution);
+        if (this.state.binary && info.index !== -1) {
+            const { data } = params.sourceLayer.props;
+            info.object = binaryToGeojson(data, {
+                globalFeatureId: info.index
+            });
+        }
+        if (info.object && !isWGS84) {
+            info.object = transformTileCoordsToWGS84(info.object, info.tile.bbox, // eslint-disable-line
+            this.context.viewport);
+        }
+        return info;
+    }
+    getSubLayerPropsByTile(tile) {
+        return {
+            highlightedObjectIndex: this.getHighlightedObjectIndex(tile),
+            highlightColor: this.state.highlightColor
+        };
+    }
+    getHighlightedObjectIndex(tile) {
+        const { hoveredFeatureId, hoveredFeatureLayerName, binary } = this.state;
+        const { uniqueIdProperty, highlightedFeatureId } = this.props;
+        const data = tile.content;
+        const isHighlighted = isFeatureIdDefined(highlightedFeatureId);
+        const isFeatureIdPresent = isFeatureIdDefined(hoveredFeatureId) || isHighlighted;
+        if (!isFeatureIdPresent) {
+            return -1;
+        }
+        const featureIdToHighlight = isHighlighted ? highlightedFeatureId : hoveredFeatureId;
+        // Iterable data
+        if (Array.isArray(data)) {
+            return data.findIndex(feature => {
+                const isMatchingId = getFeatureUniqueId(feature, uniqueIdProperty) === featureIdToHighlight;
+                const isMatchingLayer = isHighlighted || getFeatureLayerName(feature) === hoveredFeatureLayerName;
+                return isMatchingId && isMatchingLayer;
+            });
+            // Non-iterable data
+        }
+        else if (data && binary) {
+            // Get the feature index of the selected item to highlight
+            return findIndexBinary(data, uniqueIdProperty, featureIdToHighlight, isHighlighted ? '' : hoveredFeatureLayerName);
+        }
+        return -1;
+    }
+    _pickObjects(maxObjects) {
+        const { deck, viewport } = this.context;
+        const width = viewport.width;
+        const height = viewport.height;
+        const x = viewport.x;
+        const y = viewport.y;
+        const layerIds = [this.id];
+        return deck.pickObjects({ x, y, width, height, layerIds, maxObjects });
+    }
+    /** Get the rendered features in the current viewport. */
+    getRenderedFeatures(maxFeatures = null) {
+        const features = this._pickObjects(maxFeatures);
+        const featureCache = new Set();
+        const renderedFeatures = [];
+        for (const f of features) {
+            const featureId = getFeatureUniqueId(f.object, this.props.uniqueIdProperty);
+            if (featureId === undefined) {
+                // we have no id for the feature, we just add to the list
+                renderedFeatures.push(f.object);
+            }
+            else if (!featureCache.has(featureId)) {
+                // Add removing duplicates
+                featureCache.add(featureId);
+                renderedFeatures.push(f.object);
+            }
+        }
+        return renderedFeatures;
+    }
+    _setWGS84PropertyForTiles() {
+        const propName = 'dataInWGS84';
+        const tileset = this.state.tileset;
+        // @ts-expect-error selectedTiles are always initialized when tile is being processed
+        tileset.selectedTiles.forEach((tile) => {
+            if (!tile.hasOwnProperty(propName)) {
+                // eslint-disable-next-line accessor-pairs
+                Object.defineProperty(tile, propName, {
+                    get: () => {
+                        // Still loading or encountered an error
+                        if (!tile.content) {
+                            return null;
+                        }
+                        if (this.state.binary && Array.isArray(tile.content) && !tile.content.length) {
+                            // TODO: @loaders.gl/mvt returns [] when no content. It should return a valid empty binary.
+                            // https://github.com/visgl/loaders.gl/pull/1137
+                            return [];
+                        }
+                        const { bbox } = tile;
+                        if (tile._contentWGS84 === undefined && isGeoBoundingBox(bbox)) {
+                            // Create a cache to transform only once
+                            const content = this.state.binary ? binaryToGeojson(tile.content) : tile.content;
+                            tile._contentWGS84 = content.map(feature => transformTileCoordsToWGS84(feature, bbox, this.context.viewport));
+                        }
+                        return tile._contentWGS84;
+                    }
+                });
+            }
+        });
+    }
+}
+function getFeatureUniqueId(feature, uniqueIdProperty) {
+    if (feature.properties && uniqueIdProperty) {
+        return feature.properties[uniqueIdProperty];
+    }
+    if ('id' in feature) {
+        return feature.id;
+    }
+    return undefined;
+}
+function getFeatureLayerName(feature) {
+    return feature.properties?.layerName || null;
+}
+function isFeatureIdDefined(value) {
+    return value !== undefined && value !== null && value !== '';
+}
+function transformTileCoordsToWGS84(object, bbox, viewport) {
+    const feature = {
+        ...object,
+        geometry: {
+            type: object.geometry.type
+        }
+    };
+    // eslint-disable-next-line accessor-pairs
+    Object.defineProperty(feature.geometry, 'coordinates', {
+        get: () => {
+            const wgs84Geom = transform(object.geometry, bbox, viewport);
+            return wgs84Geom.coordinates;
+        }
+    });
+    return feature;
+}

package/dist/quadkey-layer/quadkey-layer.js

@@ -0,0 +1,22 @@
+import GeoCellLayer from "../geo-cell-layer/GeoCellLayer.js";
+import { getQuadkeyPolygon } from "./quadkey-utils.js";
+const defaultProps = {
+    getQuadkey: { type: 'accessor', value: (d) => d.quadkey }
+};
+/** Render filled and/or stroked polygons based on the [Quadkey](https://towardsdatascience.com/geospatial-indexing-with-quadkeys-d933dff01496) geospatial indexing system. */
+export default class QuadkeyLayer extends GeoCellLayer {
+    static { this.layerName = 'QuadkeyLayer'; }
+    static { this.defaultProps = defaultProps; }
+    indexToBounds() {
+        const { data, extruded, getQuadkey } = 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) => getQuadkeyPolygon(getQuadkey(x, objectInfo), coverage),
+            updateTriggers: { getPolygon: coverage }
+        };
+    }
+}