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

package/dist/dist.dev.js

@@ -45583,8 +45583,13 @@ const deck = globalThis.deck || {}; // Check if peer dependencies are included
 
 if (!deck.LineLayer) {
   throw new Error('@deck.gl/layers is not found');
-}
+} // Export carto layer library for pydeck integration
+// More info: https://github.com/ajduberstein/pydeck_custom_layer
+
 
+globalThis.CartoLayerLibrary = {
+  CartoLayer: CartoUtils.CartoLayer
+};
 module.exports = Object.assign(deck, {
   carto: CartoUtils
 });
@@ -45656,7 +45661,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var moment_timezone__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(moment_timezone__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _deck_gl_aggregation_layers__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @deck.gl/aggregation-layers */ "@deck.gl/core");
 /* harmony import */ var _deck_gl_aggregation_layers__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_deck_gl_aggregation_layers__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _layers_carto_tile_layer__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../layers/carto-tile-layer */ "./src/layers/carto-tile-layer.js");
+/* harmony import */ var _layers_carto_tile_layer__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../layers/carto-tile-layer */ "./src/layers/carto-tile-layer.ts");
 /* harmony import */ var _maps_api_common__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./maps-api-common */ "./src/api/maps-api-common.ts");
 /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../utils */ "./src/utils.ts");
 
@@ -45771,7 +45776,7 @@ function getLayer(type, config, dataset) {
   const getPosition = d => d[geoColumn].coordinates;
 
   const hexagonId = config.columns?.hex_id;
-  const layer = {
+  const layerTypeDefs = {
     point: {
       Layer: _deck_gl_aggregation_layers__WEBPACK_IMPORTED_MODULE_5__["GeoJsonLayer"],
       propMap: {
@@ -45832,13 +45837,15 @@ function getLayer(type, config, dataset) {
         stroked: false
       }
     }
-  }[type];
+  };
+  const layer = layerTypeDefs[type];
   Object(_utils__WEBPACK_IMPORTED_MODULE_8__["assert"])(layer, `Unsupported layer type: ${type}`);
-  layer.propMap = mergePropMaps(sharedPropMap, layer.propMap);
-  layer.defaultProps = { ...defaultProps,
-    ...layer.defaultProps
+  return { ...layer,
+    propMap: mergePropMaps(sharedPropMap, layer.propMap),
+    defaultProps: { ...defaultProps,
+      ...layer.defaultProps
+    }
   };
-  return layer;
 }
 
 function getTileLayer(dataset) {
@@ -47197,13 +47204,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _layers_carto_layer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./layers/carto-layer */ "./src/layers/carto-layer.ts");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CartoLayer", function() { return _layers_carto_layer__WEBPACK_IMPORTED_MODULE_1__["default"]; });
 
-/* harmony import */ var _layers_carto_tile_layer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./layers/carto-tile-layer */ "./src/layers/carto-tile-layer.js");
+/* harmony import */ var _layers_carto_tile_layer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./layers/carto-tile-layer */ "./src/layers/carto-tile-layer.ts");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "_CartoTileLayer", function() { return _layers_carto_tile_layer__WEBPACK_IMPORTED_MODULE_2__["default"]; });
 
-/* harmony import */ var _layers_h3_tile_layer__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./layers/h3-tile-layer */ "./src/layers/h3-tile-layer.js");
+/* harmony import */ var _layers_h3_tile_layer__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./layers/h3-tile-layer */ "./src/layers/h3-tile-layer.ts");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "_H3TileLayer", function() { return _layers_h3_tile_layer__WEBPACK_IMPORTED_MODULE_3__["default"]; });
 
-/* harmony import */ var _layers_quadkey_tile_layer__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./layers/quadkey-tile-layer */ "./src/layers/quadkey-tile-layer.js");
+/* harmony import */ var _layers_quadkey_tile_layer__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./layers/quadkey-tile-layer */ "./src/layers/quadkey-tile-layer.ts");
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "_QuadkeyTileLayer", function() { return _layers_quadkey_tile_layer__WEBPACK_IMPORTED_MODULE_4__["default"]; });
 
 /* harmony import */ var _basemap__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./basemap */ "./src/basemap.ts");
@@ -47262,9 +47269,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return CartoLayer; });
 /* harmony import */ var _deck_gl_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @deck.gl/core */ "@deck.gl/core");
 /* harmony import */ var _deck_gl_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_deck_gl_core__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _carto_tile_layer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./carto-tile-layer */ "./src/layers/carto-tile-layer.js");
