@deck.gl/geo-layers 8.8.0-beta.1 → 8.8.0-beta.4

package/package.json

@@ -2,7 +2,7 @@
   "name": "@deck.gl/geo-layers",
   "description": "deck.gl layers supporting geospatial use cases and GIS formats",
   "license": "MIT",
-  "version": "8.8.0-beta.1",
+  "version": "8.8.0-beta.4",
   "publishConfig": {
     "access": "public"
   },
@@ -37,12 +37,13 @@
     "@loaders.gl/schema": "^3.2.0",
     "@loaders.gl/terrain": "^3.2.0",
     "@loaders.gl/tiles": "^3.2.0",
+    "@luma.gl/constants": "^8.5.14",
     "@luma.gl/experimental": "^8.5.14",
     "@math.gl/core": "^3.6.0",
     "@math.gl/culling": "^3.6.0",
     "@math.gl/web-mercator": "^3.6.0",
     "@types/geojson": "^7946.0.8",
-    "h3-js": "^3.6.0",
+    "h3-js": "^3.7.0",
     "long": "^3.2.0"
   },
   "peerDependencies": {
@@ -50,7 +51,8 @@
     "@deck.gl/extensions": "^8.0.0",
     "@deck.gl/layers": "^8.0.0",
     "@deck.gl/mesh-layers": "^8.0.0",
-    "@loaders.gl/core": "^3.0.0"
+    "@loaders.gl/core": "^3.0.0",
+    "@luma.gl/core": "^8.0.0"
   },
-  "gitHead": "1e4621a4f7422a053a74dcd8a175f9b56c273a14"
+  "gitHead": "36bc4928487797eb4f7518fd612963b0f3e744bc"
 }

package/src/geo-cell-layer/GeoCellLayer.ts

@@ -1,7 +1,7 @@
-import {CompositeLayer, CompositeLayerProps, Layer, LayersList} from '@deck.gl/core';
+import {CompositeLayer, CompositeLayerProps, Layer, LayersList, DefaultProps} from '@deck.gl/core';
 import {PolygonLayer, PolygonLayerProps} from '@deck.gl/layers';
 
-const defaultProps = {
+const defaultProps: DefaultProps<GeoCellLayerProps> = {
   ...PolygonLayer.defaultProps
 };
 

package/src/geohash-layer/geohash-layer.ts

@@ -0,0 +1,38 @@
+import {AccessorFunction} from '@deck.gl/core';
+import GeoCellLayer from '../geo-cell-layer/GeoCellLayer';
+import {getGeohashPolygon} from './geohash-utils';
+
+const defaultProps = {
+  getGeohash: {type: 'accessor', value: d => d.geohash}
+};
+
+/**
+ * Properties of `GeohashLayer`.
+ */
+type GeohashLayerProps<DataT = any> = {
+  /**
+   * Called for each data object to retrieve the geohash string identifier.
+   *
+   * By default, it reads `geohash` property of data object.
+   */
+  getGeohash?: AccessorFunction<DataT, string>;
+};
+
+export default class GeohashLayer<DataT = any, ExtraProps = {}> extends GeoCellLayer<
+  DataT,
+  Required<GeohashLayerProps> & ExtraProps
+> {
+  static layerName = 'GeohashLayer';
+  static defaultProps: any = defaultProps;
+
+  indexToBounds(): Partial<GeoCellLayer['props']> | null {
+    const {data, getGeohash} = this.props;
+
+    return {
+      data,
+      _normalize: false,
+      positionFormat: 'XY',
+      getPolygon: (x: DataT, objectInfo) => getGeohashPolygon(getGeohash(x, objectInfo))
+    };
+  }
+}

package/src/geohash-layer/geohash-utils.ts

@@ -0,0 +1,54 @@
+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: string): number[] {
+  let isLon = true;
+  let maxLat = MAX_LAT;
+  let minLat = MIN_LAT;
+  let maxLon = MAX_LON;
+  let minLon = MIN_LON;
+  let mid: number;
+
+  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: string): number[] {
+  const [s, w, n, e] = getGeohashBounds(geohash);
+
+  return [e, n, e, s, w, s, w, n, e, n];
+}

