@deck.gl/geo-layers 9.0.0-beta.1 → 9.0.0-beta.10

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/{typed → dist}/quadkey-layer/quadkey-layer.d.ts

@@ -1,5 +1,5 @@
 import { AccessorFunction, DefaultProps } from '@deck.gl/core';
-import GeoCellLayer, { GeoCellLayerProps } from '../geo-cell-layer/GeoCellLayer';
+import GeoCellLayer, { GeoCellLayerProps } from "../geo-cell-layer/GeoCellLayer.js";
 /** All properties supported by QuadkeyLayer. */
 export type QuadkeyLayerProps<DataT = unknown> = _QuadkeyLayerProps<DataT> & GeoCellLayerProps<DataT>;
 /** Properties added by QuadkeyLayer. */

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

@@ -0,0 +1 @@
+{"version":3,"file":"quadkey-layer.d.ts","sourceRoot":"","sources":["../../src/quadkey-layer/quadkey-layer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAE,YAAY,EAAC,MAAM,eAAe,CAAC;AAC7D,OAAO,YAAY,EAAE,EAAC,iBAAiB,EAAC,0CAAuC;AAO/E,gDAAgD;AAChD,MAAM,MAAM,iBAAiB,CAAC,KAAK,GAAG,OAAO,IAAI,kBAAkB,CAAC,KAAK,CAAC,GACxE,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAE3B,wCAAwC;AACxC,KAAK,kBAAkB,CAAC,KAAK,IAAI;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CAC9C,CAAC;AAEF,8KAA8K;AAC9K,MAAM,CAAC,OAAO,OAAO,YAAY,CAAC,KAAK,GAAG,GAAG,EAAE,UAAU,SAAS,EAAE,GAAG,EAAE,CAAE,SAAQ,YAAY,CAC7F,KAAK,EACL,QAAQ,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,GAAG,UAAU,CACjD;IACC,MAAM,CAAC,SAAS,SAAkB;IAClC,MAAM,CAAC,YAAY,2CAAgB;IAEnC,aAAa,IAAI,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,GAAG,IAAI;CAcvD"}

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 }
+        };
+    }
+}

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

@@ -0,0 +1,26 @@
+import { worldToLngLat } from '@math.gl/web-mercator';
+const TILE_SIZE = 512;
+export function quadkeyToWorldBounds(quadkey, coverage) {
+    let x = 0;
+    let y = 0;
+    let mask = 1 << quadkey.length;
+    const scale = mask / TILE_SIZE;
+    for (let i = 0; i < quadkey.length; i++) {
+        mask >>= 1;
+        const q = parseInt(quadkey[i]);
+        if (q % 2)
+            x |= mask;
+        if (q > 1)
+            y |= mask;
+    }
+    return [
+        [x / scale, TILE_SIZE - y / scale],
+        [(x + coverage) / scale, TILE_SIZE - (y + coverage) / scale]
+    ];
+}
+export function getQuadkeyPolygon(quadkey, coverage = 1) {
+    const [topLeft, bottomRight] = quadkeyToWorldBounds(quadkey, coverage);
+    const [w, n] = worldToLngLat(topLeft);
+    const [e, s] = worldToLngLat(bottomRight);
+    return [e, n, e, s, w, s, w, n, e, n];
+}

package/dist/s2-layer/s2-geometry.js

