@deck.gl/geo-layers 8.7.0-beta.6 → 8.7.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.7.0-beta.6",
+  "version": "8.7.1",
   "publishConfig": {
     "access": "public"
   },
@@ -49,5 +49,5 @@
     "@deck.gl/mesh-layers": "^8.0.0",
     "@loaders.gl/core": "^3.0.0"
   },
-  "gitHead": "d6eefe2e0992999416b2362340f86402b1f25b33"
+  "gitHead": "8a2f488c640bbf80982c684e7fd741982afe1d81"
 }

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

@@ -0,0 +1,80 @@
+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: {
+          getElevation: updateTriggers.getElevation,
+          getFillColor: updateTriggers.getFillColor,
+          getLineColor: updateTriggers.getLineColor,
+          getLineWidth: updateTriggers.getLineWidth
+        }
+      }),
+      this.indexToBounds()
+    );
+  }
+}
+
+GeoCellLayer.layerName = 'GeoCellLayer';
+GeoCellLayer.defaultProps = defaultProps;

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

@@ -1,14 +1,13 @@
 import {h3SetToMultiPolygon} from 'h3-js';
 
-import {CompositeLayer, createIterable} from '@deck.gl/core';
-import {PolygonLayer} from '@deck.gl/layers';
+import {createIterable} from '@deck.gl/core';
+import GeoCellLayer from '../geo-cell-layer/GeoCellLayer';
 
 const defaultProps = {
-  ...PolygonLayer.defaultProps,
   getHexagons: {type: 'accessor', value: d => d.hexagons}
 };
 
