@deck.gl/carto 8.8.0-alpha.3 → 8.8.0-alpha.4

package/package.json

@@ -2,7 +2,7 @@
   "name": "@deck.gl/carto",
   "description": "CARTO official integration with Deck.gl. Build geospatial applications using CARTO and Deck.gl.",
   "license": "MIT",
-  "version": "8.8.0-alpha.3",
+  "version": "8.8.0-alpha.4",
   "publishConfig": {
     "access": "public"
   },
@@ -58,5 +58,5 @@
     "@deck.gl/layers": "^8.0.0",
     "@loaders.gl/core": "^3.0.0"
   },
-  "gitHead": "edad7cf75b75a137d63ec89d2d644727d3082e25"
+  "gitHead": "608c74fff3c955142c4e1f5e77b9e21ebbf690f7"
 }

package/src/layers/carto-layer.ts

@@ -57,7 +57,13 @@ const defaultProps = {
   geoColumn: null,
 
   // (Array<String>, optional): names of columns to fetch. By default, all columns are fetched.
-  columns: {type: 'array', value: null}
+  columns: {type: 'array', value: null},
+
+  // (String, optional): aggregration SQL expression. Only used for spatial index datasets
+  aggregationExp: null,
+
+  // (Number, optional): aggregration resolution level. Only used for spatial index datasets, defaults to 6 for quadkeys, 4 for h3
+  aggregationResLevel: null
 };
 
 export interface CartoLayerProps<DataT = any> extends CompositeLayerProps<DataT> {

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

@@ -1,6 +1,7 @@
 import {CompositeLayer} from '@deck.gl/core';
-import {H3HexagonLayer, TileLayer} from '@deck.gl/geo-layers';
+import {H3HexagonLayer} from '@deck.gl/geo-layers';
 import H3Tileset2D from './h3-tileset-2d';
+import SpatialIndexTileLayer from './spatial-index-tile-layer';
 
 const renderSubLayers = props => {
   const {data} = props;
@@ -13,6 +14,10 @@ const renderSubLayers = props => {
   });
 };
 
