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

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-alpha.4",
+  "version": "8.9.0-beta.1",
   "publishConfig": {
     "access": "public"
   },
@@ -26,17 +26,17 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "build-bundle": "webpack --config ../../scripts/bundle.config.js",
-    "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env.dev"
+    "build-bundle": "ocular-bundle ./bundle.ts",
+    "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@loaders.gl/3d-tiles": "^3.2.5",
-    "@loaders.gl/gis": "^3.2.5",
-    "@loaders.gl/loader-utils": "^3.2.5",
-    "@loaders.gl/mvt": "^3.2.5",
-    "@loaders.gl/schema": "^3.2.5",
-    "@loaders.gl/terrain": "^3.2.5",
-    "@loaders.gl/tiles": "^3.2.5",
+    "@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",
     "@luma.gl/constants": "^8.5.16",
     "@luma.gl/experimental": "^8.5.16",
     "@math.gl/core": "^3.6.2",
@@ -54,5 +54,5 @@
     "@loaders.gl/core": "^3.0.0",
     "@luma.gl/core": "^8.0.0"
   },
-  "gitHead": "f34f77e2b050306ade160a5628ea2844a4ceabc2"
+  "gitHead": "47223d1ea084c3f9b0c9f0f9736682850bb5db85"
 }

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

@@ -1,7 +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 {default as H3HexagonLayer} from './h3-hexagon-layer';
 import GeoCellLayer, {GeoCellLayerProps} from '../geo-cell-layer/GeoCellLayer';
 
 const defaultProps: DefaultProps<H3ClusterLayerProps> = {

package/src/index.ts

@@ -32,9 +32,6 @@ 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';
 
 // Types
 export type {H3ClusterLayerProps} from './h3-layers/h3-cluster-layer';
@@ -42,10 +39,17 @@ export type {H3HexagonLayerProps} from './h3-layers/h3-hexagon-layer';
 export type {GreatCircleLayerProps} from './great-circle-layer/great-circle-layer';
 export type {S2LayerProps} from './s2-layer/s2-layer';
 export type {TileLayerProps} from './tile-layer/tile-layer';
-export type {GeoBoundingBox, NonGeoBoundingBox} 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';
+
+// Tileset2D
+
+export type {GeoBoundingBox, NonGeoBoundingBox} from './tileset-2d';
+export type {TileLoadProps as _TileLoadProps} from './tileset-2d';
+
+export {getURLFromTemplate as _getURLFromTemplate} from './tileset-2d';
+export {Tileset2D as _Tileset2D} from './tileset-2d';
+export {Tile2DHeader as _Tile2DHeader} from './tileset-2d';

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

@@ -1,6 +1,6 @@
 import {Viewport} from '@deck.gl/core';
 import {lerp} from '@math.gl/core';
-import {GeoBoundingBox} from '../tile-layer/types';
+import {GeoBoundingBox} from '../tileset-2d';
 
 const availableTransformations = {
   Point,

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

@@ -10,23 +10,30 @@ import {
   DefaultProps
 } from '@deck.gl/core';
 import {GeoJsonLayer, GeoJsonLayerProps} from '@deck.gl/layers';
+import {ClipExtension} from '@deck.gl/extensions';
+
 import {Matrix4} from '@math.gl/core';
 import {MVTWorkerLoader} from '@loaders.gl/mvt';
 import {binaryToGeojson} from '@loaders.gl/gis';
-import {ClipExtension} from '@deck.gl/extensions';
 
 import type {Loader} from '@loaders.gl/loader-utils';
 import type {BinaryFeatures} from '@loaders.gl/schema';
 import type {Feature} from 'geojson';
 
-import TileLayer, {TiledPickingInfo, TileLayerProps} from '../tile-layer/tile-layer';
-import Tileset2D, {Tileset2DProps} from '../tile-layer/tileset-2d';
-import {getURLFromTemplate, isGeoBoundingBox, isURLTemplate} from '../tile-layer/utils';
-import {GeoBoundingBox, TileLoadProps} from '../tile-layer/types';
-import Tile2DHeader from '../tile-layer/tile-2d-header';
 import {transform} from './coordinate-transform';
 import findIndexBinary from './find-index-binary';
 
+import TileLayer, {TiledPickingInfo, TileLayerProps} from '../tile-layer/tile-layer';
+
+import type {Tileset2DProps, TileLoadProps, GeoBoundingBox} from '../tileset-2d';
+import {
+  Tileset2D,
+  Tile2DHeader,
+  getURLFromTemplate,
+  isGeoBoundingBox,
+  isURLTemplate
+} from '../tileset-2d';
+
 const WORLD_SIZE = 512;
 
 const defaultProps: DefaultProps<MVTLayerProps> = {
@@ -285,7 +292,7 @@ export default class MVTLayer<DataT extends Feature = Feature, ExtraProps = {}>
     if (info.object && !isWGS84) {
       info.object = transformTileCoordsToWGS84(
         info.object,
-        info.tile!.bbox as GeoBoundingBox,
+        info.tile!.bbox as GeoBoundingBox, // eslint-disable-line
         this.context.viewport
       );
     }

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

@@ -35,9 +35,8 @@ import {COORDINATE_SYSTEM} from '@deck.gl/core';
 import type {MeshAttributes} from '@loaders.gl/schema';
 import {TerrainWorkerLoader} from '@loaders.gl/terrain';
 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';
+import type {Bounds, GeoBoundingBox, TileBoundingBox, TileLoadProps, ZRange} from '../tileset-2d';
+import {Tile2DHeader, urlType, getURLFromTemplate} from '../tileset-2d';
 
 const DUMMY_DATA = [1];
 

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

@@ -114,6 +114,7 @@ export default class Tile3DLayer<DataT = any, ExtraPropsT = {}> extends Composit
 
   updateState({props, oldProps, changeFlags}: UpdateParameters<this>): void {
     if (props.data && props.data !== oldProps.data) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
       this._loadTileset(props.data);
     }
 
@@ -235,6 +236,8 @@ export default class Tile3DLayer<DataT = any, ExtraPropsT = {}> extends Composit
     if (!timeline || !viewportsNumber || !tileset3d) {
       return;
     }
+
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     tileset3d.selectTiles(Object.values(viewports)).then(frameNumber => {
       const tilesetChanged = this.state.frameNumber !== frameNumber;
       if (tilesetChanged) {

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

@@ -12,11 +12,16 @@ import {
 } from '@deck.gl/core';
 import {GeoJsonLayer} from '@deck.gl/layers';
 import {LayersList} from '@deck.gl/core';
-import Tile2DHeader from './tile-2d-header';
 
-import Tileset2D, {RefinementStrategy, STRATEGY_DEFAULT, Tileset2DProps} from './tileset-2d';
-import {TileLoadProps, ZRange} from './types';
-import {urlType, getURLFromTemplate} from './utils';
+import type {TileLoadProps, ZRange} from '../tileset-2d';
+import {
+  Tileset2D,
+  Tile2DHeader,
+  RefinementStrategy,
+  STRATEGY_DEFAULT,
+  Tileset2DProps
+} from '../tileset-2d';
+import {urlType, getURLFromTemplate} from '../tileset-2d';
 
 const defaultProps: DefaultProps<TileLayerProps> = {
   TilesetClass: Tileset2D,
@@ -77,7 +82,7 @@ type _TileLayerProps<DataT> = {
   onTileUnload?: (tile: Tile2DHeader<DataT>) => void;
 
   /** Called when a tile failed to load. */
-  onTileError?: (err: any) => void;
+  onTileError?: (err: any, tile?) => void;
 
   /** The bounding box of the layer's data. */
   extent?: number[] | null;
@@ -310,7 +315,9 @@ export default class TileLayer<DataT = any, ExtraPropsT = {}> extends CompositeL
   }
 
   getPickingInfo({info, sourceLayer}: GetPickingInfoParams): TiledPickingInfo<DataT> {
-    (info as any).tile = (sourceLayer as any).props.tile;
+    if (info.picked) {
+      (info as any).tile = (sourceLayer as any).props.tile;
+    }
     return info;
   }
 

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

@@ -0,0 +1,24 @@
+// deck.gl, MIT license
+
+export type {
+  TileLoadProps,
+  Bounds,
+  ZRange,
+  GeoBoundingBox,
+  NonGeoBoundingBox,
+  TileBoundingBox
+} from './types';
+
+export type {Tileset2DProps, RefinementStrategy} from './tileset-2d';
+export {Tileset2D, STRATEGY_DEFAULT} from './tileset-2d';
+
+export {Tile2DHeader} from './tile-2d-header';
+
+export {
+  isGeoBoundingBox,
+  isURLTemplate,
+  urlType,
+  getURLFromTemplate,
+  getTileIndices,
+  tileToBoundingBox
+} from './utils';

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

@@ -0,0 +1,45 @@
+// deck.gl, MIT license
+// @note - this is a duplicate of the deck.gl core export (because Tileset2D should be deck.gl independent)
+
+/**
+ * Speed up consecutive function calls by caching the result of calls with identical input
+ * https://en.wikipedia.org/wiki/Memoization
+ * @param compute - the function to be memoized
+ */
+export function memoize<In, Out>(compute: (args: In) => Out): (args: In) => Out {
+  let cachedArgs: any = {};
+  let cachedResult: Out;
+
+  return (args: In) => {
+    for (const key in args) {
+      if (!isEqual(args[key], cachedArgs[key])) {
+        cachedResult = compute(args);
+        cachedArgs = args;
+        break;
+      }
+    }
+    return cachedResult;
+  };
+}
+
+function isEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if (Array.isArray(a)) {
+    // Special treatment for arrays: compare 1-level deep
+    // This is to support equality of matrix/coordinate props
+    const len = a.length;
+    if (!b || b.length !== len) {
+      return false;
+    }
+
+    for (let i = 0; i < len; i++) {
+      if (a[i] !== b[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return false;
+}

package/src/{tile-layer → tileset-2d}/tile-2d-header.ts

@@ -1,5 +1,4 @@
 /* eslint-env browser */
-import {Layer, log} from '@deck.gl/core';
 import {RequestScheduler} from '@loaders.gl/loader-utils';
 import {TileBoundingBox, TileIndex, TileLoadProps} from './types';
 
@@ -10,7 +9,7 @@ export type TileLoadDataProps<DataT = any> = {
   onError: (error: any, tile: Tile2DHeader<DataT>) => void;
 };
 
-export default class Tile2DHeader<DataT = any> {
+export class Tile2DHeader<DataT = any> {
   index: TileIndex;
   isVisible: boolean;
   isSelected: boolean;
@@ -18,7 +17,7 @@ export default class Tile2DHeader<DataT = any> {
   children: Tile2DHeader[] | null;
   content: DataT | null;
   state?: number;
-  layers?: Layer[] | null;
+  layers?: any[] | null; // Layer[] | null
 
   id!: string; // assigned _always_ with result of `getTileId`
   bbox!: TileBoundingBox; // assigned _always_ with result of `getTileMetadata`
@@ -68,7 +67,8 @@ export default class Tile2DHeader<DataT = any> {
   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')();
+      // eslint-disable-next-line no-console
+      console.error('byteLength not defined in tile data');
     }
     return result;
   }

package/src/{tile-layer → tileset-2d}/tile-2d-traversal.ts

@@ -1,5 +1,5 @@
-/* eslint-disable complexity */
 import {Viewport, WebMercatorViewport, _GlobeViewport} from '@deck.gl/core';
+
 import {
   CullingVolume,
   Plane,
@@ -63,6 +63,7 @@ class OSMNode {
     return this._children;
   }
 
+  // eslint-disable-next-line complexity
   update(params: {
     viewport: Viewport;
     project: ((xyz: number[]) => number[]) | null;
@@ -178,6 +179,7 @@ class OSMNode {
   }
 }
 
+// eslint-disable-next-line complexity
 export function getOSMTileIndices(
   viewport: Viewport,
   maxZ: number,

package/src/{tile-layer → tileset-2d}/tileset-2d.ts

@@ -1,11 +1,14 @@
-import Tile2DHeader from './tile-2d-header';
-import {getTileIndices, tileToBoundingBox, getCullBounds} from './utils';
+import {Viewport} from '@deck.gl/core';
+
 import {RequestScheduler} from '@loaders.gl/loader-utils';
 import {Matrix4, equals} from '@math.gl/core';
-import {Viewport} from '@deck.gl/core';
+
+import {Tile2DHeader} from './tile-2d-header';
+
+import {getTileIndices, tileToBoundingBox, getCullBounds} from './utils';
 import {Bounds, TileIndex, ZRange} from './types';
-import {TileLayerProps} from './tile-layer';
-import {_memoize as memoize} from '@deck.gl/core';
+import {TileLoadProps} from './types';
+import {memoize} from './memoize';
 
 // bit masks
 const TILE_STATE_VISITED = 1;
@@ -35,9 +38,9 @@ export const STRATEGY_DEFAULT = 'best-available';
 
 export type RefinementStrategyFunction = (tiles: Tile2DHeader[]) => void;
 export type RefinementStrategy =
-  | typeof STRATEGY_NEVER
-  | typeof STRATEGY_REPLACE
-  | typeof STRATEGY_DEFAULT
+  | 'never'
+  | 'no-overlap'
+  | 'best-available'
   | RefinementStrategyFunction;
 
 const DEFAULT_CACHE_SCALE = 5;
@@ -48,30 +51,71 @@ const STRATEGIES = {
   [STRATEGY_NEVER]: () => {}
 };
 
-export type Tileset2DProps = Pick<
-  Required<TileLayerProps>,
-  | 'tileSize'
-  | 'maxCacheSize'
-  | 'maxCacheByteSize'
-  | 'refinementStrategy'
-  | 'extent'
-  | 'maxZoom'
-  | 'minZoom'
-  | 'maxRequests'
-  | 'zoomOffset'
-> & {
-  getTileData: NonNullable<TileLayerProps['getTileData']>;
-  onTileLoad: (tile: Tile2DHeader) => void;
-  onTileUnload: (tile: Tile2DHeader) => void;
-  onTileError: (error: any, tile: Tile2DHeader) => void;
+export type Tileset2DProps<DataT = any> = {
+  /** `getTileData` is called to retrieve the data of each tile. */
+  getTileData: (props: TileLoadProps) => Promise<DataT> | DataT;
+
+  /** The bounding box of the layer's data. */
+  extent?: number[] | null;
+  /** The pixel dimension of the tiles, usually a power of 2. */
+  tileSize?: number;
+  /** The max zoom level of the layer's data. @default null */
+  maxZoom?: number | null;
+  /** 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 | null;
+  /** The maximum memory used for caching tiles. @default null */
+  maxCacheByteSize?: number | null;
+  /** How the tile layer refines the visibility of tiles. @default 'best-available' */
+  refinementStrategy?: RefinementStrategy;
+  /** Range of minimum and maximum heights in the tile. */
+  zRange?: ZRange | null;
+  /** The maximum number of concurrent getTileData calls. @default 6 */
+  maxRequests?: number;
+  /** Changes the zoom level at which the tiles are fetched. Needs to be an integer. @default 0 */
+  zoomOffset?: number;
+
+  /** Called when a tile successfully loads. */
+  onTileLoad?: (tile: Tile2DHeader<DataT>) => void;
+  /** Called when a tile is cleared from cache. */
+  onTileUnload?: (tile: Tile2DHeader<DataT>) => void;
+  /** Called when a tile failed to load. */
+  onTileError?: (err: any, tile: Tile2DHeader<DataT>) => void;
+
+  // onTileLoad: (tile: Tile2DHeader) => void;
+  // onTileUnload: (tile: Tile2DHeader) => void;
+  // onTileError: (error: any, tile: Tile2DHeader) => void;
+  /** Called when all tiles in the current viewport are loaded. */
+  // sonViewportLoad?: ((tiles: Tile2DHeader<DataT>[]) => void) | null;
+};
+
+export const DEFAULT_TILESET2D_PROPS: Omit<Required<Tileset2DProps>, 'getTileData'> = {
+  extent: null,
+  tileSize: 512,
+
+  maxZoom: null,
+  minZoom: null,
+  maxCacheSize: null,
+  maxCacheByteSize: null,
+  refinementStrategy: 'best-available',
+  zRange: null,
+  maxRequests: 6,
+  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. */
+  // onViewportLoad: ((tiles: Tile2DHeader<DataT>[]) => void) | null,
+  onTileLoad: () => {},
+  onTileUnload: () => {},
+  onTileError: () => {}
 };
 
 /**
  * Manages loading and purging of tile data. This class caches recently visited tiles
  * and only creates new tiles if they are present.
  */
-export default class Tileset2D {
-  private opts: Tileset2DProps;
+export class Tileset2D {
+  private opts: Required<Tileset2DProps>;
   private _requestScheduler: RequestScheduler;
   private _cache: Map<string, Tile2DHeader>;
   private _dirty: boolean;
@@ -95,10 +139,10 @@ export default class Tileset2D {
    * Cache size defaults to 5 * number of tiles in the current viewport
    */
   constructor(opts: Tileset2DProps) {
-    this.opts = opts;
+    this.opts = {...DEFAULT_TILESET2D_PROPS, ...opts};
 
     this.onTileLoad = tile => {
-      this.opts.onTileLoad(tile);
+      this.opts.onTileLoad?.(tile);
       if (this.opts.maxCacheByteSize) {
         this._cacheByteSize += tile.byteLength;
         this._resizeCache();
@@ -107,7 +151,7 @@ export default class Tileset2D {
 
     this._requestScheduler = new RequestScheduler({
       maxRequests: opts.maxRequests,
-      throttleRequests: opts.maxRequests > 0
+      throttleRequests: Boolean(opts.maxRequests && opts.maxRequests > 0)
     });
 
     // Maps tile id in string {z}-{x}-{y} to a Tile object
@@ -242,19 +286,27 @@ export default class Tileset2D {
     }
 
     if (cullRect && this._viewport) {
-      const [minX, minY, maxX, maxY] = getCullBounds({
+      const boundsArr = this._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;
+      for (const [minX, minY, maxX, maxY] of boundsArr) {
+        let overlaps;
+        if ('west' in bbox) {
+          overlaps = bbox.west < maxX && bbox.east > minX && bbox.south < maxY && bbox.north > minY;
+        } else {
+          // 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);
+          overlaps = bbox.left < maxX && bbox.right > minX && y0 < maxY && y1 > minY;
+        }
+        if (overlaps) {
+          return true;
+        }
       }
-      // 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 false;
     }
     return true;
   }
@@ -358,7 +410,7 @@ export default class Tileset2D {
   private _getCullBounds = memoize(getCullBounds);
 
   private _pruneRequests(): void {
-    const {maxRequests} = this.opts;
+    const {maxRequests = 0} = this.opts;
 
     const abortCandidates: Tile2DHeader[] = [];
     let ongoingRequestCount = 0;
@@ -419,11 +471,11 @@ export default class Tileset2D {
 
     if (overflown) {
       for (const [id, tile] of _cache) {
-        if (!tile.isVisible) {
+        if (!tile.isVisible && !tile.isSelected) {
           // delete tile
           this._cacheByteSize -= opts.maxCacheByteSize ? tile.byteLength : 0;
           _cache.delete(id);
-          this.opts.onTileUnload(tile);
+          this.opts.onTileUnload?.(tile);
         }
         if (_cache.size <= maxCacheSize && this._cacheByteSize <= maxCacheByteSize) {
           break;

package/src/{tile-layer → tileset-2d}/utils.ts

@@ -130,7 +130,7 @@ function getBoundingBox(viewport: Viewport, zRange: number[] | null, extent: Bou
 /** Get culling bounds in world space */
 export function getCullBounds({
   viewport,
-  z,
+  z = 0,
   cullRect
 }: {
   /** Current viewport */
@@ -139,13 +139,25 @@ export function getCullBounds({
   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;
+}): [number, number, number, number][] {
+  const subViewports = viewport.subViewports || [viewport];
+  return subViewports.map(v => getCullBoundsInViewport(v, z, cullRect));
+}
 
+function getCullBoundsInViewport(
+  /** Current viewport */
+  viewport: Viewport,
+  /** At altitude */
+  z: ZRange | number,
+  /** Culling rectangle in screen space */
+  cullRect: {x: number; y: number; width: number; height: number}
+): [number, number, number, number] {
   if (!Array.isArray(z)) {
-    const unprojectOption = {targetZ: z || 0};
+    const x = cullRect.x - viewport.x;
+    const y = cullRect.y - viewport.y;
+    const {width, height} = cullRect;
+
+    const unprojectOption = {targetZ: z};
 
     const topLeft = viewport.unproject([x, y], unprojectOption);
     const topRight = viewport.unproject([x + width, y], unprojectOption);
@@ -160,8 +172,8 @@ export function getCullBounds({
     ];
   }
 
-  const bounds0 = getCullBounds({viewport, z: z[0], cullRect});
-  const bounds1 = getCullBounds({viewport, z: z[1], cullRect});
+  const bounds0 = getCullBoundsInViewport(viewport, z[0], cullRect);
+  const bounds1 = getCullBoundsInViewport(viewport, z[1], cullRect);
 
   return [
     Math.min(bounds0[0], bounds1[0]),

package/typed/geo-cell-layer/GeoCellLayer.js

@@ -0,0 +1,49 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { PolygonLayer } from '@deck.gl/layers';
+const defaultProps = {
+    ...PolygonLayer.defaultProps
+};
+export default class GeoCellLayer extends CompositeLayer {
+    /** Implement to generate props to create geometry. */
+    indexToBounds() {
+        return null;
+    }
+    renderLayers() {
+        // Rendering props underlying layer
+        const { elevationScale, extruded, wireframe, filled, stroked, lineWidthUnits, lineWidthScale, lineWidthMinPixels, lineWidthMaxPixels, lineJointRounded, lineMiterLimit, lineDashJustified, getElevation, getFillColor, getLineColor, getLineWidth } = this.props;
+        // Accessor props for underlying layers
+        const { updateTriggers, material, transitions } = this.props;
+        // Filled Polygon Layer
+        const CellLayer = this.getSubLayerClass('cell', PolygonLayer);
+        return new CellLayer({
+            filled,
+            wireframe,
+            extruded,
+            elevationScale,
+            stroked,
+            lineWidthUnits,
+            lineWidthScale,
+            lineWidthMinPixels,
+            lineWidthMaxPixels,
+            lineJointRounded,
+            lineMiterLimit,
+            lineDashJustified,
+            material,
+            transitions,
+            getElevation,
+            getFillColor,
+            getLineColor,
+            getLineWidth
+        }, this.getSubLayerProps({
+            id: 'cell',
+            updateTriggers: updateTriggers && {
+                getElevation: updateTriggers.getElevation,
+                getFillColor: updateTriggers.getFillColor,
+                getLineColor: updateTriggers.getLineColor,
+                getLineWidth: updateTriggers.getLineWidth
+            }
+        }), this.indexToBounds());
+    }
+}
+GeoCellLayer.layerName = 'GeoCellLayer';
+GeoCellLayer.defaultProps = defaultProps;