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

package/dist/geo-cell-layer/GeoCellLayer.js

@@ -0,0 +1,51 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { PolygonLayer } from '@deck.gl/layers';
+const defaultProps = {
+    ...PolygonLayer.defaultProps
+};
+export default class GeoCellLayer extends CompositeLayer {
+    static { this.layerName = 'GeoCellLayer'; }
+    static { this.defaultProps = defaultProps; }
+    /** Implement to generate props to create geometry. */
+    indexToBounds() {
+        return null;
+    }
+    renderLayers() {
+        // Rendering props underlying layer
+        const { elevationScale, extruded, wireframe, filled, stroked, lineWidthUnits, lineWidthScale, lineWidthMinPixels, lineWidthMaxPixels, lineJointRounded, lineMiterLimit, lineDashJustified, getElevation, getFillColor, getLineColor, getLineWidth } = this.props;
+        // Accessor props for underlying layers
+        const { updateTriggers, material, transitions } = this.props;
+        // Filled Polygon Layer
+        const CellLayer = this.getSubLayerClass('cell', PolygonLayer);
+        const { updateTriggers: boundsUpdateTriggers, ...boundsProps } = this.indexToBounds() || {};
+        return new CellLayer({
+            filled,
+            wireframe,
+            extruded,
+            elevationScale,
+            stroked,
+            lineWidthUnits,
+            lineWidthScale,
+            lineWidthMinPixels,
+            lineWidthMaxPixels,
+            lineJointRounded,
+            lineMiterLimit,
+            lineDashJustified,
+            material,
+            transitions,
+            getElevation,
+            getFillColor,
+            getLineColor,
+            getLineWidth
+        }, this.getSubLayerProps({
+            id: 'cell',
+            updateTriggers: updateTriggers && {
+                ...boundsUpdateTriggers,
+                getElevation: updateTriggers.getElevation,
+                getFillColor: updateTriggers.getFillColor,
+                getLineColor: updateTriggers.getLineColor,
+                getLineWidth: updateTriggers.getLineWidth
+            }
+        }), boundsProps);
+    }
+}

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

@@ -1,5 +1,5 @@
 import { AccessorFunction, DefaultProps } from '@deck.gl/core';
-import GeoCellLayer from '../geo-cell-layer/GeoCellLayer';
+import GeoCellLayer from "../geo-cell-layer/GeoCellLayer.js";
 /**
  * Properties of `GeohashLayer`.
  */

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