package/src/great-circle-layer/{great-circle-layer.js → great-circle-layer.ts}

@@ -17,15 +17,24 @@
 // 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 {DefaultProps} from '@deck.gl/core';
+import {ArcLayer, ArcLayerProps} from '@deck.gl/layers';
 
-import {ArcLayer} from '@deck.gl/layers';
-
-// This layer has been merged into the core ArcLayer
-// Keeping for backward-compatibility
-export default class GreatCircleLayer extends ArcLayer {}
-
-GreatCircleLayer.layerName = 'GreatCircleLayer';
-GreatCircleLayer.defaultProps = {
+const defaultProps: DefaultProps<ArcLayerProps> = {
   getHeight: {type: 'accessor', value: 0},
   greatCircle: true
 };
+
+/** All properties supported by GreatCircleLayer. */
+export type GreatCircleLayerProps<DataT = any> = ArcLayerProps<DataT>;
+
+// This layer has been merged into the core ArcLayer
+// Keeping for backward-compatibility
+/** @deprecated Use ArcLayer with `greatCircle: true` instead */
+export default class GreatCircleLayer<DataT = any, ExtraProps = {}> extends ArcLayer<
+  DataT,
+  ExtraProps
+> {
+  static layerName = 'GreatCircleLayer';
+  static defaultProps: any = defaultProps;
+}

package/src/h3-layers/h3-cluster-layer.ts

@@ -0,0 +1,65 @@
+import {h3SetToMultiPolygon, H3IndexInput} from 'h3-js';
+
+import {AccessorFunction, createIterable, UpdateParameters, DefaultProps} from '@deck.gl/core';
+import {H3HexagonLayer} from '@deck.gl/geo-layers';
+import GeoCellLayer, {GeoCellLayerProps} from '../geo-cell-layer/GeoCellLayer';
+
+const defaultProps: DefaultProps<H3ClusterLayerProps> = {
+  getHexagons: {type: 'accessor', value: d => d.hexagons}
+};
+
+/** All properties supported by H3ClusterLayer. */
+export type H3ClusterLayerProps<DataT = any> = _H3ClusterLayerProps<DataT> &
+  GeoCellLayerProps<DataT>;
+
+/** Properties added by H3ClusterLayer. */
+type _H3ClusterLayerProps<DataT> = {
+  /**
+   * Called for each data object to retrieve the hexagon identifiers.
+   *
+   * By default, it reads `hexagons` property of data object.
+   */
+  getHexagons?: AccessorFunction<DataT, H3IndexInput[]>;
+};
+
+export default class H3ClusterLayer<DataT = any, ExtraProps = {}> extends GeoCellLayer<
+  DataT,
+  Required<_H3ClusterLayerProps<DataT>> & ExtraProps
+> {
+  static layerName = 'H3ClusterLayer';
+  static defaultProps = defaultProps;
+
+  initializeState(): void {
+    H3HexagonLayer._checkH3Lib();
+  }
+
+  updateState({props, changeFlags}: UpdateParameters<this>): void {
+    if (
+      changeFlags.dataChanged ||
+      (changeFlags.updateTriggersChanged && changeFlags.updateTriggersChanged.getHexagons)
+    ) {
+      const {data, getHexagons} = props;
+      const polygons: {polygon: number[][][]}[] = [];
+
+      const {iterable, objectInfo} = createIterable(data);
+      for (const object of iterable) {
+        objectInfo.index++;
+        const hexagons = getHexagons(object, objectInfo);
+        const multiPolygon = h3SetToMultiPolygon(hexagons, true);
+
+        for (const polygon of multiPolygon) {
+          polygons.push(this.getSubLayerRow({polygon}, object, objectInfo.index));
+        }
+      }
+
+      this.setState({polygons});
+    }
+  }
+
+  indexToBounds(): Partial<GeoCellLayer['props']> {
+    return {
+      data: this.state.polygons,
+      getPolygon: d => d.polygon
+    };
+  }
+}

package/src/h3-layers/{h3-hexagon-layer.js → h3-hexagon-layer.ts}

@@ -6,11 +6,21 @@ import {
   h3IsPentagon,
   h3Distance,
   edgeLength,
-  UNITS
+  H3Index
 } from 'h3-js';
 import {lerp} from '@math.gl/core';
-import {CompositeLayer, createIterable} from '@deck.gl/core';
-import {ColumnLayer, PolygonLayer} from '@deck.gl/layers';
+import {
+  AccessorFunction,
+  CompositeLayer,
+  CompositeLayerProps,
+  createIterable,
+  Layer,
+  LayersList,
+  UpdateParameters,
+  WebMercatorViewport,
+  DefaultProps
+} from '@deck.gl/core';
+import {ColumnLayer, PolygonLayer, PolygonLayerProps} from '@deck.gl/layers';
 
 // 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
@@ -18,7 +28,7 @@ import {ColumnLayer, PolygonLayer} from '@deck.gl/layers';
 const UPDATE_THRESHOLD_KM = 10;
 
 // normalize longitudes w.r.t center (refLng), when not provided first vertex
-export function normalizeLongitudes(vertices, refLng) {
+export function normalizeLongitudes(vertices: number[][], refLng?: number): void {
   refLng = refLng === undefined ? vertices[0][0] : refLng;
   for (const pt of vertices) {
     const deltaLng = pt[0] - refLng;
@@ -31,7 +41,7 @@ export function normalizeLongitudes(vertices, refLng) {
 }
 
 // scale polygon vertices w.r.t center (hexId)
-export function scalePolygon(hexId, vertices, factor) {
+export function scalePolygon(hexId: H3Index, vertices: number[][], factor: number): void {
   const [lat, lng] = h3ToGeo(hexId);
   const actualCount = vertices.length;
 
@@ -53,7 +63,7 @@ function getHexagonCentroid(getHexagon, object, objectInfo) {
   return [lng, lat];
 }
 
-function h3ToPolygon(hexId, coverage = 1, flatten) {
+function h3ToPolygon(hexId: H3Index, coverage: number = 1): number[][] {
   const vertices = h3ToGeoBoundary(hexId, true);
 
   if (coverage !== 1) {
@@ -64,19 +74,19 @@ function h3ToPolygon(hexId, coverage = 1, flatten) {
     normalizeLongitudes(vertices);
   }
 
-  if (flatten) {
-    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;
-  }
-
   return vertices;
 }
 
+function flattenPolygon(vertices: number[][]): Float64Array {
+  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;
+}
+
 function mergeTriggers(getHexagon, coverage) {
   let trigger;
   if (getHexagon === undefined || getHexagon === null) {
@@ -89,7 +99,7 @@ function mergeTriggers(getHexagon, coverage) {
   return trigger;
 }
 
-const defaultProps = {
+const defaultProps: DefaultProps<H3HexagonLayerProps> = {
   ...PolygonLayer.defaultProps,
   highPrecision: 'auto',
   coverage: {type: 'number', min: 0, max: 1, value: 1},
@@ -98,8 +108,39 @@ const defaultProps = {
   extruded: true
 };
 
-// not supported
-delete defaultProps.getLineDashArray;
+/** All properties supported by H3HexagonLayer */
+export type H3HexagonLayerProps<DataT = any> = _H3HexagonLayerProps<DataT> &
+  PolygonLayerProps<DataT> &
+  CompositeLayerProps<DataT>;
+
+/** Props added by the H3HexagonLayer */
+type _H3HexagonLayerProps<DataT> = {
+  /**
+   * Whether or not draw hexagons with high precision.
+   * @default 'auto'
+   */
+  highPrecision?: boolean | 'auto';
+  /**
+   * Coverage of hexagon in cell.
+   * @default 1
+   */
+  coverage?: number;
+  /**
+   * Center hexagon that best represents the shape of the set. If not specified, the hexagon closest to the center of the viewport is used.
+   */
+  centerHexagon?: H3Index | null;
+  /**
+   * Called for each data object to retrieve the quadkey string identifier.
+   *
+   * By default, it reads `hexagon` property of data object.
+   */
+  getHexagon?: AccessorFunction<DataT, string>;
+  /**
+   * Whether to extrude polygons.
+   * @default true
+   */
+  extruded?: boolean;
+};
 
 /**
  * A subclass of HexagonLayer that uses H3 hexagonIds in data objects
@@ -112,40 +153,65 @@ delete defaultProps.getLineDashArray;
  * even when no corresponding hexagon is in the data set. You can check
  * index !== -1 to see if picking matches an actual object.
  */
-export default class H3HexagonLayer extends CompositeLayer {
-  shouldUpdateState({changeFlags}) {
+export default class H3HexagonLayer<DataT = any, ExtraPropsT = {}> extends CompositeLayer<
+  ExtraPropsT & Required<_H3HexagonLayerProps<DataT> & Required<PolygonLayerProps<DataT>>>
+> {
+  static defaultProps = defaultProps;
+  static layerName = 'H3HexagonLayer';
+
+  // See `main/bundle.ts`
+  static _checkH3Lib = () => {};
+
+  initializeState() {
+    H3HexagonLayer._checkH3Lib();
+    this.state = {
+      edgeLengthKM: 0,
+      resolution: -1
+    };
+  }
+
+  state!: {
+    centerHex?: H3Index;
+    edgeLengthKM: number;
+    hasMultipleRes?: boolean;
+    hasPentagon?: boolean;
+    resolution: number;
+    vertices?: number[][];
+  };
+
+  shouldUpdateState({changeFlags}: UpdateParameters<this>): boolean {
     return this._shouldUseHighPrecision()
       ? changeFlags.propsOrDataChanged
       : changeFlags.somethingChanged;
   }
 
-  updateState({props, oldProps, changeFlags}) {
+  updateState({props, changeFlags}: UpdateParameters<this>): void {
     if (
       props.highPrecision !== true &&
       (changeFlags.dataChanged ||
-        (changeFlags.updateTriggers && changeFlags.updateTriggers.getHexagon))
+        (changeFlags.updateTriggersChanged && changeFlags.updateTriggersChanged.getHexagon))
     ) {
-      const dataProps = this._calculateH3DataProps(props);
+      const dataProps = this._calculateH3DataProps();
       this.setState(dataProps);
     }
 
-    this._updateVertices(this.context.viewport);
+    this._updateVertices(this.context.viewport as WebMercatorViewport);
   }
 
-  _calculateH3DataProps(props) {
+  private _calculateH3DataProps() {
     let resolution = -1;
     let hasPentagon = false;
     let hasMultipleRes = false;
 
-    const {iterable, objectInfo} = createIterable(props.data);
+    const {iterable, objectInfo} = createIterable(this.props.data);
     for (const object of iterable) {
       objectInfo.index++;
-      const hexId = props.getHexagon(object, objectInfo);
+      const hexId = this.props.getHexagon(object, objectInfo);
       // Take the resolution of the first hex
       const hexResolution = h3GetResolution(hexId);
       if (resolution < 0) {
         resolution = hexResolution;
-        if (!props.highPrecision) break;
+        if (!this.props.highPrecision) break;
       } else if (resolution !== hexResolution) {
         hasMultipleRes = true;
         break;
@@ -158,25 +224,28 @@ export default class H3HexagonLayer extends CompositeLayer {
 
     return {
       resolution,
-      edgeLengthKM: resolution >= 0 ? edgeLength(resolution, UNITS.km) : 0,
+      edgeLengthKM: resolution >= 0 ? edgeLength(resolution, 'km') : 0,
       hasMultipleRes,
       hasPentagon
     };
   }
 
-  _shouldUseHighPrecision() {
+  private _shouldUseHighPrecision(): boolean {
     if (this.props.highPrecision === 'auto') {
       const {resolution, hasPentagon, hasMultipleRes} = this.state;
       const {viewport} = this.context;
       return (
-        viewport.resolution || hasMultipleRes || hasPentagon || (resolution >= 0 && resolution <= 5)
+        Boolean(viewport?.resolution) ||
+        hasMultipleRes ||
+        hasPentagon ||
+        (resolution >= 0 && resolution <= 5)
       );
     }
 
     return this.props.highPrecision;
   }
 
-  _updateVertices(viewport) {
+  private _updateVertices(viewport: WebMercatorViewport): void {
     if (this._shouldUseHighPrecision()) {
       return;
     }
@@ -215,11 +284,11 @@ export default class H3HexagonLayer extends CompositeLayer {
     this.setState({centerHex: hex, vertices});
   }
 
-  renderLayers() {
+  renderLayers(): Layer | null | LayersList {
     return this._shouldUseHighPrecision() ? this._renderPolygonLayer() : this._renderColumnLayer();
   }
 
-  _getForwardProps() {
+  private _getForwardProps() {
     const {
       elevationScale,
       material,
@@ -262,16 +331,22 @@ export default class H3HexagonLayer extends CompositeLayer {
         getElevation: updateTriggers.getElevation,
         getLineColor: updateTriggers.getLineColor,
         getLineWidth: updateTriggers.getLineWidth
+      } as {
+        getFillColor: any;
+        getElevation: any;
+        getLineColor: any;
+        getLineWidth: any;
+        getPolygon?: any;
+        getPosition?: any;
       }
     };
   }
 
-  _renderPolygonLayer() {
+  private _renderPolygonLayer(): PolygonLayer {
     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(
@@ -287,13 +362,13 @@ export default class H3HexagonLayer extends CompositeLayer {
         positionFormat: 'XY',
         getPolygon: (object, objectInfo) => {
           const hexagonId = getHexagon(object, objectInfo);
-          return h3ToPolygon(hexagonId, coverage, true);
+          return flattenPolygon(h3ToPolygon(hexagonId, coverage));
         }
       }
     );
   }
 
-  _renderColumnLayer() {
+  private _renderColumnLayer(): ColumnLayer {
     const {data, getHexagon, updateTriggers} = this.props;
 
     const SubLayerClass = this.getSubLayerClass('hexagon-cell', ColumnLayer);
@@ -317,6 +392,3 @@ export default class H3HexagonLayer extends CompositeLayer {
     );
   }
 }
-
-H3HexagonLayer.defaultProps = defaultProps;
-H3HexagonLayer.layerName = 'H3HexagonLayer';

package/src/index.ts

@@ -29,14 +29,21 @@ export {default as H3HexagonLayer} from './h3-layers/h3-hexagon-layer';
 export {default as Tile3DLayer} from './tile-3d-layer/tile-3d-layer';
 export {default as TerrainLayer} from './terrain-layer/terrain-layer';
 export {default as MVTLayer} from './mvt-layer/mvt-layer';
+export {default as GeohashLayer} from './geohash-layer/geohash-layer';
 
 export {getURLFromTemplate as _getURLFromTemplate} from './tile-layer/utils';
 export {default as _Tileset2D} from './tile-layer/tileset-2d';
 export {default as _Tile2DHeader} from './tile-layer/tile-2d-header';
 
 // Types
+export type {H3ClusterLayerProps} from './h3-layers/h3-cluster-layer';
+export type {H3HexagonLayerProps} from './h3-layers/h3-hexagon-layer';
+export type {GreatCircleLayerProps} from './great-circle-layer/great-circle-layer';
+export type {S2LayerProps} from './s2-layer/s2-layer';
 export type {TileLayerProps} from './tile-layer/tile-layer';
 export type {GeoBoundingBox} from './tile-layer/types';
 export type {QuadkeyLayerProps} from './quadkey-layer/quadkey-layer';
 export type {TileLoadProps as _TileLoadProps} from './tile-layer/types';
+export type {TerrainLayerProps} from './terrain-layer/terrain-layer';
+export type {Tile3DLayerProps} from './tile-3d-layer/tile-3d-layer';
 export type {MVTLayerProps} from './mvt-layer/mvt-layer';

package/src/mesh-layer/{mesh-layer-vertex.glsl.js → mesh-layer-vertex.glsl.ts}

@@ -4,7 +4,7 @@ export default `#version 300 es
 // Scale the model
 uniform float sizeScale;
 uniform bool composeModelMatrix;
-uniform bool u_pickFeatureIds;
+uniform bool pickFeatureIds;
 
 // Primitive attributes
 in vec3 positions;
@@ -39,7 +39,7 @@ void main(void) {
   vec2 uv = applyUVRegion(texCoords);
   geometry.uv = uv;
 
-  if (u_pickFeatureIds) {
+  if (pickFeatureIds) {
     geometry.pickingColor = featureIdsPickingColors;
   } else {
     geometry.pickingColor = instancePickingColors;