@@ -0,0 +1,123 @@
+/*
+Adapted from s2-geometry
+
+ISC License (ISC)
+
+Copyright (c) 2012-2016, Jon Atkins <github@jonatkins.com>
+Copyright (c) 2016, AJ ONeal <aj@daplie.com>
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+*/
+import Long from 'long';
+//
+// Functional Style
+//
+const FACE_BITS = 3;
+const MAX_LEVEL = 30;
+const POS_BITS = 2 * MAX_LEVEL + 1; // 61 (60 bits of data, 1 bit lsb marker)
+const RADIAN_TO_DEGREE = 180 / Math.PI;
+export function IJToST(ij, order, offsets) {
+    const maxSize = 1 << order;
+    return [(ij[0] + offsets[0]) / maxSize, (ij[1] + offsets[1]) / maxSize];
+}
+function singleSTtoUV(st) {
+    if (st >= 0.5) {
+        return (1 / 3.0) * (4 * st * st - 1);
+    }
+    return (1 / 3.0) * (1 - 4 * (1 - st) * (1 - st));
+}
+export function STToUV(st) {
+    return [singleSTtoUV(st[0]), singleSTtoUV(st[1])];
+}
+export function FaceUVToXYZ(face, [u, v]) {
+    switch (face) {
+        case 0:
+            return [1, u, v];
+        case 1:
+            return [-u, 1, v];
+        case 2:
+            return [-u, -v, 1];
+        case 3:
+            return [-1, -v, -u];
+        case 4:
+            return [v, -1, -u];
+        case 5:
+            return [v, u, -1];
+        default:
+            throw new Error('Invalid face');
+    }
+}
+export function XYZToLngLat([x, y, z]) {
+    const lat = Math.atan2(z, Math.sqrt(x * x + y * y));
+    const lng = Math.atan2(y, x);
+    return [lng * RADIAN_TO_DEGREE, lat * RADIAN_TO_DEGREE];
+}
+export function toHilbertQuadkey(idS) {
+    let bin = Long.fromString(idS, true, 10).toString(2);
+    while (bin.length < FACE_BITS + POS_BITS) {
+        // eslint-disable-next-line prefer-template
+        bin = '0' + bin;
+    }
+    // MUST come AFTER binstr has been left-padded with '0's
+    const lsbIndex = bin.lastIndexOf('1');
+    // substr(start, len)
+    // substring(start, end) // includes start, does not include end
+    const faceB = bin.substring(0, 3);
+    // posB will always be a multiple of 2 (or it's invalid)
+    const posB = bin.substring(3, lsbIndex);
+    const levelN = posB.length / 2;
+    const faceS = Long.fromString(faceB, true, 2).toString(10);
+    let posS = Long.fromString(posB, true, 2).toString(4);
+    while (posS.length < levelN) {
+        // eslint-disable-next-line prefer-template
+        posS = '0' + posS;
+    }
+    return `${faceS}/${posS}`;
+}
+function rotateAndFlipQuadrant(n, point, rx, ry) {
+    if (ry === 0) {
+        if (rx === 1) {
+            point[0] = n - 1 - point[0];
+            point[1] = n - 1 - point[1];
+        }
+        const x = point[0];
+        point[0] = point[1];
+        point[1] = x;
+    }
+}
+export function FromHilbertQuadKey(hilbertQuadkey) {
+    const parts = hilbertQuadkey.split('/');
+    const face = parseInt(parts[0], 10);
+    const position = parts[1];
+    const maxLevel = position.length;
+    const point = [0, 0];
+    let level;
+    for (let i = maxLevel - 1; i >= 0; i--) {
+        level = maxLevel - i;
+        const bit = position[i];
+        let rx = 0;
+        let ry = 0;
+        if (bit === '1') {
+            ry = 1;
+        }
+        else if (bit === '2') {
+            rx = 1;
+            ry = 1;
+        }
+        else if (bit === '3') {
+            rx = 1;
+        }
+        const val = Math.pow(2, level - 1);
+        rotateAndFlipQuadrant(val, point, rx, ry);
+        point[0] += val * rx;
+        point[1] += val * ry;
+    }
+    if (face % 2 === 1) {
+        const t = point[0];
+        point[0] = point[1];
+        point[1] = t;
+    }
+    return { face, ij: point, level };
+}

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

@@ -1,5 +1,5 @@
 import { AccessorFunction, DefaultProps } from '@deck.gl/core';