-/* harmony import */ var _h3_tile_layer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./h3-tile-layer */ "./src/layers/h3-tile-layer.js");
-/* harmony import */ var _quadkey_tile_layer__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./quadkey-tile-layer */ "./src/layers/quadkey-tile-layer.js");
+/* harmony import */ var _carto_tile_layer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./carto-tile-layer */ "./src/layers/carto-tile-layer.ts");
+/* harmony import */ var _h3_tile_layer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./h3-tile-layer */ "./src/layers/h3-tile-layer.ts");
+/* harmony import */ var _quadkey_tile_layer__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./quadkey-tile-layer */ "./src/layers/quadkey-tile-layer.ts");
 /* harmony import */ var _api__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../api */ "./src/api/index.ts");
 /* harmony import */ var _api_maps_api_common__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../api/maps-api-common */ "./src/api/maps-api-common.ts");
 /* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../config */ "./src/config.ts");
@@ -47320,8 +47327,14 @@ const defaultProps = {
   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
 };
+/** All properties supported by CartoLayer. */
+
 class CartoLayer extends _deck_gl_core__WEBPACK_IMPORTED_MODULE_0__["CompositeLayer"] {
   initializeState() {
     this.state = {
@@ -47459,7 +47472,8 @@ class CartoLayer extends _deck_gl_core__WEBPACK_IMPORTED_MODULE_0__["CompositeLa
     const {
       data: _notUsed,
       ...propsNoData
-    } = this.props;
+    } = this.props; // @ts-expect-error 'uniqueIdProperty' is specified more than once, so this usage will be overwritten.
+
     const props = {
       uniqueIdProperty,
       ...propsNoData
@@ -47517,9 +47531,9 @@ _defineProperty(CartoLayer, "defaultProps", defaultProps);
 
 /***/ }),
 
-/***/ "./src/layers/carto-tile-layer.js":
+/***/ "./src/layers/carto-tile-layer.ts":
 /*!****************************************!*\
-  !*** ./src/layers/carto-tile-layer.js ***!
+  !*** ./src/layers/carto-tile-layer.ts ***!
   \****************************************/
 /*! exports provided: default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -47532,8 +47546,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _deck_gl_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @deck.gl/core */ "@deck.gl/core");
 /* harmony import */ var _deck_gl_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_deck_gl_core__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _loaders_gl_gis__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @loaders.gl/gis */ "../../node_modules/@loaders.gl/gis/dist/esm/index.js");
-/* harmony import */ var _schema_carto_tile__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./schema/carto-tile */ "./src/layers/schema/carto-tile.js");
+/* harmony import */ var _schema_carto_tile__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./schema/carto-tile */ "./src/layers/schema/carto-tile.ts");
 /* harmony import */ var _api_maps_api_common__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../api/maps-api-common */ "./src/api/maps-api-common.ts");
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 /* global TextDecoder */
 
 
@@ -47550,7 +47566,7 @@ function parseJSON(arrayBuffer) {
 
 function parsePbf(buffer) {
   const pbf = new pbf__WEBPACK_IMPORTED_MODULE_0___default.a(buffer);
-  const tile = _schema_carto_tile__WEBPACK_IMPORTED_MODULE_3__["Tile"].read(pbf);
+  const tile = _schema_carto_tile__WEBPACK_IMPORTED_MODULE_3__["TileReader"].read(pbf);
   return tile;
 }
 
@@ -47591,13 +47607,15 @@ function parseCartoTile(arrayBuffer, options) {
     polygons: { ...polygons,
       properties: unpackProperties(polygons.properties)
     }
-  };
+  }; // Note: there is slight, difference in `numericProps` type, however geojson/mvtlayer can cope with this
+
   return data;
 }
 
 const defaultTileFormat = _api_maps_api_common__WEBPACK_IMPORTED_MODULE_4__["TILE_FORMATS"].BINARY;
 const CartoTileLoader = {
   name: 'CARTO Tile',
+  version: '1',
   id: 'cartoTile',
   module: 'carto',
   extensions: ['pbf'],
@@ -47616,6 +47634,8 @@ const defaultProps = { ..._deck_gl_core__WEBPACK_IMPORTED_MODULE_1__["MVTLayer"]
   formatTiles: defaultTileFormat,
   loaders: [CartoTileLoader]
 };
+/** All properties supported by CartoTileLayer. */
+
 class CartoTileLayer extends _deck_gl_core__WEBPACK_IMPORTED_MODULE_1__["MVTLayer"] {
   getTileData(tile) {
     const url = Object(_deck_gl_core__WEBPACK_IMPORTED_MODULE_1__["_getURLFromTemplate"])(this.state.data, tile);
@@ -47656,31 +47676,33 @@ class CartoTileLayer extends _deck_gl_core__WEBPACK_IMPORTED_MODULE_1__["MVTLaye
       return null;
     }
 
-    props.autoHighlight = false;
+    const tileBbox = props.tile.bbox;
     const {
-      bbox: {
-        west,
-        south,
-        east,
-        north
-      }
-    } = props.tile;
-    props.extensions = [new _deck_gl_core__WEBPACK_IMPORTED_MODULE_1__["ClipExtension"](), ...(props.extensions || [])];
-    props.clipBounds = [west, south, east, north];
-    const subLayer = new _deck_gl_core__WEBPACK_IMPORTED_MODULE_1__["GeoJsonLayer"]({ ...props
-    });
+      west,
+      south,
+      east,
+      north
+    } = tileBbox;
+    const subLayerProps = { ...props,
+      autoHighlight: false,
+      extensions: [new _deck_gl_core__WEBPACK_IMPORTED_MODULE_1__["ClipExtension"](), ...(props.extensions || [])],
+      clipBounds: [west, south, east, north]
+    };
+    const subLayer = new _deck_gl_core__WEBPACK_IMPORTED_MODULE_1__["GeoJsonLayer"](subLayerProps);
     return subLayer;
   }
 
 }
