@deck.gl/geo-layers 8.9.0-beta.1 → 8.9.0-beta.3

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.9.0-beta.1",
+  "version": "8.9.0-beta.3",
   "publishConfig": {
     "access": "public"
   },
@@ -30,17 +30,19 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@loaders.gl/3d-tiles": "^3.3.0-alpha.10",
-    "@loaders.gl/gis": "^3.3.0-alpha.10",
-    "@loaders.gl/loader-utils": "^3.3.0-alpha.10",
-    "@loaders.gl/mvt": "^3.3.0-alpha.10",
-    "@loaders.gl/schema": "^3.3.0-alpha.10",
-    "@loaders.gl/terrain": "^3.3.0-alpha.10",
-    "@loaders.gl/tiles": "^3.3.0-alpha.10",
+    "@loaders.gl/3d-tiles": "^3.3.1",
+    "@loaders.gl/gis": "^3.3.1",
+    "@loaders.gl/loader-utils": "^3.3.1",
+    "@loaders.gl/mvt": "^3.3.1",
+    "@loaders.gl/schema": "^3.3.1",
+    "@loaders.gl/terrain": "^3.3.1",
+    "@loaders.gl/tiles": "^3.3.1",
+    "@loaders.gl/wms": "^3.3.1",
     "@luma.gl/constants": "^8.5.16",
     "@luma.gl/experimental": "^8.5.16",
     "@math.gl/core": "^3.6.2",
     "@math.gl/culling": "^3.6.2",
+    "@math.gl/proj4": "^3.6.3",
     "@math.gl/web-mercator": "^3.6.2",
     "@types/geojson": "^7946.0.8",
     "h3-js": "^3.7.0",
@@ -51,8 +53,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.3.0",
     "@luma.gl/core": "^8.0.0"
   },
-  "gitHead": "47223d1ea084c3f9b0c9f0f9736682850bb5db85"
+  "gitHead": "da509f9b00415a8d0700951663b65b59077c0cae"
 }

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

