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

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.2",
   "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": "d9bae59d015387c547366465d75d80950c60a34e"
 }

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/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,60 @@
+import {h3SetToMultiPolygon, H3IndexInput} from 'h3-js';
+
+import {AccessorFunction, createIterable, UpdateParameters, DefaultProps} from '@deck.gl/core';
+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;
+
+  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,61 @@ 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';
+
+  initializeState() {
+    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 +220,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 +280,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 +327,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 +358,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 +388,3 @@ export default class H3HexagonLayer extends CompositeLayer {
     );
   }
 }
-
-H3HexagonLayer.defaultProps = defaultProps;
-H3HexagonLayer.layerName = 'H3HexagonLayer';

package/src/index.ts

@@ -35,6 +35,10 @@ 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';

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;

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

@@ -1,11 +1,19 @@
+import type {NumericArray} from '@math.gl/core';
 import {GLTFMaterialParser} from '@luma.gl/experimental';
 import {Model, pbr} from '@luma.gl/core';
 import GL from '@luma.gl/constants';
-import {SimpleMeshLayer} from '@deck.gl/mesh-layers';
+import type {MeshAttribute, MeshAttributes} from '@loaders.gl/schema';
+import type {UpdateParameters, DefaultProps} from '@deck.gl/core';
+import {SimpleMeshLayer, SimpleMeshLayerProps} from '@deck.gl/mesh-layers';
 
 import vs from './mesh-layer-vertex.glsl';
 import fs from './mesh-layer-fragment.glsl';
 
