@deck.gl/geo-layers 8.8.0-alpha.2 → 8.8.0-alpha.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-alpha.2",
+  "version": "8.8.0-alpha.5",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,7 @@
   "files": [
     "dist",
     "src",
+    "typed",
     "dist.min.js"
   ],
   "sideEffects": false,
@@ -33,12 +34,14 @@
     "@loaders.gl/gis": "^3.2.0-alpha.4",
     "@loaders.gl/loader-utils": "^3.2.0-alpha.4",
     "@loaders.gl/mvt": "^3.2.0-alpha.4",
+    "@loaders.gl/schema": "^3.2.0-alpha.4",
     "@loaders.gl/terrain": "^3.2.0-alpha.4",
     "@loaders.gl/tiles": "^3.2.0-alpha.4",
-    "@luma.gl/experimental": "^8.5.10",
+    "@luma.gl/experimental": "^8.5.13",
     "@math.gl/core": "3.6.0-alpha.5",
     "@math.gl/culling": "3.6.0-alpha.5",
     "@math.gl/web-mercator": "3.6.0-alpha.5",
+    "@types/geojson": "^7946.0.8",
     "h3-js": "^3.6.0",
     "long": "^3.2.0"
   },
@@ -49,5 +52,5 @@
     "@deck.gl/mesh-layers": "^8.0.0",
     "@loaders.gl/core": "^3.0.0"
   },
-  "gitHead": "a52215449dff06fb683f5afd6399526353d11f35"
+  "gitHead": "a5e210f62321ab78b7cacbcd0614e0ffcdf6bca7"
 }

package/src/geo-cell-layer/{GeoCellLayer.js → GeoCellLayer.ts}

@@ -1,17 +1,24 @@
-import {CompositeLayer} from '@deck.gl/core';
-import {PolygonLayer} from '@deck.gl/layers';
+import {CompositeLayer, Layer, LayersList} from '@deck.gl/core';
+import {PolygonLayer, PolygonLayerProps} from '@deck.gl/layers';
 
 const defaultProps = {
   ...PolygonLayer.defaultProps
 };
 