@@ -8,11 +8,11 @@ const defaultProps: DefaultProps<GeoCellLayerProps> = {
 /** All properties supported by GeoCellLayer. */
 export type GeoCellLayerProps<DataT = any> = PolygonLayerProps<DataT> & CompositeLayerProps<DataT>;
 
-export default class GeoCellLayer<DataT = any, ExtraProps = {}> extends CompositeLayer<
+export default class GeoCellLayer<DataT = any, ExtraProps extends {} = {}> extends CompositeLayer<
   Required<GeoCellLayerProps<DataT>> & ExtraProps
 > {
   static layerName = 'GeoCellLayer';
-  static defaultProps = defaultProps;
+  static defaultProps: DefaultProps = defaultProps;
 
   /** Implement to generate props to create geometry. */
   indexToBounds(): Partial<GeoCellLayer['props']> | null {

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

@@ -1,8 +1,8 @@
-import {AccessorFunction} from '@deck.gl/core';
+import {AccessorFunction, DefaultProps} from '@deck.gl/core';
 import GeoCellLayer from '../geo-cell-layer/GeoCellLayer';
 import {getGeohashPolygon} from './geohash-utils';
 
-const defaultProps = {
+const defaultProps: DefaultProps<GeohashLayerProps> = {
   getGeohash: {type: 'accessor', value: d => d.geohash}
 };
 
@@ -19,12 +19,12 @@ type GeohashLayerProps<DataT = any> = {
 };
 
 /** Render filled and/or stroked polygons based on the [Geohash](https://en.wikipedia.org/wiki/Geohash) geospatial indexing system. */
-export default class GeohashLayer<DataT = any, ExtraProps = {}> extends GeoCellLayer<
+export default class GeohashLayer<DataT = any, ExtraProps extends {} = {}> extends GeoCellLayer<
   DataT,
   Required<GeohashLayerProps> & ExtraProps
 > {
   static layerName = 'GeohashLayer';
-  static defaultProps: any = defaultProps;
+  static defaultProps = defaultProps;
 
   indexToBounds(): Partial<GeoCellLayer['props']> | null {
     const {data, getGeohash} = this.props;

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

@@ -31,10 +31,10 @@ 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<
+export default class GreatCircleLayer<DataT = any, ExtraProps extends {} = {}> extends ArcLayer<
   DataT,
   ExtraProps
 > {
   static layerName = 'GreatCircleLayer';
-  static defaultProps: any = defaultProps;
+  static defaultProps = defaultProps;
 }

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

@@ -22,7 +22,7 @@ type _H3ClusterLayerProps<DataT> = {
   getHexagons?: AccessorFunction<DataT, H3IndexInput[]>;
 };
 
-export default class H3ClusterLayer<DataT = any, ExtraProps = {}> extends GeoCellLayer<
+export default class H3ClusterLayer<DataT = any, ExtraProps extends {} = {}> extends GeoCellLayer<
   DataT,
   Required<_H3ClusterLayerProps<DataT>> & ExtraProps
 > {

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

@@ -145,7 +145,10 @@ type _H3HexagonLayerProps<DataT> = {
 /**
  * Render hexagons from the [H3](https://h3geo.org/) geospatial indexing system.
  */
-export default class H3HexagonLayer<DataT = any, ExtraPropsT = {}> extends CompositeLayer<
+export default class H3HexagonLayer<
+  DataT = any,
+  ExtraPropsT extends {} = {}
+> extends CompositeLayer<
   ExtraPropsT & Required<_H3HexagonLayerProps<DataT> & Required<PolygonLayerProps<DataT>>>
 > {
   static defaultProps = defaultProps;

package/src/index.ts

@@ -19,6 +19,7 @@
 // THE SOFTWARE.
 /* eslint-disable max-len */
 
+export {WMSLayer as _WMSLayer} from './wms-layer/wms-layer';
 export {default as GreatCircleLayer} from './great-circle-layer/great-circle-layer';
 export {default as S2Layer} from './s2-layer/s2-layer';
 export {default as QuadkeyLayer} from './quadkey-layer/quadkey-layer';
@@ -34,6 +35,7 @@ export {default as GeohashLayer} from './geohash-layer/geohash-layer';
 export {default as _GeoCellLayer} from './geo-cell-layer/GeoCellLayer';
 
 // Types
+export type {WMSLayerProps} from './wms-layer/wms-layer';
 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';

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

@@ -42,7 +42,7 @@ type _MeshLayerProps<DataT> = {
   featureIds?: NumericArray | null;
 };
 
-export default class MeshLayer<DataT = any, ExtraProps = {}> extends SimpleMeshLayer<
+export default class MeshLayer<DataT = any, ExtraProps extends {} = {}> extends SimpleMeshLayer<
   DataT,
   Required<_MeshLayerProps<DataT>> & ExtraProps
 > {

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

@@ -93,10 +93,10 @@ export type _MVTLayerProps = {
 type ContentWGS84Cache = {_contentWGS84?: Feature[]};
 
 /** Render data formatted as [Mapbox Vector Tiles](https://docs.mapbox.com/vector-tiles/specification/). */
-export default class MVTLayer<DataT extends Feature = Feature, ExtraProps = {}> extends TileLayer<
-  ParsedMvtTile,
-  Required<_MVTLayerProps> & ExtraProps
-> {
+export default class MVTLayer<
+  DataT extends Feature = Feature,
+  ExtraProps extends {} = {}
+> extends TileLayer<ParsedMvtTile, Required<_MVTLayerProps> & ExtraProps> {
   static layerName = 'MVTLayer';
   static defaultProps = defaultProps;
 

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

@@ -20,7 +20,7 @@ type _QuadkeyLayerProps<DataT> = {
 };
 
 /** Render filled and/or stroked polygons based on the [Quadkey](https://towardsdatascience.com/geospatial-indexing-with-quadkeys-d933dff01496) geospatial indexing system. */
-export default class QuadkeyLayer<DataT = any, ExtraProps = {}> extends GeoCellLayer<
+export default class QuadkeyLayer<DataT = any, ExtraProps extends {} = {}> extends GeoCellLayer<
   DataT,
   Required<_QuadkeyLayerProps<DataT>> & ExtraProps
 > {

package/src/s2-layer/s2-layer.ts

@@ -40,7 +40,7 @@ type _S2LayerProps<DataT> = {
 };
 
 /** Render filled and/or stroked polygons based on the [S2](http://s2geometry.io/) geospatial indexing system. */
-export default class S2Layer<DataT = any, ExtraProps = {}> extends GeoCellLayer<
+export default class S2Layer<DataT = any, ExtraProps extends {} = {}> extends GeoCellLayer<
   DataT,
   Required<_S2LayerProps<DataT>> & ExtraProps
 > {

package/src/terrain-layer/terrain-layer.ts

@@ -36,7 +36,7 @@ import type {MeshAttributes} from '@loaders.gl/schema';
 import {TerrainWorkerLoader} from '@loaders.gl/terrain';
 import TileLayer, {TileLayerProps} from '../tile-layer/tile-layer';
 import type {Bounds, GeoBoundingBox, TileBoundingBox, TileLoadProps, ZRange} from '../tileset-2d';
-import {Tile2DHeader, urlType, getURLFromTemplate} from '../tileset-2d';
+import {Tile2DHeader, urlType, getURLFromTemplate, URLTemplate} from '../tileset-2d';
 
 const DUMMY_DATA = [1];
 
@@ -63,7 +63,7 @@ const defaultProps: DefaultProps<TerrainLayerProps> = {
     }
   },
   // Supply url to local terrain worker bundle. Only required if running offline and cannot access CDN.
-  workerUrl: {type: 'string', value: null},
+  workerUrl: '',
   // Same as SimpleMeshLayer wireframe
   wireframe: false,
   material: true,
@@ -71,10 +71,8 @@ const defaultProps: DefaultProps<TerrainLayerProps> = {
   loaders: [TerrainWorkerLoader]
 };
 
-type URLTemplate = string | string[];
-
 // Turns array of templates into a single string to work around shallow change
-function urlTemplateToUpdateTrigger(template: URLTemplate | null): string {
+function urlTemplateToUpdateTrigger(template: URLTemplate): string {
   if (Array.isArray(template)) {
     return template.join(';');
   }
@@ -103,7 +101,7 @@ type _TerrainLayerProps = {
   elevationData: URLTemplate;
 
   /** Image url to use as texture. **/
-  texture?: URLTemplate | null;
+  texture?: URLTemplate;
 
   /** Martini error tolerance in meters, smaller number -> more detailed mesh. **/
   meshMaxError?: number;
@@ -122,10 +120,15 @@ type _TerrainLayerProps = {
 
   /** Material props for lighting effect. **/
   material?: Material;
+
+  /**
+   * @deprecated Use `loadOptions.terrain.workerUrl` instead
+   */
+  workerUrl?: string;
 };
 
 /** Render mesh surfaces from height map images. */
-export default class TerrainLayer<ExtraPropsT = {}> extends CompositeLayer<
+export default class TerrainLayer<ExtraPropsT extends {} = {}> extends CompositeLayer<
   ExtraPropsT & Required<_TerrainLayerProps & Required<TileLayerProps<MeshAndTexture>>>
 > {
   static defaultProps = defaultProps;

package/src/tile-3d-layer/tile-3d-layer.ts

@@ -76,10 +76,10 @@ type _Tile3DLayerProps<DataT> = {
 };
 
 /** Render 3d tiles data formatted according to the [3D Tiles Specification](https://www.opengeospatial.org/standards/3DTiles) and [`ESRI I3S`](https://github.com/Esri/i3s-spec) */
-export default class Tile3DLayer<DataT = any, ExtraPropsT = {}> extends CompositeLayer<
+export default class Tile3DLayer<DataT = any, ExtraPropsT extends {} = {}> extends CompositeLayer<
   ExtraPropsT & Required<_Tile3DLayerProps<DataT>>
 > {
-  static defaultProps = defaultProps as any;
+  static defaultProps = defaultProps;
   static layerName = 'Tile3DLayer';
 
   state!: {
@@ -148,14 +148,11 @@ export default class Tile3DLayer<DataT = any, ExtraPropsT = {}> extends Composit
   }
 
   getPickingInfo({info, sourceLayer}: GetPickingInfoParams) {
-    const {layerMap} = this.state;
-    const layerId = sourceLayer && sourceLayer.id;
-    if (layerId) {
-      // layerId: this.id-[scenegraph|pointcloud]-tileId
-      const substr = layerId.substring(this.id.length + 1);
-      const tileId = substr.substring(substr.indexOf('-') + 1);
-      info.object = layerMap[tileId] && layerMap[tileId].tile;
+    const sourceTile = sourceLayer && (sourceLayer.props as any).tile;
+    if (info.picked) {
+      info.object = sourceTile;
     }
+    (info as any).sourceTile = sourceTile;
 
     return info;
   }
@@ -168,8 +165,10 @@ export default class Tile3DLayer<DataT = any, ExtraPropsT = {}> extends Composit
   }
 
   protected _updateAutoHighlight(info: PickingInfo): void {
-    if (info.sourceLayer) {
-      info.sourceLayer.updateAutoHighlight(info);
+    const sourceTile = (info as any).sourceTile;
+    const layerCache = this.state.layerMap[sourceTile?.id];
+    if (layerCache && layerCache.layer) {
+      layerCache.layer.updateAutoHighlight(info);
     }
   }
 

package/src/tile-layer/tile-layer.ts

@@ -26,7 +26,7 @@ import {urlType, getURLFromTemplate} from '../tileset-2d';
 const defaultProps: DefaultProps<TileLayerProps> = {
   TilesetClass: Tileset2D,
   data: {type: 'data', value: []},
-  dataComparator: urlType.equals,
+  dataComparator: urlType.equal,
   renderSubLayers: {type: 'function', value: props => new GeoJsonLayer(props), compare: false},
   getTileData: {type: 'function', optional: true, value: null, compare: false},
   // TODO - change to onViewportLoad to align with Tile3DLayer
@@ -146,10 +146,10 @@ export type TiledPickingInfo<DataT = any> = PickingInfo & {
  *
  * Instead of fetching the entire dataset, it only loads and renders what's visible in the current viewport.
  */
-export default class TileLayer<DataT = any, ExtraPropsT = {}> extends CompositeLayer<
+export default class TileLayer<DataT = any, ExtraPropsT extends {} = {}> extends CompositeLayer<
   ExtraPropsT & Required<_TileLayerProps<DataT>>
 > {
-  static defaultProps = defaultProps as any;
+  static defaultProps: DefaultProps = defaultProps;
   static layerName = 'TileLayer';
 
   initializeState() {
@@ -315,15 +315,20 @@ export default class TileLayer<DataT = any, ExtraPropsT = {}> extends CompositeL
   }
 
   getPickingInfo({info, sourceLayer}: GetPickingInfoParams): TiledPickingInfo<DataT> {
+    const sourceTile = (sourceLayer as any).props.tile;
     if (info.picked) {
-      (info as any).tile = (sourceLayer as any).props.tile;
+      (info as any).tile = sourceTile;
     }
+    (info as any).sourceTile = sourceTile;
     return info;
   }
 
   protected _updateAutoHighlight(info: PickingInfo): void {
-    if (info.sourceLayer) {
-      info.sourceLayer.updateAutoHighlight(info);
+    const sourceTile = (info as any).sourceTile as Tile2DHeader;
+    if (sourceTile && sourceTile.layers) {
+      for (const layer of sourceTile.layers) {
+        layer.updateAutoHighlight(info);
+      }
     }
   }
 

package/src/tileset-2d/index.ts

@@ -14,6 +14,7 @@ export {Tileset2D, STRATEGY_DEFAULT} from './tileset-2d';
 
 export {Tile2DHeader} from './tile-2d-header';
 
+export type {URLTemplate} from './utils';
 export {
   isGeoBoundingBox,
   isURLTemplate,

package/src/tileset-2d/tileset-2d.ts

@@ -277,6 +277,7 @@ export class Tileset2D {
     return this._frameNumber;
   }
 
+  // eslint-disable-next-line complexity
   isTileVisible(
     tile: Tile2DHeader,
     cullRect?: {x: number; y: number; width: number; height: number}

package/src/tileset-2d/utils.ts

@@ -6,14 +6,16 @@ import {Bounds, GeoBoundingBox, TileBoundingBox, TileIndex, ZRange} from './type
 const TILE_SIZE = 512;
 const DEFAULT_EXTENT: Bounds = [-Infinity, -Infinity, Infinity, Infinity];
 
+export type URLTemplate = string | string[] | null;
+
 export const urlType = {
-  type: 'url',
-  value: null,
+  type: 'object' as const,
+  value: null as URLTemplate,
   validate: (value, propType) =>
     (propType.optional && value === null) ||
     typeof value === 'string' ||
     (Array.isArray(value) && value.every(url => typeof url === 'string')),
-  equals: (value1, value2) => {
+  equal: (value1, value2) => {
     if (value1 === value2) {
       return true;
     }
@@ -62,7 +64,7 @@ function stringHash(s: string): number {
 }
 
 export function getURLFromTemplate(
-  template: string | string[],
+  template: URLTemplate,
   tile: {
     index: TileIndex;
     id: string;

package/src/trips-layer/trips-layer.ts

@@ -56,7 +56,7 @@ type _TripsLayerProps<DataT = any> = {
 };
 
 /** Render animated paths that represent vehicle trips. */
-export default class TripsLayer<DataT = any, ExtraProps = {}> extends PathLayer<
+export default class TripsLayer<DataT = any, ExtraProps extends {} = {}> extends PathLayer<
   DataT,
   Required<_TripsLayerProps> & ExtraProps
 > {

package/src/wms-layer/wms-layer.ts

@@ -0,0 +1,246 @@
+// deck.gl, MIT license
+// Attributions:
+// Copyright 2022 Foursquare Labs, Inc.
+
+/* eslint-disable camelcase */ // Some WMS parameters are not in camel case
+/* global setTimeout, clearTimeout */
+
+import {
+  Layer,
+  CompositeLayer,
+  CompositeLayerProps,
+  UpdateParameters,
+  DefaultProps,
+  Viewport,
+  COORDINATE_SYSTEM,
+  _deepEqual as deepEqual
+} from '@deck.gl/core';
+import {BitmapLayer} from '@deck.gl/layers';
+import type {ImageSourceMetadata, ImageType, ImageServiceType} from '@loaders.gl/wms';
+import {ImageSource, createImageSource} from '@loaders.gl/wms';
+import {Proj4Projection} from '@math.gl/proj4';
+
+/** All props supported by the TileLayer */
+export type WMSLayerProps = CompositeLayerProps<any> & _WMSLayerProps;
+
+/** Props added by the TileLayer */
+type _WMSLayerProps = {
+  serviceType?: ImageServiceType | 'auto';
+  layers?: string[];
+  srs?: 'EPSG:4326' | 'EPSG:3857' | 'auto';
+  onMetadataLoad?: (metadata: ImageSourceMetadata) => void;
+  onMetadataLoadError?: (error: Error) => void;
+  onImageLoadStart?: (requestId: unknown) => void;
+  onImageLoad?: (requestId: unknown) => void;
+  onImageLoadError?: (requestId: unknown, error: Error) => void;
+};
+
+const defaultProps: DefaultProps<WMSLayerProps> = {
+  id: 'imagery-layer',
+  data: '',
+  serviceType: 'auto',
+  srs: 'auto',
+  layers: {type: 'array', compare: true, value: []},
+  onMetadataLoad: {type: 'function', compare: false, value: () => {}},
+  // eslint-disable-next-line
+  onMetadataLoadError: {type: 'function', compare: false, value: console.error},
+  onImageLoadStart: {type: 'function', compare: false, value: () => {}},
+  onImageLoad: {type: 'function', compare: false, value: () => {}},
+  onImageLoadError: {
+    type: 'function',
+    compare: false,
+    // eslint-disable-next-line
+    value: (requestId: unknown, error: Error) => console.error(error, requestId)
+  }
+};
+
+const projConverter = new Proj4Projection({from: 'EPSG:4326', to: 'EPSG:3857'});
+
+/**
+ * The layer is used in Hex Tile layer in order to properly discard invisible elements during animation
+ */
+export class WMSLayer<ExtraPropsT extends {} = {}> extends CompositeLayer<
+  ExtraPropsT & Required<_WMSLayerProps>
+> {
+  static layerName = 'WMSLayer';
+  static defaultProps: DefaultProps = defaultProps;
+
+  state!: {
+    imageSource: ImageSource;
+    image: ImageType;
+    bounds: [number, number, number, number];
+    lastRequestParameters: {
+      bbox: [number, number, number, number];
+      layers: string[];
+      srs: 'EPSG:4326' | 'EPSG:3857';
+      width: number;
+      height: number;
+    };
+    lastRequestId: number;
+
+    _nextRequestId: number;
+    _timeoutId: any;
+  };
+
+  /** Lets deck.gl know that we want viewport change events */
+  override shouldUpdateState(): boolean {
+    return true;
+  }
+
+  override initializeState(): void {
+    // intentionally empty, initialization is done in updateState
+    this.state._nextRequestId = 0;
+    this.state.lastRequestId = -1;
+  }
+
+  override updateState({changeFlags, props, oldProps}: UpdateParameters<this>): void {
+    const {viewport} = this.context;
+
+    // Check if data source has changed
+    if (changeFlags.dataChanged || props.serviceType !== oldProps.serviceType) {
+      this.state.imageSource = this._createImageSource(props);
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      this._loadMetadata();
+      this.debounce(() => this.loadImage(viewport, 'image source changed'), 0);
+    } else if (!deepEqual(props.layers, oldProps.layers, 1)) {
+      this.debounce(() => this.loadImage(viewport, 'layers changed'), 0);
+    } else if (changeFlags.viewportChanged) {
+      this.debounce(() => this.loadImage(viewport, 'viewport changed'));
+    }
+  }
+
+  override finalizeState(): void {
+    // TODO - we could cancel outstanding requests
+  }
+
+  override renderLayers(): Layer {
+    // TODO - which bitmap layer is rendered should depend on the current viewport
+    // Currently Studio only uses one viewport
+    const {bounds, image, lastRequestParameters} = this.state;
+
+    return (
+      image &&
+      new BitmapLayer({
+        ...this.getSubLayerProps({id: 'bitmap'}),
+        _imageCoordinateSystem:
+          lastRequestParameters.srs === 'EPSG:4326'
+            ? COORDINATE_SYSTEM.LNGLAT
+            : COORDINATE_SYSTEM.CARTESIAN,
+        bounds,
+        image
+      })
+    );
+  }
+
+  async getFeatureInfoText(x: number, y: number): Promise<string | null> {
+    const {lastRequestParameters} = this.state;
+    if (lastRequestParameters) {
+      // @ts-expect-error Undocumented method
+      const featureInfo = await this.state.imageSource.getFeatureInfoText?.({
+        ...lastRequestParameters,
+        query_layers: lastRequestParameters.layers,
+        x,
+        y,
+        info_format: 'application/vnd.ogc.gml'
+      });
+      return featureInfo;
+    }
+    return '';
+  }
+
+  _createImageSource(props: WMSLayerProps): ImageSource {
+    if (props.data instanceof ImageSource) {
+      return props.data;
+    }
+
+    if (typeof props.data === 'string') {
+      return createImageSource({
+        url: props.data,
+        loadOptions: props.loadOptions,
+        type: props.serviceType
+      });
+    }
+
+    throw new Error('invalid image source in props.data');
+  }
+
+  /** Run a getMetadata on the image service */
+  async _loadMetadata(): Promise<void> {
+    const {imageSource} = this.state;
+    try {
+      const metadata = await imageSource.getMetadata();
+
+      // If a request takes a long time, it may no longer be expected
+      if (this.state.imageSource === imageSource) {
+        this.getCurrentLayer()?.props.onMetadataLoad(metadata);
+      }
+    } catch (error) {
+      this.getCurrentLayer()?.props.onMetadataLoadError(error as Error);
+    }
+  }
+
+  /** Load an image */
+  async loadImage(viewport: Viewport, reason: string): Promise<void> {
+    const {layers, serviceType} = this.props;
+
+    // TODO - move to ImageSource?
+    if (serviceType === 'wms' && layers.length === 0) {
+      return;
+    }
+
+    const bounds = viewport.getBounds();
+    const {width, height} = viewport;
+    const requestId = this.getRequestId();
+    let {srs} = this.props;
+    if (srs === 'auto') {
+      // BitmapLayer only supports LNGLAT or CARTESIAN (Web-Mercator)
+      srs = viewport.resolution ? 'EPSG:4326' : 'EPSG:3857';
+    }
+    const requestParams = {
+      width,
+      height,
+      bbox: bounds,
+      layers,
+      srs
+    };
+    if (srs === 'EPSG:3857') {
+      const [minX, minY] = projConverter.project([bounds[0], bounds[1]]);
+      const [maxX, maxY] = projConverter.project([bounds[2], bounds[3]]);
+      requestParams.bbox = [minX, minY, maxX, maxY];
+    }
+
+    try {
+      this.props.onImageLoadStart(requestId);
+
+      const image = await this.state.imageSource.getImage(requestParams);
+
+      // If a request takes a long time, later requests may have already loaded.
+      if (this.state.lastRequestId < requestId) {
+        this.getCurrentLayer()?.props.onImageLoad(requestId);
+        // Not type safe...
+        this.setState({
+          image,
+          bounds,
+          lastRequestParameters: requestParams,
+          lastRequestId: requestId
+        });
+      }
+    } catch (error) {
+      this.raiseError(error as Error, 'Load image');
+      this.getCurrentLayer()?.props.onImageLoadError(requestId, error as Error);
+    }
+  }
+
+  // HELPERS
+
+  /** Global counter for issuing unique request ids */
+  private getRequestId(): number {
+    return this.state._nextRequestId++;
+  }
+
+  /** Runs an action in the future, cancels it if the new action is issued before it executes */
+  private debounce(fn: Function, ms = 500): void {
+    clearTimeout(this.state._timeoutId);
+    this.state._timeoutId = setTimeout(() => fn(), ms);
+  }
+}

package/typed/geo-cell-layer/GeoCellLayer.d.ts

@@ -2,9 +2,9 @@ import { CompositeLayer, CompositeLayerProps, Layer, LayersList, DefaultProps }
 import { PolygonLayerProps } from '@deck.gl/layers/typed';
 /** All properties supported by GeoCellLayer. */
 export declare type GeoCellLayerProps<DataT = any> = PolygonLayerProps<DataT> & CompositeLayerProps<DataT>;
-export default class GeoCellLayer<DataT = any, ExtraProps = {}> extends CompositeLayer<Required<GeoCellLayerProps<DataT>> & ExtraProps> {
+export default class GeoCellLayer<DataT = any, ExtraProps extends {} = {}> extends CompositeLayer<Required<GeoCellLayerProps<DataT>> & ExtraProps> {
     static layerName: string;
-    static defaultProps: DefaultProps<GeoCellLayerProps<any>>;
+    static defaultProps: DefaultProps;
     /** Implement to generate props to create geometry. */
     indexToBounds(): Partial<GeoCellLayer['props']> | null;
     renderLayers(): Layer | null | LayersList;

package/typed/geo-cell-layer/GeoCellLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GeoCellLayer.d.ts","sourceRoot":"","sources":["../../src/geo-cell-layer/GeoCellLayer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAE,mBAAmB,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAC,MAAM,eAAe,CAAC;AACnG,OAAO,EAAe,iBAAiB,EAAC,MAAM,iBAAiB,CAAC;AAMhE,gDAAgD;AAChD,oBAAY,iBAAiB,CAAC,KAAK,GAAG,GAAG,IAAI,iBAAiB,CAAC,KAAK,CAAC,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAC;AAEnG,MAAM,CAAC,OAAO,OAAO,YAAY,CAAC,KAAK,GAAG,GAAG,EAAE,UAAU,GAAG,EAAE,CAAE,SAAQ,cAAc,CACpF,QAAQ,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,GAAG,UAAU,CAChD;IACC,MAAM,CAAC,SAAS,SAAkB;IAClC,MAAM,CAAC,YAAY,uCAAgB;IAEnC,sDAAsD;IACtD,aAAa,IAAI,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,GAAG,IAAI;IAItD,YAAY,IAAI,KAAK,GAAG,IAAI,GAAG,UAAU;CA+D1C"}
+{"version":3,"file":"GeoCellLayer.d.ts","sourceRoot":"","sources":["../../src/geo-cell-layer/GeoCellLayer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAE,mBAAmB,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAC,MAAM,eAAe,CAAC;AACnG,OAAO,EAAe,iBAAiB,EAAC,MAAM,iBAAiB,CAAC;AAMhE,gDAAgD;AAChD,oBAAY,iBAAiB,CAAC,KAAK,GAAG,GAAG,IAAI,iBAAiB,CAAC,KAAK,CAAC,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAC;AAEnG,MAAM,CAAC,OAAO,OAAO,YAAY,CAAC,KAAK,GAAG,GAAG,EAAE,UAAU,SAAS,EAAE,GAAG,EAAE,CAAE,SAAQ,cAAc,CAC/F,QAAQ,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,GAAG,UAAU,CAChD;IACC,MAAM,CAAC,SAAS,SAAkB;IAClC,MAAM,CAAC,YAAY,EAAE,YAAY,CAAgB;IAEjD,sDAAsD;IACtD,aAAa,IAAI,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,GAAG,IAAI;IAItD,YAAY,IAAI,KAAK,GAAG,IAAI,GAAG,UAAU;CA+D1C"}