+export type Mesh = {
+  attributes: MeshAttributes;
+  indices?: MeshAttribute;
+};
+
 function validateGeometryAttributes(attributes) {
   const hasColorAttribute = attributes.COLOR_0 || attributes.colors;
   if (!hasColorAttribute) {
@@ -13,13 +21,34 @@ function validateGeometryAttributes(attributes) {
   }
 }
 
-const defaultProps = {
-  // PBR material object. _lighting must be pbr for this to work
+const defaultProps: DefaultProps<MeshLayerProps> = {
   pbrMaterial: {type: 'object', value: null},
   featureIds: {type: 'array', value: null, optional: true}
 };
 
-export default class _MeshLayer extends SimpleMeshLayer {
+/** All properties supported by MeshLayer. */
+export type MeshLayerProps<DataT = any> = _MeshLayerProps<DataT> & SimpleMeshLayerProps<DataT>;
+
+/** Properties added by MeshLayer. */
+type _MeshLayerProps<DataT> = {
+  /**
+   * PBR material object. _lighting must be pbr for this to work
+   */
+  pbrMaterial?: any; // TODO add type when converting Tile3DLayer
+
+  /**
+   * List of feature ids.
+   */
+  featureIds?: NumericArray | null;
+};
+
+export default class MeshLayer<DataT = any, ExtraProps = {}> extends SimpleMeshLayer<
+  DataT,
+  Required<_MeshLayerProps<DataT>> & ExtraProps
+> {
+  static layerName = 'MeshLayer';
+  static defaultProps = defaultProps;
+
   getShaders() {
     const shaders = super.getShaders();
     const modules = shaders.modules;
@@ -31,20 +60,25 @@ export default class _MeshLayer extends SimpleMeshLayer {
     const {featureIds} = this.props;
     super.initializeState();
 
+    const attributeManager = this.getAttributeManager();
     if (featureIds) {
-      this.state.attributeManager.add({
+      // 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({props, oldProps, changeFlags}) {
-    super.updateState({props, oldProps, changeFlags});
+  updateState(params: UpdateParameters<this>) {
+    super.updateState(params);
+
+    const {props, oldProps} = params;
     if (props.pbrMaterial !== oldProps.pbrMaterial) {
       this.updatePbrMaterialUniforms(props.pbrMaterial);
     }
@@ -57,14 +91,15 @@ export default class _MeshLayer extends SimpleMeshLayer {
     }
     this.state.model.setUniforms({
       // Needed for PBR (TODO: find better way to get it)
+      // eslint-disable-next-line camelcase
       u_Camera: this.state.model.getUniforms().project_uCameraPosition,
-      u_pickFeatureIds: Boolean(featureIds)
+      pickFeatureIds: Boolean(featureIds)
     });
 
     super.draw(opts);
   }
 
-  getModel(mesh) {
+  protected getModel(mesh: Mesh): Model {
     const {id, pbrMaterial} = this.props;
     const materialParser = this.parseMaterial(pbrMaterial, mesh);
     const shaders = this.getShaders();
@@ -110,7 +145,8 @@ export default class _MeshLayer extends SimpleMeshLayer {
   }
 
   calculateFeatureIdsPickingColors(attribute) {
-    const {featureIds} = this.props;
+    // 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 = [];
@@ -125,6 +161,3 @@ export default class _MeshLayer extends SimpleMeshLayer {
     attribute.value = value;
   }
 }
-
-_MeshLayer.layerName = '_MeshLayer';
-_MeshLayer.defaultProps = defaultProps;

package/src/mvt-layer/mvt-layer.ts

@@ -6,7 +6,8 @@ import {
   UpdateParameters,
   GetPickingInfoParams,
   Viewport,
-  COORDINATE_SYSTEM
+  COORDINATE_SYSTEM,
+  DefaultProps
 } from '@deck.gl/core';
 import {GeoJsonLayer, GeoJsonLayerProps} from '@deck.gl/layers';
 import {Matrix4} from '@math.gl/core';
@@ -28,9 +29,10 @@ import findIndexBinary from './find-index-binary';
 
 const WORLD_SIZE = 512;
 
-const defaultProps = {
+const defaultProps: DefaultProps<MVTLayerProps> = {
   ...GeoJsonLayer.defaultProps,
-  uniqueIdProperty: {type: 'string', value: ''},
+  onDataLoad: {type: 'function', value: null, optional: true, compare: false},
+  uniqueIdProperty: '',
   highlightedFeatureId: null,
   loaders: [MVTWorkerLoader],
   binary: true

package/src/quadkey-layer/quadkey-layer.ts

@@ -1,8 +1,8 @@
-import {AccessorFunction} from '@deck.gl/core';
+import {AccessorFunction, DefaultProps} from '@deck.gl/core';
 import GeoCellLayer, {GeoCellLayerProps} from '../geo-cell-layer/GeoCellLayer';
 import {getQuadkeyPolygon} from './quadkey-utils';
 
-const defaultProps = {
+const defaultProps: DefaultProps<QuadkeyLayerProps> = {
   getQuadkey: {type: 'accessor', value: d => d.quadkey}
 };
 
@@ -10,7 +10,7 @@ const defaultProps = {
 export type QuadkeyLayerProps<DataT = any> = _QuadkeyLayerProps<DataT> & GeoCellLayerProps<DataT>;
 
 /** Properties added by QuadkeyLayer. */
-type _QuadkeyLayerProps<DataT = any> = {
+type _QuadkeyLayerProps<DataT> = {
   /**
    * Called for each data object to retrieve the quadkey string identifier.
    *
@@ -21,10 +21,10 @@ type _QuadkeyLayerProps<DataT = any> = {
 
 export default class QuadkeyLayer<DataT = any, ExtraProps = {}> extends GeoCellLayer<
   DataT,
-  Required<_QuadkeyLayerProps> & ExtraProps
+  Required<_QuadkeyLayerProps<DataT>> & ExtraProps
 > {
   static layerName = 'QuadkeyLayer';
-  static defaultProps: any = defaultProps;
+  static defaultProps = defaultProps;
 
   indexToBounds(): Partial<GeoCellLayer['props']> | null {
     const {data, getQuadkey} = this.props;