-import GeoCellLayer, { GeoCellLayerProps } from '../geo-cell-layer/GeoCellLayer';
+import GeoCellLayer, { GeoCellLayerProps } from "../geo-cell-layer/GeoCellLayer.js";
 /** All properties supported by S2Layer. */
 export type S2LayerProps<DataT = unknown> = _S2LayerProps<DataT> & GeoCellLayerProps<DataT>;
 /** Properties added by S2Layer. */

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

@@ -0,0 +1 @@
+{"version":3,"file":"s2-layer.d.ts","sourceRoot":"","sources":["../../src/s2-layer/s2-layer.ts"],"names":[],"mappings":"AAoBA,OAAO,EAAC,gBAAgB,EAAE,YAAY,EAAC,MAAM,eAAe,CAAC;AAC7D,OAAO,YAAY,EAAE,EAAC,iBAAiB,EAAC,0CAAuC;AAO/E,2CAA2C;AAC3C,MAAM,MAAM,YAAY,CAAC,KAAK,GAAG,OAAO,IAAI,aAAa,CAAC,KAAK,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAE5F,mCAAmC;AACnC,KAAK,aAAa,CAAC,KAAK,IAAI;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CAC9C,CAAC;AAEF,iHAAiH;AACjH,MAAM,CAAC,OAAO,OAAO,OAAO,CAAC,KAAK,GAAG,GAAG,EAAE,UAAU,SAAS,EAAE,GAAG,EAAE,CAAE,SAAQ,YAAY,CACxF,KAAK,EACL,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,GAAG,UAAU,CAC5C;IACC,MAAM,CAAC,SAAS,SAAa;IAC7B,MAAM,CAAC,YAAY,sCAAgB;IAEnC,aAAa,IAAI,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,GAAG,IAAI;CAUvD"}

package/dist/s2-layer/s2-layer.js

@@ -0,0 +1,38 @@
+// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+import GeoCellLayer from "../geo-cell-layer/GeoCellLayer.js";
+import { getS2Polygon } from "./s2-utils.js";
+const defaultProps = {
+    getS2Token: { type: 'accessor', value: (d) => d.token }
+};
+/** Render filled and/or stroked polygons based on the [S2](http://s2geometry.io/) geospatial indexing system. */
+export default class S2Layer extends GeoCellLayer {
+    static { this.layerName = 'S2Layer'; }
+    static { this.defaultProps = defaultProps; }
+    indexToBounds() {
+        const { data, getS2Token } = this.props;
+        return {
+            data,
+            _normalize: false,
+            positionFormat: 'XY',
+            getPolygon: (x, objectInfo) => getS2Polygon(getS2Token(x, objectInfo))
+        };
+    }
+}

package/dist/s2-layer/s2-utils.js

