@deck.gl/geo-layers 8.8.0-alpha.4 → 8.8.0-alpha.5

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

@@ -1,10 +1,11 @@
 import {
-  assert,
   CompositeLayer,
   CompositeLayerProps,
   Layer,
   LayerProps,
   UpdateParameters,
+  PickingInfo,
+  GetPickingInfoParams,
   _flatten as flatten
 } from '@deck.gl/core';
 import {GeoJsonLayer} from '@deck.gl/layers';
@@ -40,7 +41,7 @@ const defaultProps = {
 };
 
 /** All props supported by the TileLayer */
-export type TileLayerProps<DataT> = _TileLayerProps<DataT> & CompositeLayerProps<DataT>;
+export type TileLayerProps<DataT = any> = _TileLayerProps<DataT> & CompositeLayerProps<DataT>;
 
 /** Props added by the TileLayer */
 type _TileLayerProps<DataT> = {
@@ -54,9 +55,9 @@ type _TileLayerProps<DataT> = {
   renderSubLayers?: (
     props: TileLayerProps<DataT> & {
       id: string;
-      data: any;
+      data: DataT;
       _offset: number;
-      tile: Tile2DHeader;
+      tile: Tile2DHeader<DataT>;
     }
   ) => LayersList;
   /**
@@ -65,13 +66,13 @@ type _TileLayerProps<DataT> = {
   getTileData?: (props: TileLoadProps) => Promise<DataT> | DataT;
 
   /** Called when all tiles in the current viewport are loaded. */
-  onViewportLoad?: (tiles: Tile2DHeader[]) => void;
+  onViewportLoad?: (tiles: Tile2DHeader<DataT>[]) => void;
 
   /** Called when a tile successfully loads. */
-  onTileLoad?: (tile: Tile2DHeader) => void;
+  onTileLoad?: (tile: Tile2DHeader<DataT>) => void;
 
   /** Called when a tile is cleared from cache. */
-  onTileUnload?: (tile: Tile2DHeader) => void;
+  onTileUnload?: (tile: Tile2DHeader<DataT>) => void;
 
   /** Called when a tile failed to load. */
   onTileError?: (err: any) => void;
@@ -129,6 +130,10 @@ type _TileLayerProps<DataT> = {
   zoomOffset?: number;
 };
 
+export type TiledPickingInfo<DataT = any> = PickingInfo & {
+  tile?: Tile2DHeader<DataT>;
+};
+
 /**
  * The TileLayer is a composite layer that makes it possible to visualize very large datasets.
  *
@@ -161,9 +166,7 @@ export default class TileLayer<DataT = any, ExtraPropsT = {}> extends CompositeL
     return changeFlags.somethingChanged;
   }
 
-  updateState({changeFlags}: UpdateParameters<TileLayer>) {
-    assert(this.state);
-
+  updateState({changeFlags}: UpdateParameters<this>) {
     let {tileset} = this.state;
     const propsChanged = changeFlags.propsOrDataChanged || changeFlags.updateTriggersChanged;
     const dataChanged =
@@ -223,8 +226,7 @@ export default class TileLayer<DataT = any, ExtraPropsT = {}> extends CompositeL
     };
   }
 
-  _updateTileset(): void {
-    assert(this.state && this.context);
+  private _updateTileset(): void {
     const {tileset} = this.state;
     const {zRange, modelMatrix} = this.props;
     const frameNumber = tileset.update(this.context.viewport, {zRange, modelMatrix});
@@ -246,8 +248,6 @@ export default class TileLayer<DataT = any, ExtraPropsT = {}> extends CompositeL
   }
 
   _onViewportLoad(): void {
-    assert(this.state);
-
     const {tileset} = this.state;
     const {onViewportLoad} = this.props;
 
@@ -256,27 +256,27 @@ export default class TileLayer<DataT = any, ExtraPropsT = {}> extends CompositeL
     }
   }
 
-  _onTileLoad(tile: Tile2DHeader): void {
+  _onTileLoad(tile: Tile2DHeader<DataT>): void {
     this.props.onTileLoad(tile);
     tile.layers = null;
 
     this.setNeedsUpdate();
   }
 
-  _onTileError(error: any, tile: Tile2DHeader) {
+  _onTileError(error: any, tile: Tile2DHeader<DataT>) {
     this.props.onTileError(error);
     tile.layers = null;
 
     this.setNeedsUpdate();
   }
 
-  _onTileUnload(tile: Tile2DHeader) {
+  _onTileUnload(tile: Tile2DHeader<DataT>) {
     this.props.onTileUnload(tile);
   }
 
   // Methods for subclass to override
 
-  getTileData(tile: TileLoadProps) {
+  getTileData(tile: TileLoadProps): Promise<DataT> | DataT | null {
     const {data, getTileData, fetch} = this.props;
     const {signal} = tile;
 
@@ -293,33 +293,32 @@ export default class TileLayer<DataT = any, ExtraPropsT = {}> extends CompositeL
   }
 
   renderSubLayers(
-    props: _TileLayerProps<DataT> & {
+    props: TileLayer['props'] & {
       id: string;
-      data: any;
+      data: DataT;
       _offset: number;
-      tile: Tile2DHeader;
+      tile: Tile2DHeader<DataT>;
     }
-  ): LayersList {
+  ): Layer | null | LayersList {
     return this.props.renderSubLayers(props);
   }
 
-  getSubLayerPropsByTile(tile: Tile2DHeader): LayerProps | null {
+  getSubLayerPropsByTile(tile: Tile2DHeader): Partial<LayerProps> | null {
     return null;
   }
 
-  getPickingInfo({info, sourceLayer}) {
-    info.tile = sourceLayer.props.tile;
+  getPickingInfo({info, sourceLayer}: GetPickingInfoParams): TiledPickingInfo<DataT> {
+    (info as any).tile = (sourceLayer as any).props.tile;
     return info;
   }
 
-  _updateAutoHighlight(info) {
+  protected _updateAutoHighlight(info: PickingInfo): void {
     if (info.sourceLayer) {
       info.sourceLayer.updateAutoHighlight(info);
     }
   }
 
-  renderLayers(): Layer[] {
-    assert(this.state);
+  renderLayers(): Layer | null | LayersList {
     return this.state.tileset.tiles.map((tile: Tile2DHeader) => {
       const subLayerProps = this.getSubLayerPropsByTile(tile);
       // cache the rendered layer in the tile

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

@@ -2,7 +2,7 @@ import Tile2DHeader from './tile-2d-header';
 import {getTileIndices, tileToBoundingBox} from './utils';
 import {RequestScheduler} from '@loaders.gl/loader-utils';
 import {Matrix4} from '@math.gl/core';
-import {assert, Viewport} from '@deck.gl/core';
+import {Viewport} from '@deck.gl/core';
 import {Bounds, TileIndex, ZRange} from './types';
 import {TileLayerProps} from './tile-layer';
 
@@ -48,7 +48,7 @@ const STRATEGIES = {
 };
 
 export type Tileset2DProps = Pick<
-  TileLayerProps,
+  Required<TileLayerProps>,
   | 'getTileData'
   | 'tileSize'
   | 'maxCacheSize'
@@ -145,10 +145,10 @@ export default class Tileset2D {
   setOptions(opts: Tileset2DProps): void {
     Object.assign(this.opts, opts);
     if (Number.isFinite(opts.maxZoom)) {
-      this._maxZoom = Math.floor(opts.maxZoom);
+      this._maxZoom = Math.floor(opts.maxZoom as number);
     }
     if (Number.isFinite(opts.minZoom)) {
-      this._minZoom = Math.ceil(opts.minZoom);
+      this._minZoom = Math.ceil(opts.minZoom as number);
     }
   }
 
@@ -206,7 +206,7 @@ export default class Tileset2D {
       }
       // Check for needed reloads explicitly even if the view/matrix has not changed.
     } else if (this.needsReload) {
-      this._selectedTiles = this._selectedTiles!.map(tile => this._getTile(tile.index));
+      this._selectedTiles = this._selectedTiles!.map(tile => this._getTile(tile.index, true));
     }
 
     // Update tile states
@@ -271,8 +271,8 @@ export default class Tileset2D {
 
   /** Returns additional metadata to add to tile, bbox by default */
   getTileMetadata(index: TileIndex) {
-    assert(this._viewport);
     const {tileSize} = this.opts;
+    // @ts-expect-error
     return {bbox: tileToBoundingBox(this._viewport, index.x, index.y, index.z, tileSize)};
   }
 
@@ -285,8 +285,7 @@ export default class Tileset2D {
   }
 
   // Returns true if any tile's visibility changed
-  updateTileStates() {
-    assert(this._selectedTiles);
+  private updateTileStates() {
     const refinementStrategy = this.opts.refinementStrategy || STRATEGY_DEFAULT;
 
     const visibilities = new Array(this._cache.size);
@@ -298,6 +297,7 @@ export default class Tileset2D {
       tile.isSelected = false;
       tile.isVisible = false;
     }
+    // @ts-expect-error called only when _selectedTiles is already defined
     for (const tile of this._selectedTiles) {
       tile.isSelected = true;
       tile.isVisible = true;
@@ -370,12 +370,12 @@ export default class Tileset2D {
    * Clear tiles that are not visible when the cache is full
    */
   /* eslint-disable complexity */
-  _resizeCache() {
-    assert(this.selectedTiles);
+  private _resizeCache() {
     const {_cache, opts} = this;
 
     const maxCacheSize =
       opts.maxCacheSize ||
+      // @ts-expect-error called only when selectedTiles is initialized
       (opts.maxCacheByteSize ? Infinity : DEFAULT_CACHE_SCALE * this.selectedTiles.length);
     const maxCacheByteSize = opts.maxCacheByteSize || Infinity;
 
@@ -405,9 +405,9 @@ export default class Tileset2D {
   }
   /* eslint-enable complexity */
 
-  _getTile(index: TileIndex, create: true): Tile2DHeader;
-  _getTile(index: TileIndex, create?: false): Tile2DHeader | undefined;
-  _getTile(index: TileIndex, create?: boolean): Tile2DHeader | undefined {
+  private _getTile(index: TileIndex, create: true): Tile2DHeader;
+  private _getTile(index: TileIndex, create?: false): Tile2DHeader | undefined;
+  private _getTile(index: TileIndex, create?: boolean): Tile2DHeader | undefined {
     const id = this.getTileId(index);
     let tile = this._cache.get(id);
     let needsReload = false;

package/src/tile-layer/types.ts

@@ -2,9 +2,11 @@ export type ZRange = [minZ: number, maxZ: number];
 
 export type Bounds = [minX: number, minY: number, maxX: number, maxY: number];
 
+export type GeoBoundingBox = {west: number; north: number; east: number; south: number};
+
 export type TileBoundingBox =
   | {left: number; top: number; right: number; bottom: number}
-  | {west: number; north: number; east: number; south: number};
+  | GeoBoundingBox;
 
 export type TileIndex = {x: number; y: number; z: number};
 
@@ -14,4 +16,6 @@ export type TileLoadProps = {
   bbox: TileBoundingBox;
   url?: string | null;
   signal?: AbortSignal;
+  userData?: Record<string, any>;
+  zoom?: number;
 };

package/src/tile-layer/utils.ts

@@ -1,7 +1,7 @@
 import {Viewport} from '@deck.gl/core';
 import {Matrix4} from '@math.gl/core';
 import {getOSMTileIndices} from './tile-2d-traversal';
-import {Bounds, TileBoundingBox, TileIndex, ZRange} from './types';
+import {Bounds, GeoBoundingBox, TileBoundingBox, TileIndex, ZRange} from './types';
 
 const TILE_SIZE = 512;
 const DEFAULT_EXTENT: Bounds = [-Infinity, -Infinity, Infinity, Infinity];
@@ -255,3 +255,12 @@ export function getTileIndices({
 export function isURLTemplate(s: string): boolean {
   return /(?=.*{z})(?=.*{x})(?=.*({y}|{-y}))/.test(s);
 }
+
+export function isGeoBoundingBox(v: any): v is GeoBoundingBox {
+  return (
+    Number.isFinite(v.west) &&
+    Number.isFinite(v.north) &&
+    Number.isFinite(v.east) &&
+    Number.isFinite(v.south)
+  );
+}