@deck.gl/geo-layers 8.8.0-alpha.5 → 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-alpha.5",
+  "version": "8.8.0-beta.2",
   "publishConfig": {
     "access": "public"
   },
@@ -30,19 +30,20 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env.dev"
   },
   "dependencies": {
-    "@loaders.gl/3d-tiles": "^3.2.0-alpha.4",
-    "@loaders.gl/gis": "^3.2.0-alpha.4",
-    "@loaders.gl/loader-utils": "^3.2.0-alpha.4",
-    "@loaders.gl/mvt": "^3.2.0-alpha.4",
-    "@loaders.gl/schema": "^3.2.0-alpha.4",
-    "@loaders.gl/terrain": "^3.2.0-alpha.4",
-    "@loaders.gl/tiles": "^3.2.0-alpha.4",
-    "@luma.gl/experimental": "^8.5.13",
-    "@math.gl/core": "3.6.0-alpha.5",
-    "@math.gl/culling": "3.6.0-alpha.5",
-    "@math.gl/web-mercator": "3.6.0-alpha.5",
+    "@loaders.gl/3d-tiles": "^3.2.0",
+    "@loaders.gl/gis": "^3.2.0",
+    "@loaders.gl/loader-utils": "^3.2.0",
+    "@loaders.gl/mvt": "^3.2.0",
+    "@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": "a5e210f62321ab78b7cacbcd0614e0ffcdf6bca7"
+  "gitHead": "d9bae59d015387c547366465d75d80950c60a34e"
 }

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

@@ -1,11 +1,12 @@
-import {CompositeLayer, 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
 };
 
-export type GeoCellLayerProps<DataT = any> = PolygonLayerProps<DataT>;
+/** All properties supported by GeoCellLayer. */
+export type GeoCellLayerProps<DataT = any> = PolygonLayerProps<DataT> & CompositeLayerProps<DataT>;
 
 export default class GeoCellLayer<DataT = any, ExtraProps = {}> extends CompositeLayer<
   Required<GeoCellLayerProps<DataT>> & ExtraProps

package/src/great-circle-layer/great-circle-layer.ts

@@ -0,0 +1,40 @@
+// 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 {DefaultProps} from '@deck.gl/core';
+import {ArcLayer, ArcLayerProps} from '@deck.gl/layers';
+
+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,7 +35,12 @@ 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 {MVTLayerProps} from './mvt-layer/mvt-layer';

package/src/mesh-layer/mesh-layer-vertex.glsl.ts

@@ -0,0 +1,80 @@
+export default `#version 300 es
+#define SHADER_NAME simple-mesh-layer-vs
+
+// Scale the model
+uniform float sizeScale;
+uniform bool composeModelMatrix;
+uniform bool pickFeatureIds;
+
+// Primitive attributes
+in vec3 positions;
+in vec3 normals;
+in vec3 colors;
+in vec2 texCoords;
+in vec4 uvRegions;
+in vec3 featureIdsPickingColors;
+
+// Instance attributes
+in vec4 instanceColors;
+in vec3 instancePickingColors;
+in mat3 instanceModelMatrix;
+
+// Outputs to fragment shader
+out vec2 vTexCoord;
+out vec3 cameraPosition;
+out vec3 normals_commonspace;
+out vec4 position_commonspace;
+out vec4 vColor;
+
+vec2 applyUVRegion(vec2 uv) {
+  #ifdef HAS_UV_REGIONS
+    // https://github.com/Esri/i3s-spec/blob/master/docs/1.7/geometryUVRegion.cmn.md
+    return fract(uv) * (uvRegions.zw - uvRegions.xy) + uvRegions.xy;
+  #else
+    return uv;
+  #endif
+}
+
+void main(void) {
+  vec2 uv = applyUVRegion(texCoords);
+  geometry.uv = uv;
+
+  if (pickFeatureIds) {
+    geometry.pickingColor = featureIdsPickingColors;
+  } else {
+    geometry.pickingColor = instancePickingColors;
+  }
+
+  vTexCoord = uv;
+  cameraPosition = project_uCameraPosition;
+  vColor = vec4(colors * instanceColors.rgb, instanceColors.a);
+
+  vec3 pos = (instanceModelMatrix * positions) * sizeScale;
+  vec3 projectedPosition = project_position(positions);
+  position_commonspace = vec4(projectedPosition, 1.0);
+  gl_Position = project_common_position_to_clipspace(position_commonspace);
+
+  geometry.position = position_commonspace;
+  normals_commonspace = project_normal(instanceModelMatrix * normals);
+  geometry.normal = normals_commonspace;
+
+  DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
+
+  #ifdef MODULE_PBR
+    // set PBR data
+    pbr_vPosition = geometry.position.xyz;
+    #ifdef HAS_NORMALS
+      pbr_vNormal = geometry.normal;
+    #endif
+
+    #ifdef HAS_UV
+      pbr_vUV = uv;
+    #else
+      pbr_vUV = vec2(0., 0.);
+    #endif
+    geometry.uv = pbr_vUV;
+  #endif
+
+  DECKGL_FILTER_COLOR(vColor, geometry);
+}
+`;

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;