@@ -0,0 +1 @@
+{"version":3,"file":"geohash-layer.d.ts","sourceRoot":"","sources":["../../src/geohash-layer/geohash-layer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAE,YAAY,EAAC,MAAM,eAAe,CAAC;AAC7D,OAAO,YAAY,0CAAuC;AAO1D;;GAEG;AACH,KAAK,iBAAiB,CAAC,KAAK,GAAG,OAAO,IAAI;IACxC;;;;OAIG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CAC9C,CAAC;AAEF,sIAAsI;AACtI,MAAM,CAAC,OAAO,OAAO,YAAY,CAAC,KAAK,GAAG,GAAG,EAAE,UAAU,SAAS,EAAE,GAAG,EAAE,CAAE,SAAQ,YAAY,CAC7F,KAAK,EACL,QAAQ,CAAC,iBAAiB,CAAC,GAAG,UAAU,CACzC;IACC,MAAM,CAAC,SAAS,SAAkB;IAClC,MAAM,CAAC,YAAY,2CAAgB;IAEnC,aAAa,IAAI,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,GAAG,IAAI;CAUvD"}

package/dist/geohash-layer/geohash-layer.js

@@ -0,0 +1,19 @@
+import GeoCellLayer from "../geo-cell-layer/GeoCellLayer.js";
+import { getGeohashPolygon } from "./geohash-utils.js";
+const defaultProps = {
+    getGeohash: { type: 'accessor', value: (d) => d.geohash }
+};
+/** Render filled and/or stroked polygons based on the [Geohash](https://en.wikipedia.org/wiki/Geohash) geospatial indexing system. */
+export default class GeohashLayer extends GeoCellLayer {
+    static { this.layerName = 'GeohashLayer'; }
+    static { this.defaultProps = defaultProps; }
+    indexToBounds() {
+        const { data, getGeohash } = this.props;
+        return {
+            data,
+            _normalize: false,
+            positionFormat: 'XY',
+            getPolygon: (x, objectInfo) => getGeohashPolygon(getGeohash(x, objectInfo))
+        };
+    }
+}

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

@@ -0,0 +1,50 @@
+const BASE32_CODES = '0123456789bcdefghjkmnpqrstuvwxyz';
+const BASE32_CODES_DICT = {};
+for (let i = 0; i < BASE32_CODES.length; i++) {
+    BASE32_CODES_DICT[BASE32_CODES.charAt(i)] = i;
+}
+const MIN_LAT = -90;
+const MAX_LAT = 90;
+const MIN_LON = -180;
+const MAX_LON = 180;
+// Adapted from ngeohash decode_bbox
+export function getGeohashBounds(geohash) {
+    let isLon = true;
+    let maxLat = MAX_LAT;
+    let minLat = MIN_LAT;
+    let maxLon = MAX_LON;
+    let minLon = MIN_LON;
+    let mid;
+    let hashValue = 0;
+    for (let i = 0, l = geohash.length; i < l; i++) {
+        const code = geohash[i].toLowerCase();
+        hashValue = BASE32_CODES_DICT[code];
+        for (let bits = 4; bits >= 0; bits--) {
+            const bit = (hashValue >> bits) & 1;
+            if (isLon) {
+                mid = (maxLon + minLon) / 2;
+                if (bit === 1) {
+                    minLon = mid;
+                }
+                else {
+                    maxLon = mid;
+                }
+            }
+            else {
+                mid = (maxLat + minLat) / 2;
+                if (bit === 1) {
+                    minLat = mid;
+                }
+                else {
+                    maxLat = mid;
+                }
+            }
+            isLon = !isLon;
+        }
+    }
+    return [minLat, minLon, maxLat, maxLon];
+}
+export function getGeohashPolygon(geohash) {
+    const [s, w, n, e] = getGeohashBounds(geohash);
+    return [e, n, e, s, w, s, w, n, e, n];
+}

package/dist/great-circle-layer/great-circle-layer.js

@@ -0,0 +1,12 @@
+import { ArcLayer } from '@deck.gl/layers';
+const defaultProps = {
+    getHeight: { type: 'accessor', value: 0 },
+    greatCircle: true
+};
+// This layer has been merged into the core ArcLayer
+// Keeping for backward-compatibility
+/** @deprecated Use ArcLayer with `greatCircle: true` instead */
+export default class GreatCircleLayer extends ArcLayer {
+    static { this.layerName = 'GreatCircleLayer'; }
+    static { this.defaultProps = defaultProps; }
+}

package/{typed → dist}/h3-layers/h3-cluster-layer.d.ts

@@ -1,6 +1,6 @@
 import { H3IndexInput } from 'h3-js';
 import { AccessorFunction, UpdateParameters, 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 H3ClusterLayer. */
 export type H3ClusterLayerProps<DataT = unknown> = _H3ClusterLayerProps<DataT> & GeoCellLayerProps<DataT>;
 /** Properties added by H3ClusterLayer. */

package/dist/h3-layers/h3-cluster-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"h3-cluster-layer.d.ts","sourceRoot":"","sources":["../../src/h3-layers/h3-cluster-layer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,YAAY,EAAC,MAAM,OAAO,CAAC;AAExD,OAAO,EAAC,gBAAgB,EAAkB,gBAAgB,EAAE,YAAY,EAAC,MAAM,eAAe,CAAC;AAE/F,OAAO,YAAY,EAAE,EAAC,iBAAiB,EAAC,0CAAuC;AAO/E,kDAAkD;AAClD,MAAM,MAAM,mBAAmB,CAAC,KAAK,GAAG,OAAO,IAAI,oBAAoB,CAAC,KAAK,CAAC,GAC5E,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAE3B,0CAA0C;AAC1C,KAAK,oBAAoB,CAAC,KAAK,IAAI;IACjC;;;;OAIG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC;CACvD,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,cAAc,CAAC,KAAK,GAAG,GAAG,EAAE,UAAU,SAAS,EAAE,GAAG,EAAE,CAAE,SAAQ,YAAY,CAC/F,KAAK,EACL,QAAQ,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC,GAAG,UAAU,CACnD;IACC,MAAM,CAAC,SAAS,SAAoB;IACpC,MAAM,CAAC,YAAY,6CAAgB;IAEnC,KAAK,EAAG;QACN,QAAQ,EAAE;YAAC,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,CAAA;SAAC,EAAE,CAAC;KACrC,CAAC;IAEF,eAAe,IAAI,IAAI;IAIvB,WAAW,CAAC,EAAC,KAAK,EAAE,WAAW,EAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;IA2B/D,aAAa,IAAI,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;CAahD"}

package/dist/h3-layers/h3-cluster-layer.js

@@ -0,0 +1,47 @@
+import { cellsToMultiPolygon } from 'h3-js';
+import { createIterable } from '@deck.gl/core';
+import { default as H3HexagonLayer } from "./h3-hexagon-layer.js";
+import GeoCellLayer from "../geo-cell-layer/GeoCellLayer.js";
+import { normalizeLongitudes } from "./h3-utils.js";
+const defaultProps = {
+    getHexagons: { type: 'accessor', value: (d) => d.hexagons }
+};
+export default class H3ClusterLayer extends GeoCellLayer {
+    static { this.layerName = 'H3ClusterLayer'; }
+    static { this.defaultProps = defaultProps; }
+    initializeState() {
+        H3HexagonLayer._checkH3Lib();
+    }
+    updateState({ props, changeFlags }) {
+        if (changeFlags.dataChanged ||
+            (changeFlags.updateTriggersChanged && changeFlags.updateTriggersChanged.getHexagons)) {
+            const { data, getHexagons } = props;
+            const polygons = [];
+            const { iterable, objectInfo } = createIterable(data);
+            for (const object of iterable) {
+                objectInfo.index++;
+                const hexagons = getHexagons(object, objectInfo);
+                const multiPolygon = cellsToMultiPolygon(hexagons, true);
+                for (const polygon of multiPolygon) {
+                    // Normalize polygons to prevent wrapping over the anti-meridian
+                    for (const ring of polygon) {
+                        normalizeLongitudes(ring);
+                    }
+                    polygons.push(this.getSubLayerRow({ polygon }, object, objectInfo.index));
+                }
+            }
+            this.setState({ polygons });
+        }
+    }
+    indexToBounds() {
+        const { getElevation, getFillColor, getLineColor, getLineWidth } = this.props;
+        return {
+            data: this.state.polygons,
+            getPolygon: d => d.polygon,
+            getElevation: this.getSubLayerAccessor(getElevation),
+            getFillColor: this.getSubLayerAccessor(getFillColor),
+            getLineColor: this.getSubLayerAccessor(getLineColor),
+            getLineWidth: this.getSubLayerAccessor(getLineWidth)
+        };
+    }
+}

package/dist/h3-layers/h3-hexagon-layer.js

@@ -0,0 +1,204 @@
+import { getResolution, cellToLatLng, latLngToCell, isPentagon, gridDistance, getHexagonEdgeLengthAvg } from 'h3-js';
+import { CompositeLayer, createIterable } from '@deck.gl/core';
+import { ColumnLayer, PolygonLayer } from '@deck.gl/layers';
+import { flattenPolygon, getHexagonCentroid, h3ToPolygon } from "./h3-utils.js";
+// There is a cost to updating the instanced geometries when using highPrecision: false
+// This constant defines the distance between two hexagons that leads to "significant
+// distortion." Smaller value makes the column layer more sensitive to viewport change.
+const UPDATE_THRESHOLD_KM = 10;
+function mergeTriggers(getHexagon, coverage) {
+    let trigger;
+    if (getHexagon === undefined || getHexagon === null) {
+        trigger = coverage;
+    }
+    else if (typeof getHexagon === 'object') {
+        trigger = { ...getHexagon, coverage };
+    }
+    else {
+        trigger = { getHexagon, coverage };
+    }
+    return trigger;
+}
+const defaultProps = {
+    ...PolygonLayer.defaultProps,
+    highPrecision: 'auto',
+    coverage: { type: 'number', min: 0, max: 1, value: 1 },
+    centerHexagon: null,
+    getHexagon: { type: 'accessor', value: (x) => x.hexagon },
+    extruded: true
+};
+/**
+ * Render hexagons from the [H3](https://h3geo.org/) geospatial indexing system.
+ */
+export default class H3HexagonLayer extends CompositeLayer {
+    static { this.defaultProps = defaultProps; }
+    static { this.layerName = 'H3HexagonLayer'; }
+    // See `main/bundle.ts`
+    static { this._checkH3Lib = () => { }; }
+    initializeState() {
+        H3HexagonLayer._checkH3Lib();
+        this.state = {
+            edgeLengthKM: 0,
+            resolution: -1
+        };
+    }
+    shouldUpdateState({ changeFlags }) {
+        return this._shouldUseHighPrecision()
+            ? changeFlags.propsOrDataChanged
+            : changeFlags.somethingChanged;
+    }
+    updateState({ props, changeFlags }) {
+        if (props.highPrecision !== true &&
+            (changeFlags.dataChanged ||
+                (changeFlags.updateTriggersChanged && changeFlags.updateTriggersChanged.getHexagon))) {
+            const dataProps = this._calculateH3DataProps();
+            this.setState(dataProps);
+        }
+        this._updateVertices(this.context.viewport);
+    }
+    _calculateH3DataProps() {
+        let resolution = -1;
+        let hasPentagon = false;
+        let hasMultipleRes = false;
+        const { iterable, objectInfo } = createIterable(this.props.data);
+        for (const object of iterable) {
+            objectInfo.index++;
+            const hexId = this.props.getHexagon(object, objectInfo);
+            // Take the resolution of the first hex
+            const hexResolution = getResolution(hexId);
+            if (resolution < 0) {
+                resolution = hexResolution;
+                if (!this.props.highPrecision)
+                    break;
+            }
+            else if (resolution !== hexResolution) {
+                hasMultipleRes = true;
+                break;
+            }
+            if (isPentagon(hexId)) {
+                hasPentagon = true;
+                break;
+            }
+        }
+        return {
+            resolution,
+            edgeLengthKM: resolution >= 0 ? getHexagonEdgeLengthAvg(resolution, 'km') : 0,
+            hasMultipleRes,
+            hasPentagon
+        };
+    }
+    _shouldUseHighPrecision() {
+        if (this.props.highPrecision === 'auto') {
+            const { resolution, hasPentagon, hasMultipleRes } = this.state;
+            const { viewport } = this.context;
+            return (Boolean(viewport?.resolution) ||
+                hasMultipleRes ||
+                hasPentagon ||
+                (resolution >= 0 && resolution <= 5));
+        }
+        return this.props.highPrecision;
+    }
+    _updateVertices(viewport) {
+        if (this._shouldUseHighPrecision()) {
+            return;
+        }
+        const { resolution, edgeLengthKM, centerHex } = this.state;
+        if (resolution < 0) {
+            return;
+        }
+        const hex = this.props.centerHexagon || latLngToCell(viewport.latitude, viewport.longitude, resolution);
+        if (centerHex === hex) {
+            return;
+        }
+        if (centerHex) {
+            try {
+                const distance = gridDistance(centerHex, hex);
+                if (distance * edgeLengthKM < UPDATE_THRESHOLD_KM) {
+                    return;
+                }
+            }
+            catch {
+                // gridDistance throws if the distance could not be computed
+                // due to the two indexes very far apart or on opposite sides of a pentagon.
+            }
+        }
+        const { unitsPerMeter } = viewport.distanceScales;
+        let vertices = h3ToPolygon(hex);
+        const [centerLat, centerLng] = cellToLatLng(hex);
+        const [centerX, centerY] = viewport.projectFlat([centerLng, centerLat]);
+        vertices = vertices.map(p => {
+            const worldPosition = viewport.projectFlat(p);
+            return [
+                (worldPosition[0] - centerX) / unitsPerMeter[0],
+                (worldPosition[1] - centerY) / unitsPerMeter[1]
+            ];
+        });
+        this.setState({ centerHex: hex, vertices });
+    }
+    renderLayers() {
+        return this._shouldUseHighPrecision() ? this._renderPolygonLayer() : this._renderColumnLayer();
+    }
+    _getForwardProps() {
+        const { elevationScale, material, coverage, extruded, wireframe, stroked, filled, lineWidthUnits, lineWidthScale, lineWidthMinPixels, lineWidthMaxPixels, getFillColor, getElevation, getLineColor, getLineWidth, transitions, updateTriggers } = this.props;
+        return {
+            elevationScale,
+            extruded,
+            coverage,
+            wireframe,
+            stroked,
+            filled,
+            lineWidthUnits,
+            lineWidthScale,
+            lineWidthMinPixels,
+            lineWidthMaxPixels,
+            material,
+            getElevation,
+            getFillColor,
+            getLineColor,
+            getLineWidth,
+            transitions,
+            updateTriggers: {
+                getFillColor: updateTriggers.getFillColor,
+                getElevation: updateTriggers.getElevation,
+                getLineColor: updateTriggers.getLineColor,
+                getLineWidth: updateTriggers.getLineWidth
+            }
+        };
+    }
+    _renderPolygonLayer() {
+        const { data, getHexagon, updateTriggers, coverage } = this.props;
+        const SubLayerClass = this.getSubLayerClass('hexagon-cell-hifi', PolygonLayer);
+        const forwardProps = this._getForwardProps();
+        forwardProps.updateTriggers.getPolygon = mergeTriggers(updateTriggers.getHexagon, coverage);
+        return new SubLayerClass(forwardProps, this.getSubLayerProps({
+            id: 'hexagon-cell-hifi',
+            updateTriggers: forwardProps.updateTriggers
+        }), {
+            data,
+            _normalize: false,
+            _windingOrder: 'CCW',
+            positionFormat: 'XY',
+            getPolygon: (object, objectInfo) => {
+                const hexagonId = getHexagon(object, objectInfo);
+                return flattenPolygon(h3ToPolygon(hexagonId, coverage));
+            }
+        });
+    }
+    _renderColumnLayer() {
+        const { data, getHexagon, updateTriggers } = this.props;
+        const SubLayerClass = this.getSubLayerClass('hexagon-cell', ColumnLayer);
+        const forwardProps = this._getForwardProps();
+        forwardProps.updateTriggers.getPosition = updateTriggers.getHexagon;
+        return new SubLayerClass(forwardProps, this.getSubLayerProps({
+            id: 'hexagon-cell',
+            flatShading: true,
+            updateTriggers: forwardProps.updateTriggers
+        }), {
+            data,
+            diskResolution: 6, // generate an extruded hexagon as the base geometry
+            radius: 1,
+            vertices: this.state.vertices,
+            getPosition: getHexagonCentroid.bind(null, getHexagon)
+        });
+    }
+}

package/dist/h3-layers/h3-utils.js

@@ -0,0 +1,56 @@
+import { cellToBoundary, cellToLatLng } from 'h3-js';
+import { lerp } from '@math.gl/core';
+// normalize longitudes w.r.t center (refLng), when not provided first vertex
+export function normalizeLongitudes(vertices, refLng) {
+    refLng = refLng === undefined ? vertices[0][0] : refLng;
+    for (const pt of vertices) {
+        const deltaLng = pt[0] - refLng;
+        if (deltaLng > 180) {
+            pt[0] -= 360;
+        }
+        else if (deltaLng < -180) {
+            pt[0] += 360;
+        }
+    }
+}
+// scale polygon vertices w.r.t center (hexId)
+export function scalePolygon(hexId, vertices, factor) {
+    const [lat, lng] = cellToLatLng(hexId);
+    const actualCount = vertices.length;
+    // normalize with respect to center
+    normalizeLongitudes(vertices, lng);
+    // `cellToBoundary` returns same array object for first and last vertex (closed polygon),
+    // if so skip scaling the last vertex
+    const vertexCount = vertices[0] === vertices[actualCount - 1] ? actualCount - 1 : actualCount;
+    for (let i = 0; i < vertexCount; i++) {
+        vertices[i][0] = lerp(lng, vertices[i][0], factor);
+        vertices[i][1] = lerp(lat, vertices[i][1], factor);
+    }
+}
+// gets hexagon centroid
+export function getHexagonCentroid(getHexagon, object, objectInfo) {
+    const hexagonId = getHexagon(object, objectInfo);
+    const [lat, lng] = cellToLatLng(hexagonId);
+    return [lng, lat];
+}
+export function h3ToPolygon(hexId, coverage = 1) {
+    const vertices = cellToBoundary(hexId, true);
+    if (coverage !== 1) {
+        // scale and normalize vertices w.r.t to center
+        scalePolygon(hexId, vertices, coverage);
+    }
+    else {
+        // normalize w.r.t to start vertex
+        normalizeLongitudes(vertices);
+    }
+    return vertices;
+}
+export function flattenPolygon(vertices) {
+    const positions = new Float64Array(vertices.length * 2);
+    let i = 0;
+    for (const pt of vertices) {
+        positions[i++] = pt[0];
+        positions[i++] = pt[1];
+    }
+    return positions;
+}