-CartoTileLayer.layerName = 'CartoTileLayer';
-CartoTileLayer.defaultProps = defaultProps;
+
+_defineProperty(CartoTileLayer, "layerName", 'CartoTileLayer');
+
+_defineProperty(CartoTileLayer, "defaultProps", defaultProps);
 
 /***/ }),
 
-/***/ "./src/layers/h3-tile-layer.js":
+/***/ "./src/layers/h3-tile-layer.ts":
 /*!*************************************!*\
-  !*** ./src/layers/h3-tile-layer.js ***!
+  !*** ./src/layers/h3-tile-layer.ts ***!
   \*************************************/
 /*! exports provided: default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -47690,7 +47712,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return H3TileLayer; });
 /* harmony import */ var _deck_gl_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @deck.gl/core */ "@deck.gl/core");
 /* harmony import */ var _deck_gl_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_deck_gl_core__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _h3_tileset_2d__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./h3-tileset-2d */ "./src/layers/h3-tileset-2d.js");
+/* harmony import */ var _h3_tileset_2d__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./h3-tileset-2d */ "./src/layers/h3-tileset-2d.ts");
+/* harmony import */ var _spatial_index_tile_layer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./spatial-index-tile-layer */ "./src/layers/spatial-index-tile-layer.ts");
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+
 
 
 
@@ -47704,12 +47730,24 @@ const renderSubLayers = props => {
   } = props.tile;
   if (!data || !data.length) return null;
   return new _deck_gl_core__WEBPACK_IMPORTED_MODULE_0__["H3HexagonLayer"](props, {
+    getHexagon: d => d.id,
     centerHexagon: index,
     highPrecision: true
   });
 };
 
+const defaultProps = {
+  aggregationResLevel: 4
+};
+/** All properties supported by H3TileLayer. */
+
 class H3TileLayer extends _deck_gl_core__WEBPACK_IMPORTED_MODULE_0__["CompositeLayer"] {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "state", void 0);
