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

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.3",
   "publishConfig": {
     "access": "public"
   },
@@ -49,5 +49,5 @@
     "@deck.gl/mesh-layers": "^8.0.0",
     "@loaders.gl/core": "^3.0.0"
   },
-  "gitHead": "a52215449dff06fb683f5afd6399526353d11f35"
+  "gitHead": "edad7cf75b75a137d63ec89d2d644727d3082e25"
 }

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

@@ -36,3 +36,4 @@ export {default as _Tileset2D} from './tile-layer/tileset-2d';
 // Types
 
 export type {TileLayerProps} from './tile-layer/tile-layer';
+export type {QuadkeyLayerProps} from './quadkey-layer/quadkey-layer';

package/src/mvt-layer/mvt-layer.js

@@ -82,18 +82,19 @@ export default class MVTLayer extends TileLayer {
     this.setState({data, tileJSON});
   }
 
-  _getTilesetOptions(props) {
-    const opts = super._getTilesetOptions(props);
+  _getTilesetOptions() {
+    const opts = super._getTilesetOptions();
     const {tileJSON} = this.state;
+    const {minZoom, maxZoom} = this.props;
 
     if (tileJSON) {
-      if (Number.isFinite(tileJSON.minzoom) && tileJSON.minzoom > props.minZoom) {
+      if (Number.isFinite(tileJSON.minzoom) && tileJSON.minzoom > minZoom) {
         opts.minZoom = tileJSON.minzoom;
       }
 
       if (
         Number.isFinite(tileJSON.maxzoom) &&
-        (!Number.isFinite(props.maxZoom) || tileJSON.maxzoom < props.maxZoom)
+        (!Number.isFinite(maxZoom) || tileJSON.maxzoom < maxZoom)
       ) {
         opts.maxZoom = tileJSON.maxzoom;
       }

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))
+    };
+  }
+}

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-layer.ts

@@ -1,10 +1,10 @@
 import {
   assert,
-  ChangeFlags,
   CompositeLayer,
   CompositeLayerProps,
   Layer,
   LayerProps,
+  UpdateParameters,
   _flatten as flatten
 } from '@deck.gl/core';
 import {GeoJsonLayer} from '@deck.gl/layers';
@@ -39,12 +39,20 @@ const defaultProps = {
   zoomOffset: 0
 };
 
-export type TileLayerProps<DataT = any> = CompositeLayerProps<DataT> & {
+/** All props supported by the TileLayer */
+export type TileLayerProps<DataT> = _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;
       _offset: number;
@@ -54,58 +62,62 @@ export type TileLayerProps<DataT = any> = CompositeLayerProps<DataT> & {
   /**
    * 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;
 
   /** Called when a tile successfully loads. */
-  onTileLoad: (tile: Tile2DHeader) => void;
+  onTileLoad?: (tile: Tile2DHeader) => void;
 
   /** Called when a tile is cleared from cache. */
-  onTileUnload: (tile: Tile2DHeader) => void;
+  onTileUnload?: (tile: Tile2DHeader) => 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 +126,7 @@ export type TileLayerProps<DataT = any> = CompositeLayerProps<DataT> & {
    *
    * @default 0
    */
-  zoomOffset: number;
+  zoomOffset?: number;
 };
 
 /**
@@ -122,10 +134,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,15 +161,7 @@ export default class TileLayer<
     return changeFlags.somethingChanged;
   }
 
-  updateState({
-    props,
-    changeFlags
-  }: {
-    props: TileLayerProps;
-    oldProps: TileLayerProps;
-    context: any;
-    changeFlags: ChangeFlags;
-  }) {
+  updateState({changeFlags}: UpdateParameters<TileLayer>) {
     assert(this.state);
 
     let {tileset} = this.state;
@@ -169,10 +172,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 +192,7 @@ export default class TileLayer<
     this._updateTileset();
   }
 
-  _getTilesetOptions(props: TileLayerProps): Tileset2DProps {
+  _getTilesetOptions(): Tileset2DProps {
     const {
       tileSize,
       maxCacheSize,
@@ -200,7 +203,7 @@ export default class TileLayer<
       minZoom,
       maxRequests,
       zoomOffset
-    } = props;
+    } = this.props;
 
     return {
       maxCacheSize,
@@ -290,7 +293,7 @@ export default class TileLayer<
   }
 
   renderSubLayers(
-    props: TileLayerProps & {
+    props: _TileLayerProps<DataT> & {
       id: string;
       data: any;
       _offset: number;
@@ -330,7 +333,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/utils.ts

@@ -1,6 +1,5 @@
 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';
 
@@ -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;
   }

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;