@@ -0,0 +1,87 @@
+// s2-geometry is a pure JavaScript port of Google/Niantic's S2 Geometry library
+// which is perfect since it works in the browser.
+import { toHilbertQuadkey, FromHilbertQuadKey, IJToST, STToUV, FaceUVToXYZ, XYZToLngLat } from "./s2-geometry.js";
+import Long from 'long';
+/**
+ * Given an S2 token this function convert the token to 64 bit id
+   https://github.com/google/s2-geometry-library-java/blob/c04b68bf3197a9c34082327eeb3aec7ab7c85da1/src/com/google/common/geometry/S2CellId.java#L439
+ * */
+function getIdFromToken(token) {
+    // pad token with zeros to make the length 16
+    const paddedToken = token.padEnd(16, '0');
+    return Long.fromString(paddedToken, 16);
+}
+const MAX_RESOLUTION = 100;
+/* Adapted from s2-geometry's S2Cell.getCornerLatLngs */
+/* eslint-disable max-statements */
+function getGeoBounds({ face, ij, level }) {
+    const offsets = [
+        [0, 0],
+        [0, 1],
+        [1, 1],
+        [1, 0],
+        [0, 0]
+    ];
+    // The S2 cell edge is curved: http://s2geometry.io/
+    // This is more prominent at lower levels
+    // resolution is the number of segments to generate per edge.
+    // We exponentially reduce resolution as level increases so it doesn't affect perf
+    // when there are a large number of cells
+    const resolution = Math.max(1, Math.ceil(MAX_RESOLUTION * Math.pow(2, -level)));
+    const result = new Float64Array(4 * resolution * 2 + 2);
+    let ptIndex = 0;
+    let prevLng = 0;
+    for (let i = 0; i < 4; i++) {
+        const offset = offsets[i].slice(0);
+        const nextOffset = offsets[i + 1];
+        const stepI = (nextOffset[0] - offset[0]) / resolution;
+        const stepJ = (nextOffset[1] - offset[1]) / resolution;
+        for (let j = 0; j < resolution; j++) {
+            offset[0] += stepI;
+            offset[1] += stepJ;
+            // Cell can be represented by coordinates IJ, ST, UV, XYZ
+            // http://s2geometry.io/devguide/s2cell_hierarchy#coordinate-systems
+            const st = IJToST(ij, level, offset);
+            const uv = STToUV(st);
+            const xyz = FaceUVToXYZ(face, uv);
+            const lngLat = XYZToLngLat(xyz);
+            // Adjust longitude for Web Mercator projection
+            if (Math.abs(lngLat[1]) > 89.999) {
+                lngLat[0] = prevLng;
+            }
+            const deltaLng = lngLat[0] - prevLng;
+            lngLat[0] += deltaLng > 180 ? -360 : deltaLng < -180 ? 360 : 0;
+            result[ptIndex++] = lngLat[0];
+            result[ptIndex++] = lngLat[1];
+            prevLng = lngLat[0];
+        }
+    }
+    // close the loop
+    result[ptIndex++] = result[0];
+    result[ptIndex++] = result[1];
+    return result;
+}
+/* eslint-enable max-statements */
+export function getS2QuadKey(token) {
+    if (typeof token === 'string') {
+        if (token.indexOf('/') > 0) {
+            // is Hilbert quad key
+            return token;
+        }
+        // is S2 token
+        token = getIdFromToken(token);
+    }
+    // is Long id
+    return toHilbertQuadkey(token.toString());
+}
+/**
+ * Get a polygon with corner coordinates for an s2 cell
+ * @param {*} cell - This can be an S2 key or token
+ * @return {Float64Array} - a simple polygon in flat array format: [lng0, lat0, lng1, lat1, ...]
+ *   - the polygon is closed, i.e. last coordinate is a copy of the first coordinate
+ */
+export function getS2Polygon(token) {
+    const key = getS2QuadKey(token);
+    const s2cell = FromHilbertQuadKey(key);
+    return getGeoBounds(s2cell);
+}

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

@@ -1,9 +1,9 @@
 import { Color, CompositeLayer, CompositeLayerProps, DefaultProps, Layer, LayersList, Material, TextureSource, UpdateParameters } from '@deck.gl/core';
 import { SimpleMeshLayer } from '@deck.gl/mesh-layers';
 import type { MeshAttributes } from '@loaders.gl/schema';
-import { TileLayerProps } from '../tile-layer/tile-layer';
-import type { Bounds, TileLoadProps, ZRange } from '../tileset-2d';
-import { Tile2DHeader, URLTemplate } from '../tileset-2d';
+import { TileLayerProps } from "../tile-layer/tile-layer.js";
+import type { Bounds, TileLoadProps, ZRange } from "../tileset-2d/index.js";
+import { Tile2DHeader, URLTemplate } from "../tileset-2d/index.js";
 type ElevationDecoder = {
     rScaler: number;
     gScaler: number;
@@ -49,7 +49,7 @@ export default class TerrainLayer<ExtraPropsT extends {} = {}> extends Composite
     static layerName: string;
     state: {
         isTiled?: boolean;
-        terrain: MeshAttributes;
+        terrain?: MeshAttributes;
         zRange?: ZRange | null;
     };
     updateState({ props, oldProps }: UpdateParameters<this>): void;

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

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