-export default class H3ClusterLayer extends CompositeLayer {
+export default class H3ClusterLayer extends GeoCellLayer {
   updateState({props, oldProps, changeFlags}) {
     if (
       changeFlags.dataChanged ||
@@ -32,66 +31,11 @@ export default class H3ClusterLayer extends CompositeLayer {
     }
   }
 
-  renderLayers() {
-    const {
-      elevationScale,
-      extruded,
-      wireframe,
-      filled,
-      stroked,
-      lineWidthScale,
-      lineWidthMinPixels,
-      lineWidthMaxPixels,
-      lineJointRounded,
-      lineMiterLimit,
-      lineDashJustified,
-      material,
-
-      getFillColor,
-      getLineColor,
-      getLineWidth,
-      getLineDashArray,
-      getElevation,
-      transitions,
-      updateTriggers
-    } = this.props;
-
-    const SubLayerClass = this.getSubLayerClass('cluster-region', PolygonLayer);
-
-    return new SubLayerClass(
-      {
-        filled,
-        wireframe,
-
-        extruded,
-        elevationScale,
-
-        stroked,
-        lineWidthScale,
-        lineWidthMinPixels,
-        lineWidthMaxPixels,
-        lineJointRounded,
-        lineMiterLimit,
-        lineDashJustified,
-
-        material,
-        transitions,
-
-        getFillColor: this.getSubLayerAccessor(getFillColor),
-        getLineColor: this.getSubLayerAccessor(getLineColor),
-        getLineWidth: this.getSubLayerAccessor(getLineWidth),
-        getLineDashArray: this.getSubLayerAccessor(getLineDashArray),
-        getElevation: this.getSubLayerAccessor(getElevation)
-      },
-      this.getSubLayerProps({
-        id: 'cluster-region',
-        updateTriggers
-      }),
-      {
-        data: this.state.polygons,
-        getPolygon: d => d.polygon
-      }
-    );
+  indexToBounds() {
+    return {
+      data: this.state.polygons,
+      getPolygon: d => d.polygon
+    };
   }
 }
 

package/src/index.ts

@@ -21,6 +21,7 @@
 
 export {default as GreatCircleLayer} from './great-circle-layer/great-circle-layer';
 export {default as S2Layer} from './s2-layer/s2-layer';
+export {default as QuadkeyLayer} from './quadkey-layer/quadkey-layer';
 export {default as TileLayer} from './tile-layer/tile-layer';
 export {default as TripsLayer} from './trips-layer/trips-layer';
 export {default as H3ClusterLayer} from './h3-layers/h3-cluster-layer';

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

@@ -15,6 +15,7 @@ import {GeoJsonLayer} from '@deck.gl/layers';
 const WORLD_SIZE = 512;
 
 const defaultProps = {
+  ...GeoJsonLayer.defaultProps,
   uniqueIdProperty: {type: 'string', value: ''},
   highlightedFeatureId: null,
   loaders: [MVTWorkerLoader],
@@ -24,7 +25,10 @@ const defaultProps = {
 export default class MVTLayer extends TileLayer {
   initializeState() {
     super.initializeState();
+    // GlobeView doesn't work well with binary data
+    const binary = this.context.viewport.resolution !== undefined ? false : this.props.binary;
     this.setState({
+      binary,
       data: null,
       tileJSON: null
     });
@@ -110,7 +114,8 @@ export default class MVTLayer extends TileLayer {
       return Promise.reject('Invalid URL');
     }
     let loadOptions = this.getLoadOptions();
-    const {binary, fetch} = this.props;
+    const {binary} = this.state;
+    const {fetch} = this.props;
     const {signal, x, y, z} = tile;
     loadOptions = {
       ...loadOptions,
@@ -152,7 +157,7 @@ export default class MVTLayer extends TileLayer {
 
     const subLayers = super.renderSubLayers(props);
 
-    if (this.props.binary && !(subLayers instanceof GeoJsonLayer)) {
+    if (this.state.binary && !(subLayers instanceof GeoJsonLayer)) {
       log.warn('renderSubLayers() must return GeoJsonLayer when using binary:true')();
     }
 
@@ -193,7 +198,7 @@ export default class MVTLayer extends TileLayer {
 
     const isWGS84 = this.context.viewport.resolution;
 
-    if (this.props.binary && info.index !== -1) {
+    if (this.state.binary && info.index !== -1) {
       const {data} = params.sourceLayer.props;
       info.object = binaryToGeojson(data, {globalFeatureId: info.index});
     }
@@ -212,8 +217,8 @@ export default class MVTLayer extends TileLayer {
   }
 
   getHighlightedObjectIndex(tile) {
-    const {hoveredFeatureId, hoveredFeatureLayerName} = this.state;
-    const {uniqueIdProperty, highlightedFeatureId, binary} = this.props;
+    const {hoveredFeatureId, hoveredFeatureLayerName, binary} = this.state;
+    const {uniqueIdProperty, highlightedFeatureId} = this.props;
     const data = tile.content;
 
     const isHighlighted = isFeatureIdDefined(highlightedFeatureId);
@@ -293,7 +298,7 @@ export default class MVTLayer extends TileLayer {
               return null;
             }
 
-            if (this.props.binary && Array.isArray(tile.content) && !tile.content.length) {
+            if (this.state.binary && Array.isArray(tile.content) && !tile.content.length) {
               // TODO: @loaders.gl/mvt returns [] when no content. It should return a valid empty binary.
               // https://github.com/visgl/loaders.gl/pull/1137
               return [];
@@ -301,7 +306,7 @@ export default class MVTLayer extends TileLayer {
 
             if (tile._contentWGS84 === undefined) {
               // Create a cache to transform only once
-              const content = this.props.binary ? binaryToGeojson(tile.content) : tile.content;
+              const content = this.state.binary ? binaryToGeojson(tile.content) : tile.content;
               tile._contentWGS84 = content.map(feature =>
                 transformTileCoordsToWGS84(feature, tile.bbox, this.context.viewport)
               );

package/src/quadkey-layer/quadkey-layer.js

@@ -0,0 +1,22 @@
+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;

package/src/quadkey-layer/quadkey-utils.js

@@ -0,0 +1,28 @@
+import {worldToLngLat} from '@math.gl/web-mercator';
+
+const TILE_SIZE = 512;
+
+export function quadkeyToWorldBounds(quadkey) {
+  let x = 0;
+  let y = 0;
+  let mask = 1 << quadkey.length;
+  const scale = mask / TILE_SIZE;
+
+  for (let i = 0; i < quadkey.length; i++) {
+    mask >>= 1;
+    const q = parseInt(quadkey[i]);
+    if (q % 2) x |= mask;
+    if (q > 1) y |= mask;
+  }
+  return [
+    [x / scale, TILE_SIZE - y / scale],
+    [(x + 0.99) / scale, TILE_SIZE - (y + 0.99) / scale]
+  ];
+}
+
+export function getQuadkeyPolygon(quadkey) {
+  const [topLeft, bottomRight] = quadkeyToWorldBounds(quadkey);
+  const [w, n] = worldToLngLat(topLeft);
+  const [e, s] = worldToLngLat(bottomRight);
+  return [e, n, e, s, w, s, w, n, e, n];
+}

package/src/s2-layer/s2-layer.js

@@ -18,89 +18,23 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {CompositeLayer} from '@deck.gl/core';
-import {PolygonLayer} from '@deck.gl/layers';
-
+import GeoCellLayer from '../geo-cell-layer/GeoCellLayer';
 import {getS2Polygon} from './s2-utils';
 
 const defaultProps = {
-  ...PolygonLayer.defaultProps,
   getS2Token: {type: 'accessor', value: d => d.token}
 };
 
-export default class S2Layer extends CompositeLayer {
-  renderLayers() {
-    // Layer prop
+export default class S2Layer extends GeoCellLayer {
+  indexToBounds() {
     const {data, getS2Token} = this.props;
 
-    // Rendering props underlying layer
-    const {
-      elevationScale,
-      extruded,
-      wireframe,
-      filled,
-      stroked,
-      lineWidthUnits,
-      lineWidthScale,
-      lineWidthMinPixels,
-      lineWidthMaxPixels,
-      lineJointRounded,
-      lineMiterLimit,
-      lineDashJustified,
-      getElevation,
-      getFillColor,
-      getLineColor,
-      getLineWidth,
-      getLineDashArray
-    } = this.props;
-
-    // Accessor props for underlying layers
-    const {updateTriggers, material} = 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,
-
-        getElevation,
-        getFillColor,
-        getLineColor,
-        getLineWidth,
-        getLineDashArray
-      },
-      this.getSubLayerProps({
-        id: 'cell',
-        updateTriggers: {
-          getElevation: updateTriggers.getElevation,
-          getFillColor: updateTriggers.getFillColor,
-          getLineColor: updateTriggers.getLineColor,
-          getLineWidth: updateTriggers.getLineWidth,
-          getLineDashArray: updateTriggers.getLineDashArray
-        }
-      }),
-      {
-        data,
-        _normalize: false,
-        positionFormat: 'XY',
-        getPolygon: (x, objectInfo) => getS2Polygon(getS2Token(x, objectInfo))
-      }
-    );
+    return {
+      data,
+      _normalize: false,
+      positionFormat: 'XY',
+      getPolygon: (x, objectInfo) => getS2Polygon(getS2Token(x, objectInfo))
+    };
   }
 }
 

package/src/tile-layer/utils.js

@@ -33,13 +33,13 @@ export const urlType = {
 function transformBox(bbox, modelMatrix) {
   const transformedCoords = [
     // top-left
-    modelMatrix.transformPoint([bbox[0], bbox[1]]),
+    modelMatrix.transformAsPoint([bbox[0], bbox[1]]),
     // top-right
-    modelMatrix.transformPoint([bbox[2], bbox[1]]),
+    modelMatrix.transformAsPoint([bbox[2], bbox[1]]),
     // bottom-left
-    modelMatrix.transformPoint([bbox[0], bbox[3]]),
+    modelMatrix.transformAsPoint([bbox[0], bbox[3]]),
     // bottom-right
-    modelMatrix.transformPoint([bbox[2], bbox[3]])
+    modelMatrix.transformAsPoint([bbox[2], bbox[3]])
   ];
   const transformedBox = [
     // Minimum x coord