+  }
+
   initializeState() {
     this.setState({
       data: null,
@@ -47718,9 +47756,6 @@ class H3TileLayer extends _deck_gl_core__WEBPACK_IMPORTED_MODULE_0__["CompositeL
   }
 
   updateState({
-    props,
-    oldProps,
-    context,
     changeFlags
   }) {
     if (changeFlags.dataChanged) {
@@ -47738,33 +47773,37 @@ class H3TileLayer extends _deck_gl_core__WEBPACK_IMPORTED_MODULE_0__["CompositeL
 
   renderLayers() {
     const {
-      data
+      data,
+      tileJSON
     } = this.state;
-    return [new _deck_gl_core__WEBPACK_IMPORTED_MODULE_0__["TileLayer"](this.props, {
-      id: 'h3-tile-layer',
+    const maxZoom = parseInt(tileJSON.maxresolution);
+    return [new _spatial_index_tile_layer__WEBPACK_IMPORTED_MODULE_2__["default"](this.props, {
+      id: `h3-tile-layer-${this.props.id}`,
       data,
-      getHexagon: d => d.id,
+      // @ts-expect-error Tileset2D should be generic over TileIndex
       TilesetClass: _h3_tileset_2d__WEBPACK_IMPORTED_MODULE_1__["default"],
-      renderSubLayers
+      renderSubLayers,
+      maxZoom
     })];
   }
 
 }
-H3TileLayer.layerName = 'H3TileLayer';
+
+_defineProperty(H3TileLayer, "layerName", 'H3TileLayer');
+
+_defineProperty(H3TileLayer, "defaultProps", defaultProps);
 
 /***/ }),
 
-/***/ "./src/layers/h3-tileset-2d.js":
+/***/ "./src/layers/h3-tileset-2d.ts":
 /*!*************************************!*\
-  !*** ./src/layers/h3-tileset-2d.js ***!
+  !*** ./src/layers/h3-tileset-2d.ts ***!
   \*************************************/
-/*! exports provided: getHexagonsInBoundingBox, tileToBoundingBox, default */
+/*! exports provided: default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getHexagonsInBoundingBox", function() { return getHexagonsInBoundingBox; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "tileToBoundingBox", function() { return tileToBoundingBox; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return H3Tileset2D; });
 /* harmony import */ var _deck_gl_geo_layers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @deck.gl/geo-layers */ "@deck.gl/core");
 /* harmony import */ var _deck_gl_geo_layers__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_deck_gl_geo_layers__WEBPACK_IMPORTED_MODULE_0__);
@@ -47772,6 +47811,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var h3_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(h3_js__WEBPACK_IMPORTED_MODULE_1__);
 
 
+
 function getHexagonsInBoundingBox({
   west,
   north,
@@ -47800,10 +47840,11 @@ function getHexagonsInBoundingBox({
   // prematurely. Get more accurate coverage by oversampling
 
 
-  const oversample = 1;
+  const oversample = 2;
   const h3Indices = Object(h3_js__WEBPACK_IMPORTED_MODULE_1__["polyfill"])([[[west, north], [west, south], [east, south], [east, north], [west, north]]], resolution + oversample, true);
   return oversample ? [...new Set(h3Indices.map(i => Object(h3_js__WEBPACK_IMPORTED_MODULE_1__["h3ToParent"])(i, resolution)))] : h3Indices;
 }
+
 function tileToBoundingBox(index) {
   const coordinates = Object(h3_js__WEBPACK_IMPORTED_MODULE_1__["h3ToGeoBoundary"])(index);
   const latitudes = coordinates.map(c => c[0]);
@@ -47818,42 +47859,63 @@ function tileToBoundingBox(index) {
     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));
 }
+
 class H3Tileset2D extends _deck_gl_geo_layers__WEBPACK_IMPORTED_MODULE_0__["_Tileset2D"] {
+  // @ts-expect-error Tileset2D should be generic over TileIndex
   getTileIndices({
     viewport,
     minZoom,
     maxZoom
   }) {
-    const [east, south, west, north] = viewport.getBounds(); // TODO ignores extent
-
-    let z = viewport.zoom;
+    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;
-    } // Heuristic to get h3 resolution
+      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 = Object(h3_js__WEBPACK_IMPORTED_MODULE_1__["geoToH3"])(viewport.latitude, viewport.longitude, maxZoom);
+      indices = Object(h3_js__WEBPACK_IMPORTED_MODULE_1__["kRing"])(center, 1);
+    } else {
+      indices = getHexagonsInBoundingBox({
+        west,
+        north,
+        east,
+        south
+      }, z);
+    }
 
-    const resolution = Math.max(0, Math.floor(2 * z / 3) - 2);
-    return getHexagonsInBoundingBox({
-      west,
-      north,
-      east,
-      south
-    }, resolution).map(i => ({
+    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
@@ -47861,13 +47923,15 @@ class H3Tileset2D extends _deck_gl_geo_layers__WEBPACK_IMPORTED_MODULE_0__["_Til
     return {
       bbox: tileToBoundingBox(i)
     };
-  }
+  } // @ts-expect-error Tileset2D should be generic over TileIndex
+
 
   getTileZoom({
     i
   }) {
     return Object(h3_js__WEBPACK_IMPORTED_MODULE_1__["h3GetResolution"])(i);
-  }
+  } // @ts-expect-error Tileset2D should be generic over TileIndex
+
 
   getParentIndex(index) {
     const resolution = Object(h3_js__WEBPACK_IMPORTED_MODULE_1__["h3GetResolution"])(index.i);
@@ -47881,9 +47945,9 @@ class H3Tileset2D extends _deck_gl_geo_layers__WEBPACK_IMPORTED_MODULE_0__["_Til
 
 /***/ }),
 
-/***/ "./src/layers/quadkey-tile-layer.js":
+/***/ "./src/layers/quadkey-tile-layer.ts":
 /*!******************************************!*\
-  !*** ./src/layers/quadkey-tile-layer.js ***!
+  !*** ./src/layers/quadkey-tile-layer.ts ***!
   \******************************************/
 /*! exports provided: default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -47893,7 +47957,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return QuadkeyTileLayer; });
 /* harmony import */ var _deck_gl_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @deck.gl/core */ "@deck.gl/core");
 /* harmony import */ var _deck_gl_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_deck_gl_core__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _quadkey_tileset_2d__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./quadkey-tileset-2d */ "./src/layers/quadkey-tileset-2d.js");
+/* harmony import */ var _quadkey_tileset_2d__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./quadkey-tileset-2d */ "./src/layers/quadkey-tileset-2d.ts");
+/* harmony import */ var _spatial_index_tile_layer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./spatial-index-tile-layer */ "./src/layers/spatial-index-tile-layer.ts");
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+
 
 
 
@@ -47903,10 +47971,23 @@ const renderSubLayers = props => {
     data
   } = props;
   if (!data || !data.length) return null;
-  return new _deck_gl_core__WEBPACK_IMPORTED_MODULE_0__["QuadkeyLayer"](props);
+  return new _deck_gl_core__WEBPACK_IMPORTED_MODULE_0__["QuadkeyLayer"](props, {
+    getQuadkey: d => d.id
+  });
 };
 
+const defaultProps = {
+  aggregationResLevel: 6
+};
+/** All properties supported by QuadkeyTileLayer. */
+
 class QuadkeyTileLayer extends _deck_gl_core__WEBPACK_IMPORTED_MODULE_0__["CompositeLayer"] {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "state", void 0);
+  }
+
   initializeState() {
     this.setState({
       data: null,
@@ -47915,9 +47996,6 @@ class QuadkeyTileLayer extends _deck_gl_core__WEBPACK_IMPORTED_MODULE_0__["Compo
   }
 
   updateState({
-    props,
-    oldProps,
-    context,
     changeFlags
   }) {
     if (changeFlags.dataChanged) {
@@ -47938,14 +48016,11 @@ class QuadkeyTileLayer extends _deck_gl_core__WEBPACK_IMPORTED_MODULE_0__["Compo
       data,
       tileJSON
     } = this.state;
-    const {
-      maxresolution
-    } = tileJSON;
-    const maxZoom = maxresolution - this.props.aggregationResLevel;
-    return [new _deck_gl_core__WEBPACK_IMPORTED_MODULE_0__["TileLayer"](this.props, {
-      id: 'quadkey-tile-layer',
+    const maxZoom = parseInt(tileJSON?.maxresolution);
+    return [new _spatial_index_tile_layer__WEBPACK_IMPORTED_MODULE_2__["default"](this.props, {
+      id: `quadkey-tile-layer-${this.props.id}`,
       data,
-      getQuadkey: d => d.id,
+      // TODO: Tileset2D should be generic over TileIndex type
       TilesetClass: _quadkey_tileset_2d__WEBPACK_IMPORTED_MODULE_1__["default"],
       renderSubLayers,
       maxZoom
@@ -47953,13 +48028,16 @@ class QuadkeyTileLayer extends _deck_gl_core__WEBPACK_IMPORTED_MODULE_0__["Compo
   }
 
 }
-QuadkeyTileLayer.layerName = 'QuadkeyTileLayer';
+
+_defineProperty(QuadkeyTileLayer, "layerName", 'QuadkeyTileLayer');
+
+_defineProperty(QuadkeyTileLayer, "defaultProps", defaultProps);
 
 /***/ }),
 
-/***/ "./src/layers/quadkey-tileset-2d.js":
+/***/ "./src/layers/quadkey-tileset-2d.ts":
 /*!******************************************!*\
-  !*** ./src/layers/quadkey-tileset-2d.js ***!
+  !*** ./src/layers/quadkey-tileset-2d.ts ***!
   \******************************************/
 /*! exports provided: default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -47988,9 +48066,11 @@ function tileToQuadkey(tile) {
 }
 
 class QuadkeyTileset2D extends _deck_gl_geo_layers__WEBPACK_IMPORTED_MODULE_0__["_Tileset2D"] {
+  // @ts-expect-error for spatial indices, TileSet2d should be parametrized by TileIndexT
   getTileIndices(opts) {
     return super.getTileIndices(opts).map(tileToQuadkey);
-  }
+  } // @ts-expect-error TileIndex must be generic
+
 
   getTileId({
     i
@@ -48000,13 +48080,15 @@ class QuadkeyTileset2D extends _deck_gl_geo_layers__WEBPACK_IMPORTED_MODULE_0__[
 
   getTileMetadata() {
     return {};
-  }
+  } // @ts-expect-error TileIndex must be generic
+
 
   getTileZoom({
     i
   }) {
     return i.length;
-  }
+  } // @ts-expect-error TileIndex must be generic
+
 
   getParentIndex(index) {
     const i = index.i.slice(0, -1);
@@ -48019,219 +48101,273 @@ class QuadkeyTileset2D extends _deck_gl_geo_layers__WEBPACK_IMPORTED_MODULE_0__[
 
 /***/ }),
 
-/***/ "./src/layers/schema/carto-tile.js":
+/***/ "./src/layers/schema/carto-tile.ts":
 /*!*****************************************!*\
-  !*** ./src/layers/schema/carto-tile.js ***!
+  !*** ./src/layers/schema/carto-tile.ts ***!
   \*****************************************/
-/*! exports provided: Tile */
+/*! exports provided: TileReader */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Tile", function() { return Tile; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TileReader", function() { return TileReader; });
 // KeyValueObject ========================================
-const KeyValueObject = {};
+class KeyValueObjectReader {
+  static read(pbf, end) {
+    return pbf.readFields(KeyValueObjectReader._readField, {
+      key: '',
+      value: ''
+    }, end);
+  }
 
-KeyValueObject.read = function (pbf, end) {
-  return pbf.readFields(KeyValueObject._readField, {
-    key: '',
-    value: ''
-  }, end);
-};
+  static _readField(tag, obj, pbf) {
+    if (tag === 1) obj.key = pbf.readString();else if (tag === 2) obj.value = pbf.readString();
+  }
 
-KeyValueObject._readField = function (tag, obj, pbf) {
-  if (tag === 1) obj.key = pbf.readString();else if (tag === 2) obj.value = pbf.readString();
-}; // Properties ========================================
+} // Properties ========================================
 
 
-const Properties = {};
+class PropertiesReader {
+  static read(pbf, end) {
+    return pbf.readFields(PropertiesReader._readField, {
+      data: []
+    }, end);
+  }
 
-Properties.read = function (pbf, end) {
-  return pbf.readFields(Properties._readField, {
-    data: []
-  }, end);
-};
+  static _readField(tag, obj, pbf) {
+    if (tag === 1) obj.data.push(KeyValueObjectReader.read(pbf, pbf.readVarint() + pbf.pos));
+  }
 
-Properties._readField = function (tag, obj, pbf) {
-  if (tag === 1) obj.data.push(KeyValueObject.read(pbf, pbf.readVarint() + pbf.pos));
-}; // Doubles ========================================
+} // Doubles ========================================
 
 
-const Doubles = {};
+class DoublesReader {
+  static read(pbf, end) {
+    // TODO perhaps we can do better and directly map from the source
+    // ArrayBuffer using ArrayBuffer.slice()
+    const {
+      value,
+      size
+    } = pbf.readFields(DoublesReader._readField, {
+      value: [],
+      size: 0
+    }, end);
+    return {
+      value: new Float32Array(value),
+      size
+    };
+  }
 
-Doubles.read = function (pbf, end) {
-  // TODO perhaps we can do better and directly map from the source
-  // ArrayBuffer using ArrayBuffer.slice()
-  const {
-    value,
-    size
-  } = pbf.readFields(Doubles._readField, {
-    value: [],
-    size: 0
-  }, end);
-  return {
-    value: new Float32Array(value),
-    size
-  };
-};
+  static _readField(tag, obj, pbf) {
+    if (tag === 1) pbf.readPackedDouble(obj.value);else if (tag === 2) obj.size = pbf.readVarint(true);
+  }
 
-Doubles._readField = function (tag, obj, pbf) {
-  if (tag === 1) pbf.readPackedDouble(obj.value);else if (tag === 2) obj.size = pbf.readVarint(true);
-}; // Ints ========================================
+} // Ints ========================================
 
 
-const Ints = {};
+class IntsReader {
+  static read(pbf, end) {
+    const {
+      value,
+      size
+    } = pbf.readFields(IntsReader._readField, {
+      value: [],
+      size: 0
+    }, end);
+    return {
+      value: new Uint32Array(value),
+      size
+    };
+  }
 
-Ints.read = function (pbf, end) {
-  const {
-    value,
-    size
-  } = pbf.readFields(Ints._readField, {
-    value: [],
-    size: 0
-  }, end);
-  return {
-    value: new Uint32Array(value),
-    size
-  };
-};
+  static _readField(tag, obj, pbf) {
+    if (tag === 1) pbf.readPackedVarint(obj.value);else if (tag === 2) obj.size = pbf.readVarint(true);
+  }
 
-Ints._readField = function (tag, obj, pbf) {
-  if (tag === 1) pbf.readPackedVarint(obj.value);else if (tag === 2) obj.size = pbf.readVarint(true);
-}; // NumericProp ========================================
+} // NumericProp ========================================
 
 
-const NumericProp = {};
+class NumericPropReader {
+  static read(pbf, end) {
+    return pbf.readFields(NumericPropReader._readField, {
+      value: []
+    }, end);
+  }
 
-NumericProp.read = function (pbf, end) {
-  return pbf.readFields(NumericProp._readField, {
-    value: []
-  }, end);
-};
+  static _readField(tag, obj, pbf) {
+    if (tag === 1) pbf.readPackedDouble(obj.value);
+  }
 
-NumericProp._readField = function (tag, obj, pbf) {
-  if (tag === 1) pbf.readPackedDouble(obj.value);
-}; // NumericPropKeyValue ========================================
+} // NumericPropKeyValue ========================================
 
 
-const NumericPropKeyValue = {};
+class NumericPropKeyValueReader {
+  static read(pbf, end) {
+    return pbf.readFields(NumericPropKeyValueReader._readField, {
+      key: '',
+      value: null
+    }, end);
+  }
 
-NumericPropKeyValue.read = function (pbf, end) {
-  return pbf.readFields(NumericPropKeyValue._readField, {
-    key: '',
-    value: null
-  }, end);
-};
+  static _readField(tag, obj, pbf) {
+    if (tag === 1) obj.key = pbf.readString();else if (tag === 2) obj.value = NumericPropReader.read(pbf, pbf.readVarint() + pbf.pos);
+  }
 
-NumericPropKeyValue._readField = function (tag, obj, pbf) {
-  if (tag === 1) obj.key = pbf.readString();else if (tag === 2) obj.value = NumericProp.read(pbf, pbf.readVarint() + pbf.pos);
-}; // NumericProp._FieldEntry1 ========================================
+} // Points ========================================
 
 
-NumericProp._FieldEntry1 = {};
+class PointsReader {
+  static read(pbf, end) {
+    return pbf.readFields(PointsReader._readField, {
+      positions: null,
+      globalFeatureIds: null,
+      featureIds: null,
+      properties: [],
+      numericProps: {}
+    }, end);
+  }
 
-NumericProp._FieldEntry1.read = function (pbf, end) {
-  return pbf.readFields(NumericProp._FieldEntry1._readField, {
-    key: '',
-    value: 0
-  }, end);
-};
+  static _readField(tag, obj, pbf) {
+    if (tag === 1) obj.positions = DoublesReader.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 2) obj.globalFeatureIds = IntsReader.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 3) obj.featureIds = IntsReader.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 4) obj.properties.push(PropertiesReader.read(pbf, pbf.readVarint() + pbf.pos));else if (tag === 5) {
+      const entry = NumericPropKeyValueReader.read(pbf, pbf.readVarint() + pbf.pos);
+      obj.numericProps[entry.key] = entry.value;
+    }
+  }
 
-NumericProp._FieldEntry1._readField = function (tag, obj, pbf) {
-  if (tag === 1) obj.key = pbf.readString();else if (tag === 2) obj.value = pbf.readDouble();
-}; // StringProp ========================================
+}
 
+// Lines ========================================
+class LinesReader {
+  static read(pbf, end) {
+    return pbf.readFields(LinesReader._readField, {
+      positions: null,
+      pathIndices: null,
+      globalFeatureIds: null,
+      featureIds: null,
+      properties: [],
+      numericProps: {}
+    }, end);
+  }
 
-const StringProp = {};
+  static _readField(tag, obj, pbf) {
+    if (tag === 1) obj.positions = DoublesReader.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 2) obj.pathIndices = IntsReader.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 3) obj.globalFeatureIds = IntsReader.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 4) obj.featureIds = IntsReader.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 5) obj.properties.push(PropertiesReader.read(pbf, pbf.readVarint() + pbf.pos));else if (tag === 6) {
+      const entry = NumericPropKeyValueReader.read(pbf, pbf.readVarint() + pbf.pos);
+      obj.numericProps[entry.key] = entry.value;
+    }
+  }
 
