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

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.8.0-beta.2",
+  "version": "8.8.0-beta.5",
   "publishConfig": {
     "access": "public"
   },
@@ -54,5 +54,5 @@
     "@loaders.gl/core": "^3.0.0",
     "@luma.gl/core": "^8.0.0"
   },
-  "gitHead": "d9bae59d015387c547366465d75d80950c60a34e"
+  "gitHead": "20b7becdb467aa917c17c9517461bf62ecc48b12"
 }

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

@@ -0,0 +1,39 @@
+import {AccessorFunction} from '@deck.gl/core';
+import GeoCellLayer from '../geo-cell-layer/GeoCellLayer';
+import {getGeohashPolygon} from './geohash-utils';
+
+const defaultProps = {
+  getGeohash: {type: 'accessor', value: d => d.geohash}
+};
+
+/**
+ * Properties of `GeohashLayer`.
+ */
+type GeohashLayerProps<DataT = any> = {
+  /**
+   * Called for each data object to retrieve the geohash string identifier.
+   *
+   * By default, it reads `geohash` property of data object.
+   */
+  getGeohash?: AccessorFunction<DataT, string>;
+};
+
+/** 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<
+  DataT,
+  Required<GeohashLayerProps> & ExtraProps
+> {
+  static layerName = 'GeohashLayer';
+  static defaultProps: any = defaultProps;
+
+  indexToBounds(): Partial<GeoCellLayer['props']> | null {
+    const {data, getGeohash} = this.props;
+
+    return {
+      data,
+      _normalize: false,
+      positionFormat: 'XY',
+      getPolygon: (x: DataT, objectInfo) => getGeohashPolygon(getGeohash(x, objectInfo))
+    };
+  }
+}

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

@@ -0,0 +1,54 @@
+const BASE32_CODES = '0123456789bcdefghjkmnpqrstuvwxyz';
+const BASE32_CODES_DICT = {};
+for (let i = 0; i < BASE32_CODES.length; i++) {
+  BASE32_CODES_DICT[BASE32_CODES.charAt(i)] = i;
+}
+
+const MIN_LAT = -90;
+const MAX_LAT = 90;
+const MIN_LON = -180;
+const MAX_LON = 180;
+
+// Adapted from ngeohash decode_bbox
+export function getGeohashBounds(geohash: string): number[] {
+  let isLon = true;
+  let maxLat = MAX_LAT;
+  let minLat = MIN_LAT;
+  let maxLon = MAX_LON;
+  let minLon = MIN_LON;
+  let mid: number;
+
+  let hashValue = 0;
+  for (let i = 0, l = geohash.length; i < l; i++) {
+    const code = geohash[i].toLowerCase();
+    hashValue = BASE32_CODES_DICT[code];
+
+    for (let bits = 4; bits >= 0; bits--) {
+      const bit = (hashValue >> bits) & 1;
+      if (isLon) {
+        mid = (maxLon + minLon) / 2;
+        if (bit === 1) {
+          minLon = mid;
+        } else {
+          maxLon = mid;
+        }
+      } else {
+        mid = (maxLat + minLat) / 2;
+        if (bit === 1) {
+          minLat = mid;
+        } else {
+          maxLat = mid;
+        }
+      }
+      isLon = !isLon;
+    }
+  }
+
+  return [minLat, minLon, maxLat, maxLon];
+}
+
+export function getGeohashPolygon(geohash: string): number[] {
+  const [s, w, n, e] = getGeohashBounds(geohash);
+
+  return [e, n, e, s, w, s, w, n, e, n];
+}

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

@@ -1,6 +1,7 @@
 import {h3SetToMultiPolygon, H3IndexInput} from 'h3-js';
 
 import {AccessorFunction, createIterable, UpdateParameters, DefaultProps} from '@deck.gl/core';
+import {H3HexagonLayer} from '@deck.gl/geo-layers';
 import GeoCellLayer, {GeoCellLayerProps} from '../geo-cell-layer/GeoCellLayer';
 
 const defaultProps: DefaultProps<H3ClusterLayerProps> = {
@@ -28,6 +29,10 @@ export default class H3ClusterLayer<DataT = any, ExtraProps = {}> extends GeoCel
   static layerName = 'H3ClusterLayer';
   static defaultProps = defaultProps;
 
+  initializeState(): void {
+    H3HexagonLayer._checkH3Lib();
+  }
+
   updateState({props, changeFlags}: UpdateParameters<this>): void {
     if (
       changeFlags.dataChanged ||

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

@@ -143,15 +143,7 @@ type _H3HexagonLayerProps<DataT> = {
 };
 
 /**
- * A subclass of HexagonLayer that uses H3 hexagonIds in data objects
- * rather than centroid lat/longs. The shape of each hexagon is determined
- * based on a single "center" hexagon, which can be selected by passing in
- * a center lat/lon pair. If not provided, the map center will be used.
- *
- * Also sets the `hexagonId` field in the onHover/onClick callback's info
- * objects. Since this is calculated using math, hexagonId will be present
- * even when no corresponding hexagon is in the data set. You can check
- * index !== -1 to see if picking matches an actual object.
+ * Render hexagons from the [H3](https://h3geo.org/) geospatial indexing system.
  */
 export default class H3HexagonLayer<DataT = any, ExtraPropsT = {}> extends CompositeLayer<
   ExtraPropsT & Required<_H3HexagonLayerProps<DataT> & Required<PolygonLayerProps<DataT>>>
