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

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

@@ -0,0 +1,108 @@
+import {_Tileset2D as Tileset2D} from '@deck.gl/geo-layers';
+import {
+  polyfill,
+  getRes0Indexes,
+  geoToH3,
+  h3GetResolution,
+  h3ToGeoBoundary,
+  h3ToParent,
+  kRing
+} from 'h3-js';
+
+function getHexagonsInBoundingBox({west, north, east, south}, resolution) {
+  if (resolution === 0) {
+    return getRes0Indexes();
+  }
+  if (east - west > 180) {
+    // This is a known issue in h3-js: polyfill does not work correctly
+    // when longitude span is larger than 180 degrees.
+    return getHexagonsInBoundingBox({west, north, east: 0, south}, resolution).concat(
+      getHexagonsInBoundingBox({west: 0, north, east, south}, resolution)
+    );
+  }
+
+  // `polyfill()` fills based on hexagon center, which means tiles vanish
+  // prematurely. Get more accurate coverage by oversampling
+  const oversample = 2;
+  const h3Indices = polyfill(
+    [
+      [
+        [west, north],
+        [west, south],
+        [east, south],
+        [east, north],
+        [west, north]
+      ]
+    ],
+    resolution + oversample,
+    true
+  );
+
+  return oversample ? [...new Set(h3Indices.map(i => h3ToParent(i, resolution)))] : h3Indices;
+}
+
+function tileToBoundingBox(index) {
+  const coordinates = h3ToGeoBoundary(index);
+  const latitudes = coordinates.map(c => c[0]);
+  const longitudes = coordinates.map(c => c[1]);
+  const west = Math.min(...longitudes);
+  const south = Math.min(...latitudes);
+  const east = Math.max(...longitudes);
+  const north = Math.max(...latitudes);
+  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();
+
+    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);
+    }
+
+    return indices.map(i => ({i}));
+  }
+
+  getTileId({i}) {
+    return i;
+  }
+
+  getTileMetadata({i}) {
+    return {bbox: tileToBoundingBox(i)};
+  }
+
+  getTileZoom({i}) {
+    return h3GetResolution(i);
+  }
+
+  getParentIndex(index) {
+    const resolution = h3GetResolution(index.i);
+    const i = h3ToParent(index.i, resolution - 1);
+    return {i};
+  }
+}

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

@@ -0,0 +1,47 @@
+import {CompositeLayer} from '@deck.gl/core';
+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;
+  if (!data || !data.length) return null;
+  return new QuadkeyLayer(props);
+};
+
+const defaultProps = {
+  aggregationResLevel: 6
+};
+
+export default class QuadkeyTileLayer extends CompositeLayer {
+  initializeState() {
+    this.setState({data: null, tileJSON: null});
+  }
+
+  updateState({props, oldProps, context, changeFlags}) {
+    if (changeFlags.dataChanged) {
+      let {data} = this.props;
+      const tileJSON = data;
+      data = tileJSON.tiles;
+      this.setState({data, tileJSON});
+    }
+  }
+
+  renderLayers() {
+    const {data, tileJSON} = this.state;
+    const maxZoom = parseInt(tileJSON.maxresolution);
+    return [
+      new SpatialIndexTileLayer(this.props, {
+        id: 'quadkey-tile-layer',
+        data,
+        getQuadkey: d => d.id,
+        TilesetClass: QuadkeyTileset2D,
+        renderSubLayers,
+        maxZoom
+      })
+    ];
+  }
+}
+
+QuadkeyTileLayer.layerName = 'QuadkeyTileLayer';
+QuadkeyTileLayer.defaultProps = defaultProps;

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

@@ -0,0 +1,36 @@
+import {_Tileset2D as Tileset2D} from '@deck.gl/geo-layers';
+
+function tileToQuadkey(tile) {
+  let index = '';
+  for (let z = tile.z; z > 0; z--) {
+    let b = 0;
+    const mask = 1 << (z - 1);
+    if ((tile.x & mask) !== 0) b++;
+    if ((tile.y & mask) !== 0) b += 2;
+    index += b.toString();
+  }
+  return {i: index};
+}
+
+export default class QuadkeyTileset2D extends Tileset2D {
+  getTileIndices(opts) {
+    return super.getTileIndices(opts).map(tileToQuadkey);
+  }
+
+  getTileId({i}) {
+    return i;
+  }
+
+  getTileMetadata() {
+    return {};
+  }
+
+  getTileZoom({i}) {
+    return i.length;
+  }
+
+  getParentIndex(index) {
+    const i = index.i.slice(0, -1);
+    return {i};
+  }
+}

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