-StringProp.read = function (pbf, end) {
-  return pbf.readFields(StringProp._readField, {
-    value: []
-  }, end);
-};
+} // Polygons ========================================
 
-StringProp._readField = function (tag, obj, pbf) {
-  if (tag === 1) obj.value.push(pbf.readString());
-}; // Points ========================================
 
+class PolygonsReader {
+  static read(pbf, end) {
+    return pbf.readFields(PolygonsReader._readField, {
+      positions: null,
+      polygonIndices: null,
+      globalFeatureIds: null,
+      featureIds: null,
+      primitivePolygonIndices: null,
+      triangles: null,
+      properties: [],
+      numericProps: {}
+    }, end);
+  }
+
+  static _readField(tag, obj, pbf) {
+    if (tag === 1) obj.positions = DoublesReader.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 2) obj.polygonIndices = IntsReader.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 3) obj.globalFeatureIds = IntsReader.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 4) obj.featureIds = IntsReader.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 5) obj.primitivePolygonIndices = IntsReader.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 6) obj.triangles = IntsReader.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 7) obj.properties.push(PropertiesReader.read(pbf, pbf.readVarint() + pbf.pos));else if (tag === 8) {
+      const entry = NumericPropKeyValueReader.read(pbf, pbf.readVarint() + pbf.pos);
+      obj.numericProps[entry.key] = entry.value;
+    }
+  }
 