-export default class GeoCellLayer extends CompositeLayer {
-  // Implement to generate props to create geometry
-  indexToBounds() {
+export type GeoCellLayerProps<DataT = any> = PolygonLayerProps<DataT>;
+
+export default class GeoCellLayer<DataT = any, ExtraProps = {}> extends CompositeLayer<
+  Required<GeoCellLayerProps<DataT>> & ExtraProps
+> {
+  static layerName = 'GeoCellLayer';
+  static defaultProps = defaultProps;
+
+  /** Implement to generate props to create geometry. */
+  indexToBounds(): Partial<GeoCellLayer['props']> | null {
     return null;
   }
 
-  renderLayers() {
+  renderLayers(): Layer | null | LayersList {
     // Rendering props underlying layer
     const {
       elevationScale,
@@ -64,7 +71,7 @@ export default class GeoCellLayer extends CompositeLayer {
       },
       this.getSubLayerProps({
         id: 'cell',
-        updateTriggers: {
+        updateTriggers: updateTriggers && {
           getElevation: updateTriggers.getElevation,
           getFillColor: updateTriggers.getFillColor,
           getLineColor: updateTriggers.getLineColor,
@@ -75,6 +82,3 @@ export default class GeoCellLayer extends CompositeLayer {
     );
   }
 }
-
-GeoCellLayer.layerName = 'GeoCellLayer';
-GeoCellLayer.defaultProps = defaultProps;

package/src/index.ts

@@ -32,7 +32,10 @@ export {default as MVTLayer} from './mvt-layer/mvt-layer';
 
 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 {TileLayerProps} from './tile-layer/tile-layer';
+export type {QuadkeyLayerProps} from './quadkey-layer/quadkey-layer';
+export type {TileLoadProps as _TileLoadProps} from './tile-layer/types';
+export type {MVTLayerProps} from './mvt-layer/mvt-layer';

package/src/mvt-layer/{coordinate-transform.js → coordinate-transform.ts}

@@ -1,4 +1,6 @@
+import {Viewport} from '@deck.gl/core';
 import {lerp} from '@math.gl/core';
+import {GeoBoundingBox} from '../tile-layer/types';
 
 const availableTransformations = {
   Point,
@@ -9,38 +11,38 @@ const availableTransformations = {
   MultiPolygon
 };
 
-function Point([pointX, pointY], [nw, se], viewport) {
+function Point([pointX, pointY]: [number, number], [nw, se]: number[][], viewport: Viewport) {
   const x = lerp(nw[0], se[0], pointX);
   const y = lerp(nw[1], se[1], pointY);
 
   return viewport.unprojectFlat([x, y]);
 }
 
-function getPoints(geometry, bbox, viewport) {
+function getPoints(geometry, bbox: number[][], viewport: Viewport) {
   return geometry.map(g => Point(g, bbox, viewport));
 }
 
-function MultiPoint(multiPoint, bbox, viewport) {
+function MultiPoint(multiPoint, bbox: number[][], viewport: Viewport) {
   return getPoints(multiPoint, bbox, viewport);
 }
 
-function LineString(line, bbox, viewport) {
+function LineString(line, bbox: number[][], viewport: Viewport) {
   return getPoints(line, bbox, viewport);
 }
 
-function MultiLineString(multiLineString, bbox, viewport) {
+function MultiLineString(multiLineString, bbox: number[][], viewport: Viewport) {
   return multiLineString.map(lineString => LineString(lineString, bbox, viewport));
 }
 
-function Polygon(polygon, bbox, viewport) {
+function Polygon(polygon, bbox: number[][], viewport: Viewport) {
   return polygon.map(polygonRing => getPoints(polygonRing, bbox, viewport));
 }
 
-function MultiPolygon(multiPolygon, bbox, viewport) {
+function MultiPolygon(multiPolygon, bbox: number[][], viewport: Viewport) {
   return multiPolygon.map(polygon => Polygon(polygon, bbox, viewport));
 }
 
-export function transform(geometry, bbox, viewport) {
+export function transform(geometry, bbox: GeoBoundingBox, viewport: Viewport) {
   const nw = viewport.projectFlat([bbox.west, bbox.north]);
   const se = viewport.projectFlat([bbox.east, bbox.south]);
   const projectedBbox = [nw, se];

package/src/mvt-layer/{find-index-binary.js → find-index-binary.ts}

@@ -1,3 +1,12 @@
+import type {
+  BinaryFeatures,
+  BinaryLineFeatures,
+  BinaryPointFeatures,
+  BinaryPolygonFeatures
+} from '@loaders.gl/schema';
+
+type FeatureTypes = BinaryPointFeatures | BinaryLineFeatures | BinaryPolygonFeatures;
+
 const GEOM_TYPES = ['points', 'lines', 'polygons'];
 /**
  * Return the index of feature (numericProps or featureIds) for given feature id
@@ -8,7 +17,12 @@ const GEOM_TYPES = ['points', 'lines', 'polygons'];
  * @param {Number|String} featureId - feature id to find
  * @param {String} layerName - the layer to search in
  */
-export default function findIndexBinary(data, uniqueIdProperty, featureId, layerName) {
+export default function findIndexBinary(
+  data: BinaryFeatures,
+  uniqueIdProperty: string,
+  featureId: string | number,
+  layerName: string
+): number {
   for (const gt of GEOM_TYPES) {
     const index = data[gt] && findIndexByType(data[gt], uniqueIdProperty, featureId, layerName);
     if (index >= 0) {
@@ -19,7 +33,12 @@ export default function findIndexBinary(data, uniqueIdProperty, featureId, layer
   return -1;
 }
 
-function findIndexByType(geomData, uniqueIdProperty, featureId, layerName) {
+function findIndexByType(
+  geomData: FeatureTypes,
+  uniqueIdProperty: string,
+  featureId: string | number,
+  layerName: string
+): number {
   const featureIds = geomData.featureIds.value;
 
   if (!featureIds.length) {
@@ -53,10 +72,10 @@ function findIndexByType(geomData, uniqueIdProperty, featureId, layerName) {
       startFeatureIndex,
       endFeatureIndex
     );
-  } else {
+  } else if (geomData.fields) {
     featureIndex = findIndex(
       geomData.fields,
-      elem => elem.id === featureId,
+      (elem: any) => elem.id === featureId,
       startFeatureIndex,
       endFeatureIndex
     );
@@ -64,15 +83,22 @@ function findIndexByType(geomData, uniqueIdProperty, featureId, layerName) {
   return featureIndex >= 0 ? getGlobalFeatureId(geomData, featureIndex) : -1;
 }
 
+type LayerRange = [firstFeatureIndex: number, lastFeatureIndex: number];
+
 // Returns [firstFeatureIndex, lastFeatureIndex]
 // MVTLoader parses tiles layer-by-layer, so each layer is a continuous range
-function getLayerRange(geomData, layerName) {
+function getLayerRange(
+  geomData: FeatureTypes & {
+    __layers?: Record<string, LayerRange>;
+  },
+  layerName: string
+): LayerRange | undefined {
   if (!geomData.__layers) {
     // Cache a map from properties.layerName to index ranges
-    const layerNames = {};
+    const layerNames: Record<string, LayerRange> = {};
     const {properties} = geomData;
     for (let i = 0; i < properties.length; i++) {
-      const {layerName: key} = properties[i];
+      const {layerName: key} = properties[i] as Record<string, any>;
       if (!key) {
         // ignore
       } else if (layerNames[key]) {
@@ -87,10 +113,10 @@ function getLayerRange(geomData, layerName) {
 }
 
 // Returns global feature id
-function getGlobalFeatureId(geomData, featureIndex) {
+function getGlobalFeatureId(geomData, featureIndex: number) {
   if (!geomData.__ids) {
     // Cache a map from featureId to globalFeatureId
-    const result = [];
+    const result: string[] = [];
     const featureIds = geomData.featureIds.value;
     const globalFeatureIds = geomData.globalFeatureIds.value;
     for (let i = 0; i < featureIds.length; i++) {
@@ -102,7 +128,12 @@ function getGlobalFeatureId(geomData, featureIndex) {
 }
 
 // Like array.findIndex, but only search within a range
-function findIndex(array, predicate, startIndex, endIndex) {
+function findIndex<T>(
+  array: T[],
+  predicate: (v: T, index: number) => boolean,
+  startIndex: number,
+  endIndex: number
+): number {
   for (let i = startIndex; i < endIndex; i++) {
     if (predicate(array[i], i)) {
       return i;

package/src/mvt-layer/{mvt-layer.js → mvt-layer.ts}

@@ -1,17 +1,31 @@
-import {log} from '@deck.gl/core';
+import {
+  Layer,
+  LayersList,
+  log,
+  PickingInfo,
+  UpdateParameters,
+  GetPickingInfoParams,
+  Viewport,
+  COORDINATE_SYSTEM
+} from '@deck.gl/core';
+import {GeoJsonLayer, GeoJsonLayerProps} from '@deck.gl/layers';
 import {Matrix4} from '@math.gl/core';
 import {MVTWorkerLoader} from '@loaders.gl/mvt';
 import {binaryToGeojson} from '@loaders.gl/gis';
-import {COORDINATE_SYSTEM} from '@deck.gl/core';
 import {ClipExtension} from '@deck.gl/extensions';
 
-import TileLayer from '../tile-layer/tile-layer';
-import {getURLFromTemplate, isURLTemplate} from '../tile-layer/utils';
+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 {GeoJsonLayer} from '@deck.gl/layers';
-
 const WORLD_SIZE = 512;
 
 const defaultProps = {
@@ -22,8 +36,61 @@ const defaultProps = {
   binary: true
 };
 
-export default class MVTLayer extends TileLayer {
-  initializeState() {
+export type TileJson = {
+  tilejson: string;
+  tiles: string[];
+  // eslint-disable-next-line camelcase
+  vector_layers: any[];
+  attribution?: string;
+  scheme?: string;
+  maxzoom?: number;
+  minzoom?: number;
+  version?: string;
+};
+
+type ParsedMvtTile = Feature[] | BinaryFeatures;
+
+/** All props supported by the MVTLayer */
+export type MVTLayerProps<DataT extends Feature = Feature> = _MVTLayerProps &
+  GeoJsonLayerProps<DataT> &
+  TileLayerProps<ParsedMvtTile>;
+
+/** Props added by the MVTLayer  */
+export type _MVTLayerProps = {
+  /** Called if `data` is a TileJSON URL when it is successfully fetched. */
+  onDataLoad?: ((tilejson: TileJson | null) => void) | null;
+
+  /** Needed for highlighting a feature split across two or more tiles. */
+  uniqueIdProperty?: string;
+
+  /** A feature with ID corresponding to the supplied value will be highlighted. */
+  highlightedFeatureId?: string | null;
+
+  /**
+   * Use tile data in binary format.
+   *
+   * @default true
+   */
+  binary?: boolean;
+
+  /**
+   * Loaders used to transform tiles into `data` property passed to `renderSubLayers`.
+   *
+   * @default [MVTWorkerLoader] from `@loaders.gl/mvt`
+   */
+  loaders?: Loader[];
+};
+
+type ContentWGS84Cache = {_contentWGS84?: Feature[]};
+
+export default class MVTLayer<DataT extends Feature = Feature, ExtraProps = {}> extends TileLayer<
+  ParsedMvtTile,
+  Required<_MVTLayerProps> & ExtraProps
+> {
+  static layerName = 'MVTLayer';
+  static defaultProps = defaultProps;
+
+  initializeState(): void {
     super.initializeState();
     // GlobeView doesn't work well with binary data
     const binary = this.context.viewport.resolution !== undefined ? false : this.props.binary;
@@ -34,16 +101,17 @@ export default class MVTLayer extends TileLayer {
     });
   }
 
-  get isLoaded() {
-    return this.state.data && this.state.tileset && super.isLoaded;
+  get isLoaded(): boolean {
+    return this.state && this.state.data && this.state.tileset && super.isLoaded;
   }
 
-  updateState({props, oldProps, context, changeFlags}) {
+  updateState({props, oldProps, context, changeFlags}: UpdateParameters<this>) {
     if (changeFlags.dataChanged) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
       this._updateTileData();
     }
 
-    if (this.state.data) {
+    if (this.state?.data) {
       super.updateState({props, oldProps, context, changeFlags});
       this._setWGS84PropertyForTiles();
     }
@@ -54,22 +122,22 @@ export default class MVTLayer extends TileLayer {
   }
 
   /* eslint-disable complexity */
-  async _updateTileData() {
-    let {data} = this.props;
-    let tileJSON = null;
+  private async _updateTileData(): Promise<void> {
+    let data: any = this.props.data;
+    let tileJSON: any = null;
 
     if (typeof data === 'string' && !isURLTemplate(data)) {
       const {onDataLoad, fetch} = this.props;
       this.setState({data: null, tileJSON: null});
       try {
         tileJSON = await fetch(data, {propName: 'data', layer: this, loaders: []});
-      } catch (error) {
+      } catch (error: any) {
         this.raiseError(error, 'loading TileJSON');
         data = null;
       }
 
       if (onDataLoad) {
-        onDataLoad(tileJSON);
+        onDataLoad(tileJSON, {propName: 'data', layer: this});
       }
     } else if (data.tilejson) {
       tileJSON = data;
@@ -82,20 +150,21 @@ export default class MVTLayer extends TileLayer {
     this.setState({data, tileJSON});
   }
 
-  _getTilesetOptions(props) {
-    const opts = super._getTilesetOptions(props);
-    const {tileJSON} = this.state;
+  _getTilesetOptions(): Tileset2DProps {
+    const opts = super._getTilesetOptions();
+    const tileJSON: TileJson | null | undefined = this.state.tileJSON;
+    const {minZoom, maxZoom} = this.props;
 
     if (tileJSON) {
-      if (Number.isFinite(tileJSON.minzoom) && tileJSON.minzoom > props.minZoom) {
-        opts.minZoom = tileJSON.minzoom;
+      if (Number.isFinite(tileJSON.minzoom) && (tileJSON.minzoom as number) > (minZoom as number)) {
+        opts.minZoom = tileJSON.minzoom as number;
       }
 
       if (
         Number.isFinite(tileJSON.maxzoom) &&
-        (!Number.isFinite(props.maxZoom) || tileJSON.maxzoom < props.maxZoom)
+        (!Number.isFinite(maxZoom) || (tileJSON.maxzoom as number) < (maxZoom as number))
       ) {
-        opts.maxZoom = tileJSON.maxzoom;
+        opts.maxZoom = tileJSON.maxzoom as number;
       }
     }
     return opts;
@@ -103,20 +172,21 @@ export default class MVTLayer extends TileLayer {
 
   /* eslint-disable complexity */
 
-  renderLayers() {
-    if (!this.state.data) return null;
+  renderLayers(): Layer | null | LayersList {
+    if (!this.state?.data) return null;
     return super.renderLayers();
   }
 
-  getTileData(tile) {
-    const url = getURLFromTemplate(this.state.data, tile);
+  getTileData(loadProps: TileLoadProps): Promise<ParsedMvtTile> {
+    const {data, binary} = this.state;
+    const {index, signal} = loadProps;
+
+    const url = getURLFromTemplate(data, loadProps);
     if (!url) {
       return Promise.reject('Invalid URL');
     }
     let loadOptions = this.getLoadOptions();
-    const {binary} = this.state;
     const {fetch} = this.props;
-    const {signal, index} = tile;
     loadOptions = {
       ...loadOptions,
       mimeType: 'application/x-protobuf',
@@ -134,7 +204,14 @@ export default class MVTLayer extends TileLayer {
     return fetch(url, {propName: 'data', layer: this, loadOptions, signal});
   }
 
-  renderSubLayers(props) {
+  renderSubLayers(
+    props: TileLayer['props'] & {
+      id: string;
+      data: ParsedMvtTile;
+      _offset: number;
+      tile: Tile2DHeader<ParsedMvtTile>;
+    }
+  ): Layer | null | LayersList {
     const {x, y, z} = props.tile.index;
     const worldScale = Math.pow(2, z);
 
@@ -164,7 +241,7 @@ export default class MVTLayer extends TileLayer {
     return subLayers;
   }
 
-  _updateAutoHighlight(info) {
+  protected _updateAutoHighlight(info: PickingInfo): void {
     const {uniqueIdProperty} = this.props;
 
     const {hoveredFeatureId, hoveredFeatureLayerName} = this.state;
@@ -193,30 +270,34 @@ export default class MVTLayer extends TileLayer {
     }
   }
 
-  getPickingInfo(params) {
+  getPickingInfo(params: GetPickingInfoParams): TiledPickingInfo {
     const info = super.getPickingInfo(params);
 
-    const isWGS84 = this.context.viewport.resolution;
+    const isWGS84 = Boolean(this.context.viewport.resolution);
 
     if (this.state.binary && info.index !== -1) {
-      const {data} = params.sourceLayer.props;
-      info.object = binaryToGeojson(data, {globalFeatureId: info.index});
+      const {data} = params.sourceLayer!.props;
+      info.object = binaryToGeojson(data as BinaryFeatures, {globalFeatureId: info.index}) as DataT;
     }
     if (info.object && !isWGS84) {
-      info.object = transformTileCoordsToWGS84(info.object, info.tile.bbox, this.context.viewport);
+      info.object = transformTileCoordsToWGS84(
+        info.object,
+        info.tile!.bbox as GeoBoundingBox,
+        this.context.viewport
+      );
     }
 
     return info;
   }
 
-  getSubLayerPropsByTile(tile) {
+  getSubLayerPropsByTile(tile: Tile2DHeader<ParsedMvtTile>): Record<string, any> {
     return {
       highlightedObjectIndex: this.getHighlightedObjectIndex(tile),
       highlightColor: this.state.highlightColor
     };
   }
 
-  getHighlightedObjectIndex(tile) {
+  private getHighlightedObjectIndex(tile: Tile2DHeader<ParsedMvtTile>): number {
     const {hoveredFeatureId, hoveredFeatureLayerName, binary} = this.state;
     const {uniqueIdProperty, highlightedFeatureId} = this.props;
     const data = tile.content;
@@ -253,42 +334,44 @@ export default class MVTLayer extends TileLayer {
     return -1;
   }
 
-  _pickObjects(maxObjects) {
+  private _pickObjects(maxObjects: number | null): PickingInfo[] {
     const {deck, viewport} = this.context;
     const width = viewport.width;
     const height = viewport.height;
     const x = viewport.x;
     const y = viewport.y;
     const layerIds = [this.id];
-    return deck.pickObjects({x, y, width, height, layerIds, maxObjects});
+    return deck!.pickObjects({x, y, width, height, layerIds, maxObjects});
   }
 
-  getRenderedFeatures(maxFeatures = null) {
+  /** Get the rendered features in the current viewport. */
+  getRenderedFeatures(maxFeatures: number | null = null): DataT[] {
     const features = this._pickObjects(maxFeatures);
     const featureCache = new Set();
-    const renderedFeatures = [];
+    const renderedFeatures: DataT[] = [];
 
     for (const f of features) {
       const featureId = getFeatureUniqueId(f.object, this.props.uniqueIdProperty);
 
       if (featureId === undefined) {
         // we have no id for the feature, we just add to the list
-        renderedFeatures.push(f.object);
+        renderedFeatures.push(f.object as DataT);
       } else if (!featureCache.has(featureId)) {
         // Add removing duplicates
         featureCache.add(featureId);
-        renderedFeatures.push(f.object);
+        renderedFeatures.push(f.object as DataT);
       }
     }
 
     return renderedFeatures;
   }
 
-  _setWGS84PropertyForTiles() {
+  private _setWGS84PropertyForTiles(): void {
     const propName = 'dataInWGS84';
-    const {tileset} = this.state;
+    const tileset: Tileset2D = this.state.tileset;
 
-    tileset.selectedTiles.forEach(tile => {
+    // @ts-expect-error selectedTiles are always initialized when tile is being processed
+    tileset.selectedTiles.forEach((tile: Tile2DHeader & ContentWGS84Cache) => {
       if (!tile.hasOwnProperty(propName)) {
         // eslint-disable-next-line accessor-pairs
         Object.defineProperty(tile, propName, {
@@ -304,11 +387,13 @@ export default class MVTLayer extends TileLayer {
               return [];
             }
 
-            if (tile._contentWGS84 === undefined) {
+            const {bbox} = tile;
+            if (tile._contentWGS84 === undefined && isGeoBoundingBox(bbox)) {
               // Create a cache to transform only once
+
               const content = this.state.binary ? binaryToGeojson(tile.content) : tile.content;
               tile._contentWGS84 = content.map(feature =>
-                transformTileCoordsToWGS84(feature, tile.bbox, this.context.viewport)
+                transformTileCoordsToWGS84(feature, bbox, this.context.viewport)
               );
             }
             return tile._contentWGS84;
@@ -319,8 +404,8 @@ export default class MVTLayer extends TileLayer {
   }
 }
 
-function getFeatureUniqueId(feature, uniqueIdProperty) {
-  if (uniqueIdProperty) {
+function getFeatureUniqueId(feature: Feature, uniqueIdProperty: string | undefined) {
+  if (feature.properties && uniqueIdProperty) {
     return feature.properties[uniqueIdProperty];
   }
 
@@ -331,15 +416,19 @@ function getFeatureUniqueId(feature, uniqueIdProperty) {
   return undefined;
 }
 
-function getFeatureLayerName(feature) {
+function getFeatureLayerName(feature: Feature): string | null {
   return feature.properties?.layerName || null;
 }
 
-function isFeatureIdDefined(value) {
+function isFeatureIdDefined(value: unknown): boolean {
   return value !== undefined && value !== null && value !== '';
 }
 
-function transformTileCoordsToWGS84(object, bbox, viewport) {
+function transformTileCoordsToWGS84(
+  object: Feature,
+  bbox: GeoBoundingBox,
+  viewport: Viewport
+): Feature {
   const feature = {
     ...object,
     geometry: {
@@ -355,8 +444,5 @@ function transformTileCoordsToWGS84(object, bbox, viewport) {
     }
   });
 
-  return feature;
+  return feature as Feature;
 }
-
-MVTLayer.layerName = 'MVTLayer';
-MVTLayer.defaultProps = defaultProps;

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

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