TileLayer: Add .debounceTime option

modules/geo-layers/src/tile-layer/tile-layer.ts

@@ -44,6 +44,7 @@ const defaultProps: DefaultProps<TileLayerProps> = {
   refinementStrategy: STRATEGY_DEFAULT,
   zRange: null,
   maxRequests: 6,
+  debounceTime: 0,
   zoomOffset: 0
 };
 
@@ -128,6 +129,13 @@ type _TileLayerProps<DataT> = {
    */
   maxRequests?: number;
 
+  /**
+   * Queue tile requests until no new tiles have been requested for at least `debounceTime` milliseconds.
+   *
+   * @default 0
+   */
+  debounceTime?: number;
+
   /**
    * This offset changes the zoom level at which the tiles are fetched.
    *
@@ -221,7 +229,8 @@ export default class TileLayer<DataT = any, ExtraPropsT extends {} = {}> extends
       maxZoom,
       minZoom,
       maxRequests,
-      zoomOffset
+      debounceTime,
+      zoomOffset,
     } = this.props;
 
     return {
@@ -233,6 +242,7 @@ export default class TileLayer<DataT = any, ExtraPropsT extends {} = {}> extends
       refinementStrategy,
       extent,
       maxRequests,
+      debounceTime,
       zoomOffset,
 
       getTileData: this.getTileData.bind(this),

modules/geo-layers/src/tileset-2d/tileset-2d.ts

@@ -73,6 +73,8 @@ export type Tileset2DProps<DataT = any> = {
   zRange?: ZRange | null;
   /** The maximum number of concurrent getTileData calls. @default 6 */
   maxRequests?: number;
+  /** Queue tile requests until no new tiles have been requested for at least `debounceTime` milliseconds. @default 0 */
+  debounceTime?: number;
   /** Changes the zoom level at which the tiles are fetched. Needs to be an integer. @default 0 */
   zoomOffset?: number;
 
@@ -101,6 +103,7 @@ export const DEFAULT_TILESET2D_PROPS: Omit<Required<Tileset2DProps>, 'getTileDat
   refinementStrategy: 'best-available',
   zRange: null,
   maxRequests: 6,
+  debounceTime: 0,
   zoomOffset: 0,
 
   // onTileLoad: (tile: Tile2DHeader) => void,  // onTileUnload: (tile: Tile2DHeader) => void,  // onTileError: (error: any, tile: Tile2DHeader) => void,  /** Called when all tiles in the current viewport are loaded. */
@@ -140,6 +143,7 @@ export class Tileset2D {
    */
   constructor(opts: Tileset2DProps) {
     this.opts = {...DEFAULT_TILESET2D_PROPS, ...opts};
+    this.setOptions(this.opts);
 
     this.onTileLoad = tile => {
       this.opts.onTileLoad?.(tile);
@@ -150,8 +154,9 @@ export class Tileset2D {
     };
 
     this._requestScheduler = new RequestScheduler({
-      maxRequests: opts.maxRequests,
-      throttleRequests: Boolean(opts.maxRequests && opts.maxRequests > 0)
+      maxRequests: this.opts.maxRequests,
+      throttleRequests: Boolean(this.opts.maxRequests && this.opts.maxRequests > 0),
+      debounceTime: this.opts.debounceTime
     });
 
     // Maps tile id in string {z}-{x}-{y} to a Tile object
@@ -168,8 +173,6 @@ export class Tileset2D {
 
     this._modelMatrix = new Matrix4();
     this._modelMatrixInverse = new Matrix4();
-
-    this.setOptions(opts);
   }
 
   /* Public API */