+const defaultProps = {
+  aggregationResLevel: 4
+};
+
 export default class H3TileLayer extends CompositeLayer {
   initializeState() {
     this.setState({data: null, tileJSON: null});
@@ -28,17 +33,20 @@ export default class H3TileLayer extends CompositeLayer {
   }
 
   renderLayers() {
-    const {data} = this.state;
+    const {data, tileJSON} = this.state;
+    const maxZoom = parseInt(tileJSON.maxresolution);
     return [
-      new TileLayer(this.props, {
+      new SpatialIndexTileLayer(this.props, {
         id: 'h3-tile-layer',
         data,
         getHexagon: d => d.id,
         TilesetClass: H3Tileset2D,
-        renderSubLayers
+        renderSubLayers,
+        maxZoom
       })
     ];
   }
 }
 
 H3TileLayer.layerName = 'H3TileLayer';
+H3TileLayer.defaultProps = defaultProps;

package/src/layers/h3-tileset-2d.js

@@ -1,7 +1,15 @@
 import {_Tileset2D as Tileset2D} from '@deck.gl/geo-layers';
-import {polyfill, getRes0Indexes, h3GetResolution, h3ToGeoBoundary, h3ToParent} from 'h3-js';
+import {
+  polyfill,
+  getRes0Indexes,
+  geoToH3,
+  h3GetResolution,
+  h3ToGeoBoundary,
+  h3ToParent,
+  kRing
+} from 'h3-js';
 
-export function getHexagonsInBoundingBox({west, north, east, south}, resolution) {
+function getHexagonsInBoundingBox({west, north, east, south}, resolution) {
   if (resolution === 0) {
     return getRes0Indexes();
   }
@@ -15,7 +23,7 @@ export function getHexagonsInBoundingBox({west, north, east, south}, resolution)
 
   // `polyfill()` fills based on hexagon center, which means tiles vanish
   // prematurely. Get more accurate coverage by oversampling
-  const oversample = 1;
+  const oversample = 2;
   const h3Indices = polyfill(
     [
       [
@@ -33,7 +41,7 @@ export function getHexagonsInBoundingBox({west, north, east, south}, resolution)
   return oversample ? [...new Set(h3Indices.map(i => h3ToParent(i, resolution)))] : h3Indices;
 }
 
-export function tileToBoundingBox(index) {
+function tileToBoundingBox(index) {
   const coordinates = h3ToGeoBoundary(index);
   const latitudes = coordinates.map(c => c[0]);
   const longitudes = coordinates.map(c => c[1]);
@@ -44,22 +52,40 @@ export function tileToBoundingBox(index) {
   return {west, south, east, north};
 }
 
+// Resolution conversion function. Takes a WebMercatorViewport and returns
+// a H3 resolution such that the screen space size of the hexagons is
+// similar
+// Relative scale factor (0 = no biasing, 2 = a few hexagons cover view)
+const BIAS = 2;
+function getHexagonResolution(viewport) {
+  const hexagonScaleFactor = (2 / 3) * viewport.zoom;
+  const latitudeScaleFactor = Math.log(1 / Math.cos((Math.PI * viewport.latitude) / 180));
+
+  // Clip and bias
+  return Math.max(0, Math.floor(hexagonScaleFactor + latitudeScaleFactor - BIAS));
+}
+
 export default class H3Tileset2D extends Tileset2D {
   getTileIndices({viewport, minZoom, maxZoom}) {
     const [east, south, west, north] = viewport.getBounds();
 
-    // TODO ignores extent
-    let z = viewport.zoom;
+    let z = getHexagonResolution(viewport);
+    let indices = [];
     if (typeof minZoom === 'number' && Number.isFinite(minZoom) && z < minZoom) {
       z = minZoom;
     }
     if (typeof maxZoom === 'number' && Number.isFinite(maxZoom) && z > maxZoom) {
       z = maxZoom;
+
+      // Once we are at max zoom, getHexagonsInBoundingBox doesn't work, simply
+      // get a ring centered on the hexagon in the viewport center
+      const center = geoToH3(viewport.latitude, viewport.longitude, maxZoom);
+      indices = kRing(center, 1);
+    } else {
+      indices = getHexagonsInBoundingBox({west, north, east, south}, z);
     }
 
-    // Heuristic to get h3 resolution
-    const resolution = Math.max(0, Math.floor((2 * z) / 3) - 2);
-    return getHexagonsInBoundingBox({west, north, east, south}, resolution).map(i => ({i}));
+    return indices.map(i => ({i}));
   }
 
   getTileId({i}) {

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

@@ -1,6 +1,7 @@
 import {CompositeLayer} from '@deck.gl/core';
-import {QuadkeyLayer, TileLayer} from '@deck.gl/geo-layers';
+import {QuadkeyLayer} from '@deck.gl/geo-layers';
 import QuadkeyTileset2D from './quadkey-tileset-2d';
+import SpatialIndexTileLayer from './spatial-index-tile-layer';
 
 const renderSubLayers = props => {
   const {data} = props;
@@ -8,6 +9,10 @@ const renderSubLayers = props => {
   return new QuadkeyLayer(props);
 };
 
+const defaultProps = {
+  aggregationResLevel: 6
+};
+
 export default class QuadkeyTileLayer extends CompositeLayer {
   initializeState() {
     this.setState({data: null, tileJSON: null});
@@ -24,10 +29,9 @@ export default class QuadkeyTileLayer extends CompositeLayer {
 
   renderLayers() {
     const {data, tileJSON} = this.state;
-    const {maxresolution} = tileJSON;
-    const maxZoom = maxresolution - this.props.aggregationResLevel;
+    const maxZoom = parseInt(tileJSON.maxresolution);
     return [
-      new TileLayer(this.props, {
+      new SpatialIndexTileLayer(this.props, {
         id: 'quadkey-tile-layer',
         data,
         getQuadkey: d => d.id,
@@ -40,3 +44,4 @@ export default class QuadkeyTileLayer extends CompositeLayer {
 }
 
 QuadkeyTileLayer.layerName = 'QuadkeyTileLayer';
+QuadkeyTileLayer.defaultProps = defaultProps;

package/src/layers/spatial-index-tile-layer.js

@@ -0,0 +1,48 @@
+import {TileLayer} from '@deck.gl/geo-layers';
+
+function isFeatureIdDefined(value) {
+  return value !== undefined && value !== null && value !== '';
+}
+
+export default class SpatialIndexTileLayer extends TileLayer {
+  _updateAutoHighlight(info) {
+    const {hoveredFeatureId} = this.state;
+    const hoveredFeature = info.object;
+    let newHoveredFeatureId;
+
+    if (hoveredFeature) {
+      newHoveredFeatureId = hoveredFeature.id;
+    }
+
+    if (hoveredFeatureId !== newHoveredFeatureId) {
+      let {highlightColor} = this.props;
+      if (typeof highlightColor === 'function') {
+        highlightColor = highlightColor(info);
+      }
+
+      this.setState({
+        highlightColor,
+        hoveredFeatureId: newHoveredFeatureId
+      });
+    }
+  }
+
+  getSubLayerPropsByTile(tile) {
+    return {
+      highlightedObjectIndex: this.getHighlightedObjectIndex(tile),
+      highlightColor: this.state.highlightColor
+    };
+  }
+
+  getHighlightedObjectIndex(tile) {
+    const {hoveredFeatureId} = this.state;
+    const data = tile.content;
+
+    const isFeatureIdPresent = isFeatureIdDefined(hoveredFeatureId);
+    if (!isFeatureIdPresent || !Array.isArray(data)) {
+      return -1;
+    }
+
+    return data.findIndex(feature => feature.id === hoveredFeatureId);
+  }
+}