-const Points = {};
+} // Tile ========================================
 
-Points.read = function (pbf, end) {
-  return pbf.readFields(Points._readField, {
-    positions: null,
-    globalFeatureIds: null,
-    featureIds: null,
-    properties: [],
-    numericProps: {}
-  }, end);
-};
 
-Points._readField = function (tag, obj, pbf) {
-  if (tag === 1) obj.positions = Doubles.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 2) obj.globalFeatureIds = Ints.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 3) obj.featureIds = Ints.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 4) obj.properties.push(Properties.read(pbf, pbf.readVarint() + pbf.pos));else if (tag === 5) {
-    const entry = NumericPropKeyValue.read(pbf, pbf.readVarint() + pbf.pos);
-    obj.numericProps[entry.key] = entry.value;
+class TileReader {
+  static read(pbf, end) {
+    return pbf.readFields(TileReader._readField, {
+      points: null,
+      lines: null,
+      polygons: null
+    }, end);
   }
-}; // Lines ========================================
 
+  static _readField(tag, obj, pbf) {
+    if (tag === 1) obj.points = PointsReader.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 2) obj.lines = LinesReader.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 3) obj.polygons = PolygonsReader.read(pbf, pbf.readVarint() + pbf.pos);
+  }
 
-const Lines = {};
+}
 
