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

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;

package/src/s2-layer/{s2-geometry.js → s2-geometry.ts}

@@ -21,24 +21,28 @@ 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) {
+export function IJToST(
+  ij: [number, number],
+  order: number,
+  offsets: [number, number]
+): [number, number] {
   const maxSize = 1 << order;
 
   return [(ij[0] + offsets[0]) / maxSize, (ij[1] + offsets[1]) / maxSize];
 }
 
-function singleSTtoUV(st) {
+function singleSTtoUV(st: number): number {
   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) {
+export function STToUV(st: [number, number]): [number, number] {
   return [singleSTtoUV(st[0]), singleSTtoUV(st[1])];
 }
 
-export function FaceUVToXYZ(face, [u, v]) {
+export function FaceUVToXYZ(face: number, [u, v]: [number, number]): [number, number, number] {
   switch (face) {
     case 0:
       return [1, u, v];
@@ -57,14 +61,14 @@ export function FaceUVToXYZ(face, [u, v]) {
   }
 }
 
-export function XYZToLngLat([x, y, z]) {
+export function XYZToLngLat([x, y, z]: [number, number, number]): [number, number] {
   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) {
+export function toHilbertQuadkey(idS: string): string {
   let bin = Long.fromString(idS, true, 10).toString(2);
 
   while (bin.length < FACE_BITS + POS_BITS) {
@@ -92,7 +96,7 @@ export function toHilbertQuadkey(idS) {
   return `${faceS}/${posS}`;
 }
 
-function rotateAndFlipQuadrant(n, point, rx, ry) {
+function rotateAndFlipQuadrant(n: number, point: [number, number], rx: number, ry: number): void {
   if (ry === 0) {
     if (rx === 1) {
       point[0] = n - 1 - point[0];
@@ -105,12 +109,16 @@ function rotateAndFlipQuadrant(n, point, rx, ry) {
   }
 }
 
-export function FromHilbertQuadKey(hilbertQuadkey) {
+export function FromHilbertQuadKey(hilbertQuadkey: string): {
+  face: number;
+  ij: [number, number];
+  level: number;
+} {
   const parts = hilbertQuadkey.split('/');
   const face = parseInt(parts[0], 10);
   const position = parts[1];
   const maxLevel = position.length;
-  const point = [0, 0];
+  const point = [0, 0] as [number, number];
   let level;
 
   for (let i = maxLevel - 1; i >= 0; i--) {

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

@@ -18,25 +18,42 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import GeoCellLayer from '../geo-cell-layer/GeoCellLayer';
+import {AccessorFunction, DefaultProps} from '@deck.gl/core';
+import GeoCellLayer, {GeoCellLayerProps} from '../geo-cell-layer/GeoCellLayer';
 import {getS2Polygon} from './s2-utils';
 
-const defaultProps = {
+const defaultProps: DefaultProps<S2LayerProps> = {
   getS2Token: {type: 'accessor', value: d => d.token}
 };
 
-export default class S2Layer extends GeoCellLayer {
-  indexToBounds() {
+/** All properties supported by S2Layer. */
+export type S2LayerProps<DataT = any> = _S2LayerProps<DataT> & GeoCellLayerProps<DataT>;
+
+/** Properties added by S2Layer. */
+type _S2LayerProps<DataT> = {
+  /**
+   * Called for each data object to retrieve the quadkey string identifier.
+   *
+   * By default, it reads `token` property of data object.
+   */
+  getS2Token?: AccessorFunction<DataT, string>;
+};
+
+export default class S2Layer<DataT = any, ExtraProps = {}> extends GeoCellLayer<
+  DataT,
+  Required<_S2LayerProps<DataT>> & ExtraProps
+> {
+  static layerName = 'S2Layer';
+  static defaultProps = defaultProps;
+
+  indexToBounds(): Partial<GeoCellLayer['props']> | null {
     const {data, getS2Token} = this.props;
 
     return {
       data,
       _normalize: false,
       positionFormat: 'XY',
-      getPolygon: (x, objectInfo) => getS2Polygon(getS2Token(x, objectInfo))
+      getPolygon: (x: DataT, objectInfo) => getS2Polygon(getS2Token(x, objectInfo))
     };
   }
 }
-
-S2Layer.layerName = 'S2Layer';
-S2Layer.defaultProps = defaultProps;

package/src/s2-layer/{s2-utils.js → s2-utils.ts}

@@ -14,7 +14,7 @@ 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) {
+function getIdFromToken(token: string): number {
   // pad token with zeros to make the length 16
   const paddedToken = token.padEnd(16, '0');
   return Long.fromString(paddedToken, 16);
@@ -24,7 +24,15 @@ const MAX_RESOLUTION = 100;
 
 /* Adapted from s2-geometry's S2Cell.getCornerLatLngs */
 /* eslint-disable max-statements */
-function getGeoBounds({face, ij, level}) {
+function getGeoBounds({
+  face,
+  ij,
+  level
+}: {
+  face: number;
+  ij: [number, number];
+  level: number;
+}): Float64Array {
   const offsets = [
     [0, 0],
     [0, 1],
@@ -44,7 +52,7 @@ function getGeoBounds({face, ij, level}) {
   let prevLng = 0;
 
   for (let i = 0; i < 4; i++) {
-    const offset = offsets[i].slice(0);
+    const offset = offsets[i].slice(0) as [number, number];
     const nextOffset = offsets[i + 1];
     const stepI = (nextOffset[0] - offset[0]) / resolution;
     const stepJ = (nextOffset[1] - offset[1]) / resolution;
@@ -78,7 +86,7 @@ function getGeoBounds({face, ij, level}) {
 }
 /* eslint-enable max-statements */
 
-export function getS2QuadKey(token) {
+export function getS2QuadKey(token: string | number): string {
   if (typeof token === 'string') {
     if (token.indexOf('/') > 0) {
       // is Hilbert quad key
@@ -94,11 +102,10 @@ export function getS2QuadKey(token) {
 /**
  * Get a polygon with corner coordinates for an s2 cell
  * @param {*} cell - This can be an S2 key or token
- * @return {Array} - a simple polygon in array format: [[lng, lat], ...]
- *   - each coordinate is an array [lng, lat]
+ * @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) {
+export function getS2Polygon(token: string | number): Float64Array {
   const key = getS2QuadKey(token);
   const s2cell = FromHilbertQuadKey(key);
 

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

@@ -18,16 +18,30 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {CompositeLayer, log} from '@deck.gl/core';
+import {
+  Color,
+  CompositeLayer,
+  CompositeLayerProps,
+  DefaultProps,
+  Layer,
+  LayersList,
+  log,
+  Material,
+  Texture,
+  UpdateParameters
+} from '@deck.gl/core';
 import {SimpleMeshLayer} from '@deck.gl/mesh-layers';
 import {COORDINATE_SYSTEM} from '@deck.gl/core';
+import type {MeshAttributes} from '@loaders.gl/schema';
 import {TerrainWorkerLoader} from '@loaders.gl/terrain';
-import TileLayer from '../tile-layer/tile-layer';
+import TileLayer, {TileLayerProps} from '../tile-layer/tile-layer';
+import Tile2DHeader from '../tile-layer/tile-2d-header';
+import {Bounds, GeoBoundingBox, TileBoundingBox, TileLoadProps, ZRange} from '../tile-layer/types';
 import {urlType, getURLFromTemplate} from '../tile-layer/utils';
 
 const DUMMY_DATA = [1];
 
-const defaultProps = {
+const defaultProps: DefaultProps<TerrainLayerProps> = {
   ...TileLayer.defaultProps,
   // Image url that encodes height data
   elevationData: urlType,
@@ -58,22 +72,72 @@ const defaultProps = {
   loaders: [TerrainWorkerLoader]
 };
 
+type URLTemplate = string | string[];
+
 // Turns array of templates into a single string to work around shallow change
-function urlTemplateToUpdateTrigger(template) {
+function urlTemplateToUpdateTrigger(template: URLTemplate | null): string {
   if (Array.isArray(template)) {
     return template.join(';');
   }
-  return template;
+  return template || '';
 }
 
-/**
- * state: {
- *   isTiled: True renders TileLayer of many SimpleMeshLayers, false renders one SimpleMeshLayer
- *   terrain: Mesh object. Only defined when isTiled is false.
- * }
- */
-export default class TerrainLayer extends CompositeLayer {
-  updateState({props, oldProps}) {
+type ElevationDecoder = {rScaler: number; gScaler: number; bScaler: number; offset: number};
+type TerrainLoadProps = {
+  bounds: Bounds;
+  elevationData: string | null;
+  elevationDecoder: ElevationDecoder;
+  meshMaxError: number;
+  signal?: AbortSignal;
+};
+
+type MeshAndTexture = [MeshAttributes | null, Texture | null];
+
+/** All properties supported by TerrainLayer */
+export type TerrainLayerProps = _TerrainLayerProps &
+  TileLayerProps<MeshAndTexture> &
+  CompositeLayerProps;
+
+/** Props added by the TerrainLayer */
+type _TerrainLayerProps = {
+  /** Image url that encodes height data. **/
+  elevationData: URLTemplate;
+
+  /** Image url to use as texture. **/
+  texture?: URLTemplate | null;
+
+  /** Martini error tolerance in meters, smaller number -> more detailed mesh. **/
+  meshMaxError?: number;
+
+  /** Bounding box of the terrain image, [minX, minY, maxX, maxY] in world coordinates. **/
+  bounds?: Bounds | null;
+
+  /** Color to use if texture is unavailable. **/
+  color?: Color;
+
+  /** Object to decode height data, from (r, g, b) to height in meters. **/
+  elevationDecoder?: ElevationDecoder;
+
+  /** Whether to render the mesh in wireframe mode. **/
+  wireframe?: boolean;
+
+  /** Material props for lighting effect. **/
+  material?: Material;
+};
+
+export default class TerrainLayer<ExtraPropsT = {}> extends CompositeLayer<
+  ExtraPropsT & Required<_TerrainLayerProps & Required<TileLayerProps<MeshAndTexture>>>
+> {
+  static defaultProps = defaultProps;
+  static layerName = 'TerrainLayer';
+
+  state!: {
+    isTiled?: boolean;
+    terrain: MeshAttributes;
+    zRange?: ZRange | null;
+  };
+
+  updateState({props, oldProps}: UpdateParameters<this>): void {
     const elevationDataChanged = props.elevationData !== oldProps.elevationData;
     if (elevationDataChanged) {
       const {elevationData} = props;
@@ -92,17 +156,25 @@ export default class TerrainLayer extends CompositeLayer {
       props.bounds !== oldProps.bounds;
 
     if (!this.state.isTiled && shouldReload) {
-      const terrain = this.loadTerrain(props);
+      // When state.isTiled, elevationData cannot be an array
+      const terrain = this.loadTerrain(props as TerrainLoadProps);
       this.setState({terrain});
     }
 
     // TODO - remove in v9
+    // @ts-ignore
     if (props.workerUrl) {
       log.removed('workerUrl', 'loadOptions.terrain.workerUrl')();
     }
   }
 
-  loadTerrain({elevationData, bounds, elevationDecoder, meshMaxError, signal}) {
+  loadTerrain({
+    elevationData,
+    bounds,
+    elevationDecoder,
+    meshMaxError,
+    signal
+  }: TerrainLoadProps): Promise<MeshAttributes> | null {
     if (!elevationData) {
       return null;
     }
@@ -121,20 +193,25 @@ export default class TerrainLayer extends CompositeLayer {
     return fetch(elevationData, {propName: 'elevationData', layer: this, loadOptions, signal});
   }
 
-  getTiledTerrainData(tile) {
+  getTiledTerrainData(tile: TileLoadProps): Promise<MeshAndTexture> {
     const {elevationData, fetch, texture, elevationDecoder, meshMaxError} = this.props;
     const {viewport} = this.context;
     const dataUrl = getURLFromTemplate(elevationData, tile);
-    const textureUrl = getURLFromTemplate(texture, tile);
+    const textureUrl = texture && getURLFromTemplate(texture, tile);
 
-    const {bbox, signal} = tile;
-    const bottomLeft = viewport.isGeospatial
-      ? viewport.projectFlat([bbox.west, bbox.south])
-      : [bbox.left, bbox.bottom];
-    const topRight = viewport.isGeospatial
-      ? viewport.projectFlat([bbox.east, bbox.north])
-      : [bbox.right, bbox.top];
-    const bounds = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]];
+    const {signal} = tile;
+    let bottomLeft = [0, 0] as [number, number];
+    let topRight = [0, 0] as [number, number];
+    if (viewport.isGeospatial) {
+      const bbox = tile.bbox as GeoBoundingBox;
+      bottomLeft = viewport.projectFlat([bbox.west, bbox.south]);
+      topRight = viewport.projectFlat([bbox.east, bbox.north]);
+    } else {
+      const bbox = tile.bbox as Exclude<TileBoundingBox, GeoBoundingBox>;
+      bottomLeft = [bbox.left, bbox.bottom];
+      topRight = [bbox.right, bbox.top];
+    }
+    const bounds: Bounds = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]];
 
     const terrain = this.loadTerrain({
       elevationData: dataUrl,
@@ -151,9 +228,17 @@ export default class TerrainLayer extends CompositeLayer {
     return Promise.all([terrain, surface]);
   }
 
-  renderSubLayers(props) {
+  renderSubLayers(
+    props: TileLayerProps<MeshAndTexture> & {
+      id: string;
+      data: MeshAndTexture;
+      tile: Tile2DHeader<MeshAndTexture>;
+    }
+  ) {
     const SubLayerClass = this.getSubLayerClass('mesh', SimpleMeshLayer);
-    const {data, color} = props;
+
+    const {color, wireframe, material} = this.props;
+    const {data} = props;
 
     if (!data) {
       return null;
@@ -168,12 +253,14 @@ export default class TerrainLayer extends CompositeLayer {
       _instanced: false,
       coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
       getPosition: d => [0, 0, 0],
-      getColor: color
+      getColor: color,
+      wireframe,
+      material
     });
   }
 
   // Update zRange of viewport
-  onViewportLoad(tiles) {
+  onViewportLoad(tiles?: Tile2DHeader<MeshAndTexture>[]): void {
     if (!tiles) {
       return;
     }
@@ -183,6 +270,7 @@ export default class TerrainLayer extends CompositeLayer {
       .map(tile => tile.content)
       .filter(Boolean)
       .map(arr => {
+        // @ts-ignore
         const bounds = arr[0].header.boundingBox;
         return bounds.map(bound => bound[2]);
       });
@@ -197,7 +285,7 @@ export default class TerrainLayer extends CompositeLayer {
     }
   }
 
-  renderLayers() {
+  renderLayers(): Layer | null | LayersList {
     const {
       color,
       material,
@@ -220,14 +308,11 @@ export default class TerrainLayer extends CompositeLayer {
     } = this.props;
 
     if (this.state.isTiled) {
-      return new TileLayer(
+      return new TileLayer<MeshAndTexture>(
         this.getSubLayerProps({
           id: 'tiles'
         }),
         {
-          wireframe,
-          color,
-          material,
           getTileData: this.getTiledTerrainData.bind(this),
           renderSubLayers: this.renderSubLayers.bind(this),
           updateTriggers: {
@@ -273,6 +358,3 @@ export default class TerrainLayer extends CompositeLayer {
     );
   }
 }
-
-TerrainLayer.layerName = 'TerrainLayer';
-TerrainLayer.defaultProps = defaultProps;