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

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

@@ -2,7 +2,7 @@ import {worldToLngLat} from '@math.gl/web-mercator';
 
 const TILE_SIZE = 512;
 
-export function quadkeyToWorldBounds(quadkey) {
+export function quadkeyToWorldBounds(quadkey: string): [number[], number[]] {
   let x = 0;
   let y = 0;
   let mask = 1 << quadkey.length;
@@ -20,7 +20,7 @@ export function quadkeyToWorldBounds(quadkey) {
   ];
 }
 
-export function getQuadkeyPolygon(quadkey) {
+export function getQuadkeyPolygon(quadkey: string): number[] {
   const [topLeft, bottomRight] = quadkeyToWorldBounds(quadkey);
   const [w, n] = worldToLngLat(topLeft);
   const [e, s] = worldToLngLat(bottomRight);

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

@@ -3,19 +3,20 @@ import {Layer, log} from '@deck.gl/core';
 import {RequestScheduler} from '@loaders.gl/loader-utils';
 import {TileBoundingBox, TileIndex, TileLoadProps} from './types';
 
-export type TileLoadDataProps = {
+export type TileLoadDataProps<DataT = any> = {
   requestScheduler: RequestScheduler;
-  getData: (props: TileLoadProps) => Promise<any>;
-  onLoad: (tile: Tile2DHeader) => void;
-  onError: (error: any, tile: Tile2DHeader) => void;
+  getData: (props: TileLoadProps) => Promise<DataT>;
+  onLoad: (tile: Tile2DHeader<DataT>) => void;
+  onError: (error: any, tile: Tile2DHeader<DataT>) => void;
 };
-export default class Tile2DHeader {
+
+export default class Tile2DHeader<DataT = any> {
   index: TileIndex;
   isVisible: boolean;
   isSelected: boolean;
   parent: Tile2DHeader | null;
   children: Tile2DHeader[] | null;
-  content: any;
+  content: DataT | null;
   state?: number;
   layers?: Layer[] | null;
 
@@ -48,24 +49,24 @@ export default class Tile2DHeader {
     this._needsReload = false;
   }
 
-  get data() {
+  get data(): Promise<DataT | null> | DataT | null {
     return this.isLoading && this._loader ? this._loader.then(() => this.data) : this.content;
   }
 
-  get isLoaded() {
+  get isLoaded(): boolean {
     return this._isLoaded && !this._needsReload;
   }
 
-  get isLoading() {
+  get isLoading(): boolean {
     return Boolean(this._loader) && !this._isCancelled;
   }
 
-  get needsReload() {
+  get needsReload(): boolean {
     return this._needsReload || this._isCancelled;
   }
 
-  get byteLength() {
-    const result = this.content ? this.content.byteLength : 0;
+  get byteLength(): number {
+    const result = this.content ? (this.content as any).byteLength : 0;
     if (!Number.isFinite(result)) {
       log.error('byteLength not defined in tile data')();
     }
@@ -78,7 +79,7 @@ export default class Tile2DHeader {
     requestScheduler,
     onLoad,
     onError
-  }: TileLoadDataProps): Promise<void> {
+  }: TileLoadDataProps<DataT>): Promise<void> {
     const {index, id, bbox, userData, zoom} = this;
     const loaderId = this._loaderId;
 
@@ -100,7 +101,7 @@ export default class Tile2DHeader {
       return;
     }
 
-    let tileData = null;
+    let tileData: DataT | null = null;
     let error;
     try {
       tileData = await getData({index, id, bbox, userData, zoom, signal});

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

@@ -1,10 +1,11 @@
 import {
-  assert,
-  ChangeFlags,
   CompositeLayer,
   CompositeLayerProps,
   Layer,
   LayerProps,
+  UpdateParameters,
+  PickingInfo,
+  GetPickingInfoParams,
   _flatten as flatten
 } from '@deck.gl/core';
 import {GeoJsonLayer} from '@deck.gl/layers';
@@ -39,73 +40,85 @@ const defaultProps = {
   zoomOffset: 0
 };
 
-export type TileLayerProps<DataT = any> = CompositeLayerProps<DataT> & {
+/** All props supported by the TileLayer */
+export type TileLayerProps<DataT = any> = _TileLayerProps<DataT> & CompositeLayerProps<DataT>;
+
+/** Props added by the TileLayer */
+type _TileLayerProps<DataT> = {
+  /**
+   * Optionally implement a custom indexing scheme.
+   */
+  TilesetClass: typeof Tileset2D;
   /**
    * Renders one or an array of Layer instances.
    */
-  renderSubLayers: (
-    props: TileLayerProps & {
+  renderSubLayers?: (
+    props: TileLayerProps<DataT> & {
       id: string;
-      data: any;
+      data: DataT;
       _offset: number;
-      tile: Tile2DHeader;
+      tile: Tile2DHeader<DataT>;
     }
   ) => LayersList;
   /**
    * If supplied, `getTileData` is called to retrieve the data of each tile.
    */
-  getTileData: (props: TileLoadProps) => Promise<any> | any;
+  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;
+  onTileError?: (err: any) => void;
 
   /** The bounding box of the layer's data. */
-  extent: number[] | undefined | null;
+  extent?: number[] | null;
 
   /** The pixel dimension of the tiles, usually a power of 2. */
-  tileSize: number;
+  tileSize?: number;
 
-  /** The max zoom level of the layer's data.  */
-  maxZoom: number;
+  /** The max zoom level of the layer's data.
+   * @default null
+   */
+  maxZoom?: number | null;
 
-  /** The min zoom level of the layer's data.  */
-  minZoom: number;
+  /** The min zoom level of the layer's data.
+   * @default 0
+   */
+  minZoom?: number | null;
 
   /** The maximum number of tiles that can be cached. */
-  maxCacheSize: number | undefined | null;
+  maxCacheSize?: number | null;
 
   /**
    * The maximum memory used for caching tiles.
    *
    * @default null
    */
-  maxCacheByteSize: number | undefined;
+  maxCacheByteSize?: number | null;
 
   /**
    * How the tile layer refines the visibility of tiles.
    *
    * @default 'best-available'
    */
-  refinementStrategy: RefinementStrategy;
+  refinementStrategy?: RefinementStrategy;
 
   /** Range of minimum and maximum heights in the tile. */
-  zRange: ZRange | null;
+  zRange?: ZRange | null;
 
   /**
    * The maximum number of concurrent getTileData calls.
    *
    * @default 6
    */
-  maxRequests: number;
+  maxRequests?: number;
 
   /**
    * This offset changes the zoom level at which the tiles are fetched.
@@ -114,7 +127,11 @@ export type TileLayerProps<DataT = any> = CompositeLayerProps<DataT> & {
    *
    * @default 0
    */
-  zoomOffset: number;
+  zoomOffset?: number;
+};
+
+export type TiledPickingInfo<DataT = any> = PickingInfo & {
+  tile?: Tile2DHeader<DataT>;
 };
 
 /**
@@ -122,10 +139,9 @@ export type TileLayerProps<DataT = any> = CompositeLayerProps<DataT> & {
  *
  * Instead of fetching the entire dataset, it only loads and renders what's visible in the current viewport.
  */
-export default class TileLayer<
-  DataT = any,
-  PropsT extends TileLayerProps<DataT> = TileLayerProps<DataT>
-> extends CompositeLayer<PropsT> {
+export default class TileLayer<DataT = any, ExtraPropsT = {}> extends CompositeLayer<
+  ExtraPropsT & Required<_TileLayerProps<DataT>>
+> {
   static defaultProps = defaultProps as any;
   static layerName = 'TileLayer';
 
@@ -150,17 +166,7 @@ export default class TileLayer<
     return changeFlags.somethingChanged;
   }
 
-  updateState({
-    props,
-    changeFlags
-  }: {
-    props: TileLayerProps;
-    oldProps: TileLayerProps;
-    context: any;
-    changeFlags: ChangeFlags;
-  }) {
-    assert(this.state);
-
+  updateState({changeFlags}: UpdateParameters<this>) {
     let {tileset} = this.state;
     const propsChanged = changeFlags.propsOrDataChanged || changeFlags.updateTriggersChanged;
     const dataChanged =
@@ -169,10 +175,10 @@ export default class TileLayer<
         (changeFlags.updateTriggersChanged.all || changeFlags.updateTriggersChanged.getTileData));
 
     if (!tileset) {
-      tileset = new this.props.TilesetClass(this._getTilesetOptions(props));
+      tileset = new this.props.TilesetClass(this._getTilesetOptions());
       this.setState({tileset});
     } else if (propsChanged) {
-      tileset.setOptions(this._getTilesetOptions(props));
+      tileset.setOptions(this._getTilesetOptions());
 
       if (dataChanged) {
         // reload all tiles
@@ -189,7 +195,7 @@ export default class TileLayer<
     this._updateTileset();
   }
 
-  _getTilesetOptions(props: TileLayerProps): Tileset2DProps {
+  _getTilesetOptions(): Tileset2DProps {
     const {
       tileSize,
       maxCacheSize,
@@ -200,7 +206,7 @@ export default class TileLayer<
       minZoom,
       maxRequests,
       zoomOffset
-    } = props;
+    } = this.props;
 
     return {
       maxCacheSize,
@@ -220,8 +226,7 @@ export default class TileLayer<
     };
   }
 
-  _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});
@@ -243,8 +248,6 @@ export default class TileLayer<
   }
 
   _onViewportLoad(): void {
-    assert(this.state);
-
     const {tileset} = this.state;
     const {onViewportLoad} = this.props;
 
@@ -253,27 +256,27 @@ export default class TileLayer<
     }
   }
 
-  _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;
 
@@ -290,33 +293,32 @@ export default class TileLayer<
   }
 
   renderSubLayers(
-    props: TileLayerProps & {
+    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
@@ -330,7 +332,7 @@ export default class TileLayer<
           _offset: 0,
           tile
         });
-        tile.layers = flatten(layers, Boolean).map(layer =>
+        tile.layers = (flatten(layers, Boolean) as Layer[]).map(layer =>
           layer.clone({
             tile,
             ...subLayerProps

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,8 +1,7 @@
 import {Viewport} from '@deck.gl/core';
 import {Matrix4} from '@math.gl/core';
-import Tile2DHeader from './tile-2d-header';
 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];
@@ -62,7 +61,13 @@ function stringHash(s: string): number {
   return Math.abs(s.split('').reduce((a, b) => ((a << 5) - a + b.charCodeAt(0)) | 0, 0));
 }
 
-export function getURLFromTemplate(template: string | string[], tile: Tile2DHeader): string | null {
+export function getURLFromTemplate(
+  template: string | string[],
+  tile: {
+    index: TileIndex;
+    id: string;
+  }
+): string | null {
   if (!template || !template.length) {
     return null;
   }
@@ -250,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)
+  );
+}

package/src/quadkey-layer/quadkey-layer.js

@@ -1,22 +0,0 @@
-import GeoCellLayer from '../geo-cell-layer/GeoCellLayer';
-import {getQuadkeyPolygon} from './quadkey-utils';
-
-const defaultProps = {
-  getQuadkey: {type: 'accessor', value: d => d.quadkey}
-};
-
-export default class QuadkeyLayer extends GeoCellLayer {
-  indexToBounds() {
-    const {data, getQuadkey} = this.props;
-
-    return {
-      data,
-      _normalize: false,
-      positionFormat: 'XY',
-      getPolygon: (x, objectInfo) => getQuadkeyPolygon(getQuadkey(x, objectInfo))
-    };
-  }
-}
-
-QuadkeyLayer.layerName = 'QuadkeyLayer';
-QuadkeyLayer.defaultProps = defaultProps;