-Lines.read = function (pbf, end) {
-  return pbf.readFields(Lines._readField, {
-    positions: null,
-    pathIndices: null,
-    globalFeatureIds: null,
-    featureIds: null,
-    properties: [],
-    numericProps: {}
-  }, end);
-};
+/***/ }),
 
-Lines._readField = function (tag, obj, pbf) {
-  if (tag === 1) obj.positions = Doubles.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 2) obj.pathIndices = Ints.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 3) obj.globalFeatureIds = Ints.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 4) obj.featureIds = Ints.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 5) obj.properties.push(Properties.read(pbf, pbf.readVarint() + pbf.pos));else if (tag === 6) {
-    const entry = NumericPropKeyValue.read(pbf, pbf.readVarint() + pbf.pos);
-    obj.numericProps[entry.key] = entry.value;
-  }
-}; // Polygons ========================================
+/***/ "./src/layers/spatial-index-tile-layer.ts":
+/*!************************************************!*\
+  !*** ./src/layers/spatial-index-tile-layer.ts ***!
+  \************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return SpatialIndexTileLayer; });
+/* harmony import */ var _deck_gl_geo_layers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @deck.gl/geo-layers */ "@deck.gl/core");
+/* harmony import */ var _deck_gl_geo_layers__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_deck_gl_geo_layers__WEBPACK_IMPORTED_MODULE_0__);
 