@@ -159,7 +151,11 @@ export default class H3HexagonLayer<DataT = any, ExtraPropsT = {}> extends Compo
   static defaultProps = defaultProps;
   static layerName = 'H3HexagonLayer';
 
+  // See `main/bundle.ts`
+  static _checkH3Lib = () => {};
+
   initializeState() {
+    H3HexagonLayer._checkH3Lib();
     this.state = {
       edgeLengthKM: 0,
       resolution: -1

package/src/index.ts

@@ -29,7 +29,9 @@ export {default as H3HexagonLayer} from './h3-layers/h3-hexagon-layer';
 export {default as Tile3DLayer} from './tile-3d-layer/tile-3d-layer';
 export {default as TerrainLayer} from './terrain-layer/terrain-layer';
 export {default as MVTLayer} from './mvt-layer/mvt-layer';
+export {default as GeohashLayer} from './geohash-layer/geohash-layer';
 
+export {default as _GeoCellLayer} from './geo-cell-layer/GeoCellLayer';
 export {getURLFromTemplate as _getURLFromTemplate} from './tile-layer/utils';
 export {default as _Tileset2D} from './tile-layer/tileset-2d';
 export {default as _Tile2DHeader} from './tile-layer/tile-2d-header';
@@ -43,4 +45,7 @@ export type {TileLayerProps} from './tile-layer/tile-layer';
 export type {GeoBoundingBox} from './tile-layer/types';
 export type {QuadkeyLayerProps} from './quadkey-layer/quadkey-layer';
 export type {TileLoadProps as _TileLoadProps} from './tile-layer/types';
+export type {TerrainLayerProps} from './terrain-layer/terrain-layer';
+export type {Tile3DLayerProps} from './tile-3d-layer/tile-3d-layer';
 export type {MVTLayerProps} from './mvt-layer/mvt-layer';
+export type {GeoCellLayerProps as _GeoCellLayerProps} from './geo-cell-layer/GeoCellLayer';

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

@@ -85,6 +85,7 @@ 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

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

@@ -19,6 +19,7 @@ type _QuadkeyLayerProps<DataT> = {
   getQuadkey?: AccessorFunction<DataT, string>;
 };
 
+/** 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<
   DataT,
   Required<_QuadkeyLayerProps<DataT>> & ExtraProps

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

@@ -39,6 +39,7 @@ type _S2LayerProps<DataT> = {
   getS2Token?: AccessorFunction<DataT, string>;
 };
 
+/** 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<
   DataT,
   Required<_S2LayerProps<DataT>> & ExtraProps

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,73 @@ 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;
+};
+
+/** Render mesh surfaces from height map images. */
+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 +157,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 +194,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 +229,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 +254,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 +271,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 +286,7 @@ export default class TerrainLayer extends CompositeLayer {
     }
   }
 
-  renderLayers() {
+  renderLayers(): Layer | null | LayersList {
     const {
       color,
       material,
@@ -220,14 +309,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 +359,3 @@ export default class TerrainLayer extends CompositeLayer {
     );
   }
 }
-
-TerrainLayer.layerName = 'TerrainLayer';
-TerrainLayer.defaultProps = defaultProps;

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

@@ -28,7 +28,7 @@ import {Tiles3DLoader} from '@loaders.gl/3d-tiles';
 
 const SINGLE_DATA = [0];
 
-const defaultProps: DefaultProps<Tile3dLayerProps> = {
+const defaultProps: DefaultProps<Tile3DLayerProps> = {
   getPointColor: {type: 'accessor', value: [0, 0, 0, 255]},
   pointSize: 1.0,
 
@@ -44,10 +44,10 @@ const defaultProps: DefaultProps<Tile3dLayerProps> = {
 };
 
 /** All properties supported by Tile3DLayer */
-export type Tile3dLayerProps<DataT = any> = _Tile3dLayerProps<DataT> & CompositeLayerProps<DataT>;
+export type Tile3DLayerProps<DataT = any> = _Tile3DLayerProps<DataT> & CompositeLayerProps<DataT>;
 
 /** Props added by the Tile3DLayer */
-type _Tile3dLayerProps<DataT> = {
+type _Tile3DLayerProps<DataT> = {
   /** Color Accessor for point clouds. **/
   getPointColor?: Accessor<DataT, Color>;
 
@@ -75,8 +75,9 @@ type _Tile3dLayerProps<DataT> = {
   _getMeshColor?: (tile: Tile3D) => Color;
 };
 
+/** 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<
-  ExtraPropsT & Required<_Tile3dLayerProps<DataT>>
+  ExtraPropsT & Required<_Tile3DLayerProps<DataT>>
 > {
   static defaultProps = defaultProps as any;
   static layerName = 'Tile3DLayer';

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

@@ -7,6 +7,7 @@ import {
   PickingInfo,
   GetPickingInfoParams,
   DefaultProps,
+  FilterContext,
   _flatten as flatten
 } from '@deck.gl/core';
 import {GeoJsonLayer} from '@deck.gl/layers';
@@ -352,7 +353,8 @@ export default class TileLayer<DataT = any, ExtraPropsT = {}> extends CompositeL
     });
   }
 
-  filterSubLayer({layer}) {
-    return layer.props.tile.isVisible;
+  filterSubLayer({layer, cullRect}: FilterContext) {
+    const {tile} = (layer as Layer<{tile: Tile2DHeader}>).props;
+    return this.state.tileset.isTileVisible(tile, cullRect);
   }
 }

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

@@ -1,10 +1,11 @@
 import Tile2DHeader from './tile-2d-header';
-import {getTileIndices, tileToBoundingBox} from './utils';
+import {getTileIndices, tileToBoundingBox, getCullBounds} from './utils';
 import {RequestScheduler} from '@loaders.gl/loader-utils';
-import {Matrix4} from '@math.gl/core';
+import {Matrix4, equals} from '@math.gl/core';
 import {Viewport} from '@deck.gl/core';
 import {Bounds, TileIndex, ZRange} from './types';
 import {TileLayerProps} from './tile-layer';
+import {_memoize as memoize} from '@deck.gl/core';
 
 // bit masks
 const TILE_STATE_VISITED = 1;
@@ -78,6 +79,7 @@ export default class Tileset2D {
 
   private _cacheByteSize: number;
   private _viewport: Viewport | null;
+  private _zRange?: ZRange;
   private _selectedTiles: Tile2DHeader[] | null;
   private _frameNumber: number;
   private _modelMatrix: Matrix4;
@@ -184,12 +186,18 @@ export default class Tileset2D {
   ): number {
     const modelMatrixAsMatrix4 = new Matrix4(modelMatrix);
     const isModelMatrixNew = !modelMatrixAsMatrix4.equals(this._modelMatrix);
-    if (!this._viewport || !viewport.equals(this._viewport) || isModelMatrixNew) {
+    if (
+      !this._viewport ||
+      !viewport.equals(this._viewport) ||
+      !equals(this._zRange, zRange) ||
+      isModelMatrixNew
+    ) {
       if (isModelMatrixNew) {
         this._modelMatrixInverse = modelMatrixAsMatrix4.clone().invert();
         this._modelMatrix = modelMatrixAsMatrix4;
       }
       this._viewport = viewport;
+      this._zRange = zRange;
       const tileIndices = this.getTileIndices({
         viewport,
         maxZoom: this._maxZoom,
@@ -225,6 +233,32 @@ export default class Tileset2D {
     return this._frameNumber;
   }
 
+  isTileVisible(
+    tile: Tile2DHeader,
+    cullRect?: {x: number; y: number; width: number; height: number}
+  ): boolean {
+    if (!tile.isVisible) {
+      return false;
+    }
+
+    if (cullRect && this._viewport) {
+      const [minX, minY, maxX, maxY] = getCullBounds({
+        viewport: this._viewport,
+        z: this._zRange,
+        cullRect
+      });
+      const {bbox} = tile;
+      if ('west' in bbox) {
+        return bbox.west < maxX && bbox.east > minX && bbox.south < maxY && bbox.north > minY;
+      }
+      // top/bottom could be swapped depending on the indexing system
+      const y0 = Math.min(bbox.top, bbox.bottom);
+      const y1 = Math.max(bbox.top, bbox.bottom);
+      return bbox.left < maxX && bbox.right > minX && y0 < maxY && y1 > minY;
+    }
+    return true;
+  }
+
   /* Public interface for subclassing */
 
   /** Returns array of tile indices in the current viewport */
@@ -321,7 +355,9 @@ export default class Tileset2D {
 
   /* Private methods */
 
-  _pruneRequests(): void {
+  private _getCullBounds = memoize(getCullBounds);
+
+  private _pruneRequests(): void {
     const {maxRequests} = this.opts;
 
     const abortCandidates: Tile2DHeader[] = [];
@@ -345,7 +381,7 @@ export default class Tileset2D {
   }
 
   // This needs to be called every time some tiles have been added/removed from cache
-  _rebuildTree() {
+  private _rebuildTree() {
     const {_cache} = this;
 
     // Reset states

package/src/tile-layer/utils.ts

@@ -127,6 +127,50 @@ function getBoundingBox(viewport: Viewport, zRange: number[] | null, extent: Bou
   ];
 }
 
+/** Get culling bounds in world space */
+export function getCullBounds({
+  viewport,
+  z,
+  cullRect
+}: {
+  /** Current viewport */
+  viewport: Viewport;
+  /** Current z range */
+  z: ZRange | number | undefined;
+  /** Culling rectangle in screen space */
+  cullRect: {x: number; y: number; width: number; height: number};
+}): [number, number, number, number] {
+  const x = cullRect.x - viewport.x;
+  const y = cullRect.y - viewport.y;
+  const {width, height} = cullRect;
+
+  if (!Array.isArray(z)) {
+    const unprojectOption = {targetZ: z || 0};
+
+    const topLeft = viewport.unproject([x, y], unprojectOption);
+    const topRight = viewport.unproject([x + width, y], unprojectOption);
+    const bottomLeft = viewport.unproject([x, y + height], unprojectOption);
+    const bottomRight = viewport.unproject([x + width, y + height], unprojectOption);
+
+    return [
+      Math.min(topLeft[0], topRight[0], bottomLeft[0], bottomRight[0]),
+      Math.min(topLeft[1], topRight[1], bottomLeft[1], bottomRight[1]),
+      Math.max(topLeft[0], topRight[0], bottomLeft[0], bottomRight[0]),
+      Math.max(topLeft[1], topRight[1], bottomLeft[1], bottomRight[1])
+    ];
+  }
+
+  const bounds0 = getCullBounds({viewport, z: z[0], cullRect});
+  const bounds1 = getCullBounds({viewport, z: z[1], cullRect});
+
+  return [
+    Math.min(bounds0[0], bounds1[0]),
+    Math.min(bounds0[1], bounds1[1]),
+    Math.max(bounds0[2], bounds1[2]),
+    Math.max(bounds0[3], bounds1[3])
+  ];
+}
+
 function getIndexingCoords(bbox: Bounds, scale: number, modelMatrixInverse?: Matrix4): Bounds {
   if (modelMatrixInverse) {
     const transformedTileIndex = transformBox(bbox, modelMatrixInverse).map(

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

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