@deck.gl/carto 9.2.0-beta.1 → 9.2.0-beta.3

package/dist/index.cjs

@@ -58,13 +58,14 @@ module.exports = __toCommonJS(dist_exports);
 
 // dist/layers/cluster-tile-layer.js
 var import_layers = require("@deck.gl/layers");
-var import_geo_layers2 = require("@deck.gl/geo-layers");
+var import_geo_layers3 = require("@deck.gl/geo-layers");
 var import_core5 = require("@loaders.gl/core");
 var import_gis = require("@loaders.gl/gis");
 var import_core6 = require("@deck.gl/core");
 
 // dist/layers/cluster-utils.js
 var import_quadbin = require("quadbin");
+var import_h3_js = require("h3-js");
 var import_core2 = require("@deck.gl/core");
 
 // dist/utils.js
@@ -149,7 +150,7 @@ function copyNumericProps(sourceProps, targetProps, sourceIndex, targetIndex) {
 }
 
 // dist/layers/cluster-utils.js
-function aggregateTile(tile, tileAggregationCache, aggregationLevels, properties = [], getPosition, getWeight) {
+function aggregateTile(tile, tileAggregationCache, aggregationLevels, properties = [], getPosition, getWeight, scheme = "quadbin") {
   var _a;
   if (!tile.content)
     return false;
@@ -167,9 +168,14 @@ function aggregateTile(tile, tileAggregationCache, aggregationLevels, properties
     let id5 = cell.id;
     const position = typeof getPosition === "function" ? getPosition(cell, {}) : getPosition;
     for (let i = 0; i < aggregationLevels - 1; i++) {
-      id5 = (0, import_quadbin.cellToParent)(id5);
+      if (scheme === "h3") {
+        const currentResolution = (0, import_h3_js.getResolution)(id5);
+        id5 = (0, import_h3_js.cellToParent)(id5, Math.max(0, currentResolution - 1));
+      } else {
+        id5 = (0, import_quadbin.cellToParent)(id5);
+      }
     }
-    const parentId = Number(id5);
+    const parentId = String(id5);
     if (!(parentId in out)) {
       out[parentId] = { id: id5, count: 0, position: [0, 0] };
       for (const { name, aggregation } of properties) {
@@ -271,6 +277,114 @@ var QuadbinTileset2D = class extends import_geo_layers._Tileset2D {
   }
 };
 
+// dist/layers/h3-tileset-2d.js
+var import_geo_layers2 = require("@deck.gl/geo-layers");
+var import_h3_js2 = require("h3-js");
+var MAX_LATITUDE = 85.051128;
+function padBoundingBox({ west, north, east, south }, resolution, scale = 1) {
+  const corners = [
+    [north, east],
+    [south, east],
+    [south, west],
+    [north, west]
+  ];
+  const cornerCells = corners.map((c) => (0, import_h3_js2.latLngToCell)(c[0], c[1], resolution));
+  const cornerEdgeLengths = cornerCells.map((c) => Math.max(...(0, import_h3_js2.originToDirectedEdges)(c).map((e) => (0, import_h3_js2.edgeLength)(e, import_h3_js2.UNITS.rads))) * 180 / Math.PI);
+  const bufferLat = Math.max(...cornerEdgeLengths) * scale;
+  const bufferLon = Math.min(180, bufferLat / Math.cos((north + south) / 2 * Math.PI / 180));
+  return {
+    north: Math.min(north + bufferLat, MAX_LATITUDE),
+    east: east + bufferLon,
+    south: Math.max(south - bufferLat, -MAX_LATITUDE),
+    west: west - bufferLon
+  };
+}
+function getHexagonsInBoundingBox({ west, north, east, south }, resolution) {
+  const longitudeSpan = Math.abs(east - west);
+  if (longitudeSpan > 180) {
+    const nSegments = Math.ceil(longitudeSpan / 180);
+    let h3Indices = [];
+    for (let s = 0; s < nSegments; s++) {
+      const segmentWest = west + s * 180;
+      const segmentEast = Math.min(segmentWest + 179.9999999, east);
+      h3Indices = h3Indices.concat(getHexagonsInBoundingBox({ west: segmentWest, north, east: segmentEast, south }, resolution));
+    }
+    return [...new Set(h3Indices)];
+  }
+  const polygon = [
+    [north, east],
+    [south, east],
+    [south, west],
+    [north, west],
+    [north, east]
+  ];
+  return (0, import_h3_js2.polygonToCells)(polygon, resolution);
+}
+function tileToBoundingBox(index) {
+  const coordinates = (0, import_h3_js2.cellToBoundary)(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);
+  const bbox = { west, south, east, north };
+  return padBoundingBox(bbox, (0, import_h3_js2.getResolution)(index), 0.12);
+}
+var BIAS = 2;
+function getHexagonResolution(viewport, tileSize) {
+  const zoomOffset = Math.log2(tileSize / 512);
+  const hexagonScaleFactor = 2 / 3 * (viewport.zoom - zoomOffset);
+  const latitudeScaleFactor = Math.log(1 / Math.cos(Math.PI * viewport.latitude / 180));
+  return Math.max(0, Math.floor(hexagonScaleFactor + latitudeScaleFactor - BIAS));
+}
+var H3Tileset2D = class extends import_geo_layers2._Tileset2D {
+  /**
+   * Returns all tile indices in the current viewport. If the current zoom level is smaller
+   * than minZoom, return an empty array. If the current zoom level is greater than maxZoom,
+   * return tiles that are on maxZoom.
+   */
+  // @ts-expect-error Tileset2D should be generic over TileIndex
+  getTileIndices({ viewport, minZoom, maxZoom }) {
+    if (viewport.latitude === void 0)
+      return [];
+    const [west, south, east, north] = viewport.getBounds();
+    const { tileSize } = this.opts;
+    let z = getHexagonResolution(viewport, tileSize);
+    let indices;
+    if (typeof minZoom === "number" && Number.isFinite(minZoom) && z < minZoom) {
+      return [];
+    }
+    if (typeof maxZoom === "number" && Number.isFinite(maxZoom) && z > maxZoom) {
+      z = maxZoom;
+      const center = (0, import_h3_js2.latLngToCell)(viewport.latitude, viewport.longitude, maxZoom);
+      indices = (0, import_h3_js2.gridDisk)(center, 1);
+    } else {
+      const paddedBounds = padBoundingBox({ west, north, east, south }, z);
+      indices = getHexagonsInBoundingBox(paddedBounds, z);
+    }
+    return indices.map((i) => ({ i }));
+  }
+  // @ts-expect-error Tileset2D should be generic over TileIndex
+  getTileId({ i }) {
+    return i;
+  }
+  // @ts-expect-error Tileset2D should be generic over TileIndex
+  getTileMetadata({ i }) {
+    return { bbox: tileToBoundingBox(i) };
+  }
+  // @ts-expect-error Tileset2D should be generic over TileIndex
+  getTileZoom({ i }) {
+    return (0, import_h3_js2.getResolution)(i);
+  }
+  // @ts-expect-error Tileset2D should be generic over TileIndex
+  getParentIndex(index) {
+    const resolution = (0, import_h3_js2.getResolution)(index.i);
+    const i = (0, import_h3_js2.cellToParent)(index.i, resolution - 1);
+    return { i };
+  }
+};
+
 // dist/layers/quadbin-utils.js
 var import_web_mercator = require("@math.gl/web-mercator");
 var import_quadbin3 = require("quadbin");
@@ -294,6 +408,9 @@ function getQuadbinPolygon(quadbin, coverage = 1) {
   return [e, n, e, s, w, s, w, n, e, n];
 }
 
+// dist/layers/cluster-tile-layer.js
+var import_h3_js3 = require("h3-js");
+
 // dist/layers/schema/fast-pbf.js
 var import_compression = require("@loaders.gl/compression");
 function readPackedTypedArray(TypedArray, pbf, obj, options) {
@@ -556,7 +673,7 @@ function binaryToSpatialjson(binary) {
 }
 
 // dist/layers/schema/carto-spatial-tile-loader.js
-var VERSION = true ? "9.2.0-beta.1" : "latest";
+var VERSION = true ? "9.2.0-beta.3" : "latest";
 var id = "cartoSpatialTile";
 var DEFAULT_OPTIONS = {
   cartoSpatialTile: {
@@ -672,21 +789,44 @@ var TilejsonPropType = {
 
 // dist/layers/cluster-tile-layer.js
 (0, import_core5.registerLoaders)([carto_spatial_tile_loader_default]);
+function getScheme(tilesetClass) {
+  if (tilesetClass === H3Tileset2D)
+    return "h3";
+  if (tilesetClass === QuadbinTileset2D)
+    return "quadbin";
+  throw new Error("Invalid tileset class");
+}
 var defaultProps = {
   data: TilejsonPropType,
   clusterLevel: { type: "number", value: 5, min: 1 },
   getPosition: {
     type: "accessor",
-    value: ({ id: id5 }) => getQuadbinPolygon(id5, 0.5).slice(2, 4)
+    value: ({ id: id5 }) => {
+      if (typeof id5 === "string") {
+        const [lat, lng] = (0, import_h3_js3.cellToLatLng)(id5);
+        return [lng, lat];
+      }
+      return getQuadbinPolygon(id5, 0.5).slice(2, 4);
+    }
   },
   getWeight: { type: "accessor", value: 1 },
   refinementStrategy: "no-overlap",
   tileSize: DEFAULT_TILE_SIZE
 };
-var ClusterGeoJsonLayer = class extends import_geo_layers2.TileLayer {
+var ClusterGeoJsonLayer = class extends import_geo_layers3.TileLayer {
   initializeState() {
     super.initializeState();
     this.state.aggregationCache = /* @__PURE__ */ new WeakMap();
+    this.state.scheme = getScheme(this.props.TilesetClass);
+  }
+  updateState(opts) {
+    const { props } = opts;
+    const scheme = getScheme(props.TilesetClass);
+    if (this.state.scheme !== scheme) {
+      this.setState({ scheme, tileset: null });
+      this.state.aggregationCache = /* @__PURE__ */ new WeakMap();
+    }
+    super.updateState(opts);
   }
   // eslint-disable-next-line max-statements
   renderLayers() {
@@ -694,25 +834,24 @@ var ClusterGeoJsonLayer = class extends import_geo_layers2.TileLayer {
     const visibleTiles = (_a = this.state.tileset) == null ? void 0 : _a.tiles.filter((tile) => {
       return tile.isLoaded && tile.content && this.state.tileset.isTileVisible(tile);
     });
-    if (!(visibleTiles == null ? void 0 : visibleTiles.length)) {
+    if (!(visibleTiles == null ? void 0 : visibleTiles.length) || !this.state.tileset) {
       return null;
     }
     visibleTiles.sort((a, b) => b.zoom - a.zoom);
-    const { zoom } = this.context.viewport;
-    const { clusterLevel, getPosition, getWeight } = this.props;
-    const { aggregationCache } = this.state;
+    const { getPosition, getWeight } = this.props;
+    const { aggregationCache, scheme } = this.state;
+    const isH3 = scheme === "h3";
     const properties = extractAggregationProperties(visibleTiles[0]);
     const data = [];
     let needsUpdate = false;
+    const aggregationLevels = this._getAggregationLevels(visibleTiles);
     for (const tile of visibleTiles) {
-      const overZoom = Math.round(zoom - tile.zoom);
-      const aggregationLevels = Math.round(clusterLevel) - overZoom;
       let tileAggregationCache = aggregationCache.get(tile.content);
       if (!tileAggregationCache) {
         tileAggregationCache = /* @__PURE__ */ new Map();
         aggregationCache.set(tile.content, tileAggregationCache);
       }
-      const didAggregate = aggregateTile(tile, tileAggregationCache, aggregationLevels, properties, getPosition, getWeight);
+      const didAggregate = aggregateTile(tile, tileAggregationCache, aggregationLevels, properties, getPosition, getWeight, isH3 ? "h3" : "quadbin");
       needsUpdate || (needsUpdate = didAggregate);
       data.push(...tileAggregationCache.get(aggregationLevels));
     }
@@ -757,15 +896,32 @@ var ClusterGeoJsonLayer = class extends import_geo_layers2.TileLayer {
   filterSubLayer() {
     return true;
   }
+  _getAggregationLevels(visibleTiles) {
+    const isH3 = this.state.scheme === "h3";
+    const firstTile = visibleTiles[0];
+    let tileResolution;
+    let viewportResolution;
+    if (isH3) {
+      tileResolution = (0, import_h3_js3.getResolution)(firstTile.id);
+      viewportResolution = getHexagonResolution(this.context.viewport, this.state.tileset.opts.tileSize);
+    } else {
+      tileResolution = firstTile.zoom;
+      viewportResolution = this.context.viewport.zoom;
+    }
+    const resolutionDiff = Math.round(viewportResolution - tileResolution);
+    const aggregationLevels = Math.round(this.props.clusterLevel) - resolutionDiff;
+    return aggregationLevels;
+  }
 };
 ClusterGeoJsonLayer.layerName = "ClusterGeoJsonLayer";
 ClusterGeoJsonLayer.defaultProps = defaultProps;
 var ClusterTileLayer = class extends import_core6.CompositeLayer {
   getLoadOptions() {
     const tileJSON = this.props.data;
+    const scheme = tileJSON && "scheme" in tileJSON ? tileJSON.scheme : "quadbin";
     return mergeLoadOptions(super.getLoadOptions(), {
       fetch: { headers: { Authorization: `Bearer ${tileJSON.accessToken}` } },
-      cartoSpatialTile: { scheme: "quadbin" }
+      cartoSpatialTile: { scheme }
     });
   }
   renderLayers() {
@@ -773,13 +929,15 @@ var ClusterTileLayer = class extends import_core6.CompositeLayer {
     if (!tileJSON)
       return null;
     const { tiles: data, maxresolution: maxZoom } = tileJSON;
+    const isH3 = tileJSON && "scheme" in tileJSON && tileJSON.scheme === "h3";
+    const TilesetClass = isH3 ? H3Tileset2D : QuadbinTileset2D;
     return [
       // @ts-ignore
       new ClusterGeoJsonLayer(this.props, {
         id: `cluster-geojson-layer-${this.props.id}`,
         data,
         // TODO: Tileset2D should be generic over TileIndex type
-        TilesetClass: QuadbinTileset2D,
+        TilesetClass,
         maxZoom,
         loadOptions: this.getLoadOptions()
       })
@@ -794,114 +952,6 @@ var cluster_tile_layer_default = ClusterTileLayer;
 var import_core8 = require("@deck.gl/core");
 var import_geo_layers5 = require("@deck.gl/geo-layers");
 
-// dist/layers/h3-tileset-2d.js
-var import_geo_layers3 = require("@deck.gl/geo-layers");
-var import_h3_js = require("h3-js");
-var MAX_LATITUDE = 85.051128;
-function padBoundingBox({ west, north, east, south }, resolution, scale = 1) {
-  const corners = [
-    [north, east],
-    [south, east],
-    [south, west],
-    [north, west]
-  ];
-  const cornerCells = corners.map((c) => (0, import_h3_js.latLngToCell)(c[0], c[1], resolution));
-  const cornerEdgeLengths = cornerCells.map((c) => Math.max(...(0, import_h3_js.originToDirectedEdges)(c).map((e) => (0, import_h3_js.edgeLength)(e, import_h3_js.UNITS.rads))) * 180 / Math.PI);
-  const bufferLat = Math.max(...cornerEdgeLengths) * scale;
-  const bufferLon = Math.min(180, bufferLat / Math.cos((north + south) / 2 * Math.PI / 180));
-  return {
-    north: Math.min(north + bufferLat, MAX_LATITUDE),
-    east: east + bufferLon,
-    south: Math.max(south - bufferLat, -MAX_LATITUDE),
-    west: west - bufferLon
-  };
-}
-function getHexagonsInBoundingBox({ west, north, east, south }, resolution) {
-  const longitudeSpan = Math.abs(east - west);
-  if (longitudeSpan > 180) {
-    const nSegments = Math.ceil(longitudeSpan / 180);
-    let h3Indices = [];
-    for (let s = 0; s < nSegments; s++) {
-      const segmentWest = west + s * 180;
-      const segmentEast = Math.min(segmentWest + 179.9999999, east);
-      h3Indices = h3Indices.concat(getHexagonsInBoundingBox({ west: segmentWest, north, east: segmentEast, south }, resolution));
-    }
-    return [...new Set(h3Indices)];
-  }
-  const polygon = [
-    [north, east],
-    [south, east],
-    [south, west],
-    [north, west],
-    [north, east]
-  ];
-  return (0, import_h3_js.polygonToCells)(polygon, resolution);
-}
-function tileToBoundingBox(index) {
-  const coordinates = (0, import_h3_js.cellToBoundary)(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);
-  const bbox = { west, south, east, north };
-  return padBoundingBox(bbox, (0, import_h3_js.getResolution)(index), 0.12);
-}
-var BIAS = 2;
-function getHexagonResolution(viewport, tileSize) {
-  const zoomOffset = Math.log2(tileSize / 512);
-  const hexagonScaleFactor = 2 / 3 * (viewport.zoom - zoomOffset);
-  const latitudeScaleFactor = Math.log(1 / Math.cos(Math.PI * viewport.latitude / 180));
-  return Math.max(0, Math.floor(hexagonScaleFactor + latitudeScaleFactor - BIAS));
-}
-var H3Tileset2D = class extends import_geo_layers3._Tileset2D {
-  /**
-   * Returns all tile indices in the current viewport. If the current zoom level is smaller
-   * than minZoom, return an empty array. If the current zoom level is greater than maxZoom,
-   * return tiles that are on maxZoom.
-   */
-  // @ts-expect-error Tileset2D should be generic over TileIndex
-  getTileIndices({ viewport, minZoom, maxZoom }) {
-    if (viewport.latitude === void 0)
-      return [];
-    const [west, south, east, north] = viewport.getBounds();
-    const { tileSize } = this.opts;
-    let z = getHexagonResolution(viewport, tileSize);
-    let indices;
-    if (typeof minZoom === "number" && Number.isFinite(minZoom) && z < minZoom) {
-      return [];
-    }
-    if (typeof maxZoom === "number" && Number.isFinite(maxZoom) && z > maxZoom) {
-      z = maxZoom;
-      const center = (0, import_h3_js.latLngToCell)(viewport.latitude, viewport.longitude, maxZoom);
-      indices = (0, import_h3_js.gridDisk)(center, 1);
-    } else {
-      const paddedBounds = padBoundingBox({ west, north, east, south }, z);
-      indices = getHexagonsInBoundingBox(paddedBounds, z);
-    }
-    return indices.map((i) => ({ i }));
-  }
-  // @ts-expect-error Tileset2D should be generic over TileIndex
-  getTileId({ i }) {
-    return i;
-  }
-  // @ts-expect-error Tileset2D should be generic over TileIndex
-  getTileMetadata({ i }) {
-    return { bbox: tileToBoundingBox(i) };
-  }
-  // @ts-expect-error Tileset2D should be generic over TileIndex
-  getTileZoom({ i }) {
-    return (0, import_h3_js.getResolution)(i);
-  }
-  // @ts-expect-error Tileset2D should be generic over TileIndex
-  getParentIndex(index) {
-    const resolution = (0, import_h3_js.getResolution)(index.i);
-    const i = (0, import_h3_js.cellToParent)(index.i, resolution - 1);
-    return { i };
-  }
-};
-
 // dist/layers/spatial-index-tile-layer.js
 var import_core7 = require("@loaders.gl/core");
 var import_geo_layers4 = require("@deck.gl/geo-layers");
@@ -1023,7 +1073,7 @@ var h3_tile_layer_default = H3TileLayer;
 
 // dist/layers/heatmap-tile-layer.js
 var import_quadbin6 = require("quadbin");
-var import_h3_js2 = require("h3-js");
+var import_h3_js4 = require("h3-js");
 var import_core11 = require("@deck.gl/core");
 var import_layers2 = require("@deck.gl/layers");
 
@@ -1383,8 +1433,8 @@ function unitDensityForQuadbinCell(cell) {
   return Math.pow(4, cellResolution);
 }
 function unitDensityForH3Cell(cellId) {
-  const cellResolution = Number((0, import_h3_js2.getResolution)(cellId));
-  return (0, import_h3_js2.getNumCells)(cellResolution);
+  const cellResolution = Number((0, import_h3_js4.getResolution)(cellId));
+  return (0, import_h3_js4.getNumCells)(cellResolution);
 }
 function colorRangeToFlatArray(colorRange) {
   const flatArray = new Uint8Array(colorRange.length * 4);
@@ -1985,7 +2035,7 @@ var TileReader3 = class {
 };
 
 // dist/layers/schema/carto-raster-tile-loader.js
-var VERSION2 = true ? "9.2.0-beta.1" : "latest";
+var VERSION2 = true ? "9.2.0-beta.3" : "latest";
 var id2 = "cartoRasterTile";
 var DEFAULT_OPTIONS2 = {
   cartoRasterTile: {
@@ -2097,7 +2147,7 @@ var TileReader4 = class {
 };
 
 // dist/layers/schema/carto-properties-tile-loader.js
-var VERSION3 = true ? "9.2.0-beta.1" : "latest";
+var VERSION3 = true ? "9.2.0-beta.3" : "latest";
 var id3 = "cartoPropertiesTile";
 var DEFAULT_OPTIONS3 = {
   cartoPropertiesTile: {
@@ -2126,7 +2176,7 @@ var carto_properties_tile_loader_default = CartoPropertiesTileLoader;
 
 // dist/layers/schema/carto-vector-tile-loader.js
 var import_earcut = __toESM(require("earcut"), 1);
-var VERSION4 = true ? "9.2.0-beta.1" : "latest";
+var VERSION4 = true ? "9.2.0-beta.3" : "latest";
 var id4 = "cartoVectorTile";
 var DEFAULT_OPTIONS4 = {
   cartoVectorTile: {