-const Polygons = {};
 
-Polygons.read = function (pbf, end) {
-  return pbf.readFields(Polygons._readField, {
-    positions: null,
-    polygonIndices: null,
-    globalFeatureIds: null,
-    featureIds: null,
-    primitivePolygonIndices: null,
-    triangles: null,
-    properties: [],
-    numericProps: {}
-  }, end);
-};
+function isFeatureIdDefined(value) {
+  return value !== undefined && value !== null && value !== '';
+}
 
-Polygons._readField = function (tag, obj, pbf) {
-  if (tag === 1) obj.positions = Doubles.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 2) obj.polygonIndices = Ints.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 3) obj.globalFeatureIds = Ints.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 4) obj.featureIds = Ints.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 5) obj.primitivePolygonIndices = Ints.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 6) obj.triangles = Ints.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 7) obj.properties.push(Properties.read(pbf, pbf.readVarint() + pbf.pos));else if (tag === 8) {
-    const entry = NumericPropKeyValue.read(pbf, pbf.readVarint() + pbf.pos);
-    obj.numericProps[entry.key] = entry.value;
+class SpatialIndexTileLayer extends _deck_gl_geo_layers__WEBPACK_IMPORTED_MODULE_0__["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
+      });
+    }
   }
-}; // Tile ========================================
 
+  getSubLayerPropsByTile(tile) {
+    return {
+      highlightedObjectIndex: this.getHighlightedObjectIndex(tile),
+      highlightColor: this.state.highlightColor
+    };
+  }
 
-const Tile = {};
+  getHighlightedObjectIndex(tile) {
+    const {
+      hoveredFeatureId
+    } = this.state;
+    const data = tile.content;
+    const isFeatureIdPresent = isFeatureIdDefined(hoveredFeatureId);
 
-Tile.read = function (pbf, end) {
-  return pbf.readFields(Tile._readField, {
-    points: null,
-    lines: null,
-    polygons: null
-  }, end);
-};
+    if (!isFeatureIdPresent || !Array.isArray(data)) {
+      return -1;
+    }
 
-Tile._readField = function (tag, obj, pbf) {
-  if (tag === 1) obj.points = Points.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 2) obj.lines = Lines.read(pbf, pbf.readVarint() + pbf.pos);else if (tag === 3) obj.polygons = Polygons.read(pbf, pbf.readVarint() + pbf.pos);
-};
+    return data.findIndex(feature => feature.id === hoveredFeatureId);
+  }
+
+}
 
 /***/ }),