@carto/api-client 0.4.0-alpha.6 → 0.4.1-alpha.0

package/build/models/model.d.ts

@@ -1,6 +1,7 @@
 import { Filter, FilterLogicalOperator, MapType, QueryParameters, SpatialFilter } from '../types.js';
 import { ModelRequestOptions } from './common.js';
 import { ApiVersion } from '../constants.js';
+import { SpatialDataType, SpatialFilterPolyfillMode } from '../sources/types.js';
 /** @internalRemarks Source: @carto/react-api */
 declare const AVAILABLE_MODELS: readonly ["category", "histogram", "formula", "pick", "timeseries", "range", "scatterplot", "table"];
 export type Model = (typeof AVAILABLE_MODELS)[number];
@@ -14,9 +15,14 @@ export interface ModelSource {
     data: string;
     filters?: Record<string, Filter>;
     filtersLogicalOperator?: FilterLogicalOperator;
-    geoColumn?: string;
     spatialFilter?: SpatialFilter;
     queryParameters?: QueryParameters;
+    spatialDataColumn?: string;
+    spatialDataType?: SpatialDataType;
+    spatialFiltersResolution?: number;
+    spatialFiltersMode?: SpatialFilterPolyfillMode;
+    /** original resolution of the spatial index data as stored in the DW */
+    dataResolution?: number;
 }
 /**
  * Execute a SQL model request.

package/build/sources/types.d.ts

@@ -38,6 +38,30 @@ export type SourceOptionalOptions = {
      * @default {@link DEFAULT_MAX_LENGTH_URL}
      */
     maxLengthURL?: number;
+    /**
+     * The column name and the type of geospatial support.
+     *
+     * If not present, defaults to `'geom'` for generic queries, `'quadbin'` for Quadbin sources and `'h3'` for H3 sources.
+     */
+    spatialDataColumn?: string;
+    /**
+     * The type of geospatial support. Defaults to `'geo'`.
+     */
+    spatialDataType?: SpatialDataType;
+    /**
+     * Relative resolution of a tile. Higher values increase density and data size. At `tileResolution = 1`, tile geometry is
+     * quantized to a 1024x1024 grid. Increasing or decreasing the resolution will increase or decrease the dimensions of
+     * the quantization grid proportionately.
+     *
+     * Supported `tileResolution` values, with corresponding grid sizes:
+     *
+     * - 0.25: 256x256
+     * - 0.5: 512x512
+     * - 1: 1024x1024
+     * - 2: 2048x2048
+     * - 4: 4096x4096
+     */
+    tileResolution?: TileResolution;
 };
 export type SourceOptions = SourceRequiredOptions & Partial<SourceOptionalOptions>;
 export type AggregationOptions = {
@@ -55,6 +79,10 @@ export type AggregationOptions = {
      * @default 6 for quadbin and 4 for h3 sources
      */
     aggregationResLevel?: number;
+    /**
+     * Original resolution of the spatial index data as stored in the DW
+     */
+    dataResolution?: number;
 };
 export type FilterOptions = {
     /**
@@ -63,28 +91,8 @@ export type FilterOptions = {
     filters?: Filters;
 };
 export type QuerySourceOptions = {
-    /**
-     * The column name and the type of geospatial support.
-     *
-     * If not present, defaults to `'geom'` for generic queries, `'quadbin'` for Quadbin sources and `'h3'` for H3 sources.
-     */
-    spatialDataColumn?: string;
-    /** SQL query. */
+    /** Full SQL query with query paremeter placeholders (if any). */
     sqlQuery: string;
-    /**
-     * Relative resolution of a tile. Higher values increase density and data size. At `tileResolution = 1`, tile geometry is
-     * quantized to a 1024x1024 grid. Increasing or decreasing the resolution will increase or decrease the dimensions of
-     * the quantization grid proportionately.
-     *
-     * Supported `tileResolution` values, with corresponding grid sizes:
-     *
-     * - 0.25: 256x256
-     * - 0.5: 512x512
-     * - 1: 1024x1024
-     * - 2: 2048x2048
-     * - 4: 4096x4096
-     */
-    tileResolution?: TileResolution;
     /**
      * Values for named or positional paramteres in the query.
      *
@@ -116,26 +124,6 @@ export type TableSourceOptions = {
      * Fully qualified name of table.
      */
     tableName: string;
-    /**
-     * The column name and the type of geospatial support.
-     *
-     * If not present, defaults to `'geom'` for generic tables, `'quadbin'` for Quadbin sources and `'h3'` for H3 sources.
-     */
-    spatialDataColumn?: string;
-    /**
-     * Relative resolution of a tile. Higher values increase density and data size. At `tileResolution = 1`, tile geometry is
-     * quantized to a 1024x1024 grid. Increasing or decreasing the resolution will increase or decrease the dimensions of
-     * the quantization grid proportionately.
-     *
-     * Supported `tileResolution` values, with corresponding grid sizes:
-     *
-     * - 0.25: 256x256
-     * - 0.5: 512x512
-     * - 1: 1024x1024
-     * - 2: 2048x2048
-     * - 4: 4096x4096
-     */
-    tileResolution?: TileResolution;
 };
 export type TilesetSourceOptions = {
     /**
@@ -152,6 +140,13 @@ export type ColumnsOption = {
     columns?: string[];
 };
 export type SpatialDataType = 'geo' | 'h3' | 'quadbin';
+/**
+ * Strategy used for covering spatial filter geometry with spatial indexes.
+ * See https://docs.carto.com/data-and-analysis/analytics-toolbox-for-bigquery/sql-reference/quadbin#quadbin_polyfill_mode
+ * or https://docs.carto.com/data-and-analysis/analytics-toolbox-for-bigquery/sql-reference/h3#h3_polyfill_mode for more information.
+ * @internalRemarks Source: cloud-native maps-api
+ * */
+export type SpatialFilterPolyfillMode = 'center' | 'intersects' | 'contains';
 export type TilejsonMapInstantiation = MapInstantiation & {
     tilejson: {
         url: string[];

package/build/spatial-index.d.ts

@@ -0,0 +1,11 @@
+import type { ModelSource } from './models/model';
+import type { AggregationOptions } from './sources/types';
+import type { ViewState } from './widget-sources';
+export declare function getSpatialFiltersResolution({ source, viewState, }: {
+    source: Partial<ModelSource & AggregationOptions>;
+    viewState?: ViewState;
+}): number | undefined;
+export declare function getHexagonResolution(viewport: {
+    zoom: number;
+    latitude: number;
+}, tileSize: number): number;

package/build/utils.d.ts

@@ -14,7 +14,7 @@ type Row<T> = Record<string, T> | Record<string, T>[] | T[] | T;
  */
 export declare function normalizeObjectKeys<T, R extends Row<T>>(el: R): R;
 /** @internalRemarks Source: @carto/react-core */
-export declare function assert(condition: unknown, message: string): void;
+export declare function assert(condition: unknown, message: string): asserts condition;
 /**
  * @internalRemarks Source: @carto/react-core
  * @internal

package/build/widget-sources/types.d.ts

@@ -1,13 +1,20 @@
-import { TileResolution } from '../sources/types';
+import { SpatialFilterPolyfillMode, TileResolution } from '../sources/types';
 import { GroupDateType, SortColumnType, SortDirection, SpatialFilter } from '../types';
 /******************************************************************************
  * WIDGET API REQUESTS
  */
+export interface ViewState {
+    zoom: number;
+    latitude: number;
+    longitude: number;
+}
 /** Common options for {@link WidgetBaseSource} requests. */
 interface BaseRequestOptions {
     spatialFilter?: SpatialFilter;
+    spatialFiltersMode?: SpatialFilterPolyfillMode;
     abortController?: AbortController;
     filterOwner?: string;
+    viewState?: ViewState;
 }
 /** Options for {@link WidgetBaseSource#getCategories}. */
 export interface CategoryRequestOptions extends BaseRequestOptions {

package/build/widget-sources/widget-base-source.d.ts

@@ -5,7 +5,6 @@ import { SourceOptions } from '../sources/index.js';
 import { ApiVersion } from '../constants.js';
 export interface WidgetBaseSourceProps extends Omit<SourceOptions, 'filters'> {
     apiVersion?: ApiVersion;
-    geoColumn?: string;
     filters?: Record<string, Filter>;
     filtersLogicalOperator?: FilterLogicalOperator;
 }

package/package.json

@@ -4,7 +4,7 @@
   "repository": "github:CartoDB/carto-api-client",
   "author": "Don McCurdy <donmccurdy@carto.com>",
   "packageManager": "yarn@4.3.1",
-  "version": "0.4.0-alpha.6",
+  "version": "0.4.1-alpha.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public",
@@ -98,6 +98,5 @@
     "vite": "^5.2.10",
     "vitest": "1.6.0",
     "vue": "^3.4.27"
-  },
-  "stableVersion": "0.3.1"
+  }
 }

package/src/api/query.ts

@@ -12,8 +12,7 @@ import {buildQueryUrl} from './endpoints';
 import {requestWithParameters} from './request-with-parameters';
 import {APIErrorContext} from './carto-api-error';
 
-export type QueryOptions = SourceOptions &
-  Omit<QuerySourceOptions, 'spatialDataColumn'>;
+export type QueryOptions = SourceOptions & QuerySourceOptions;
 type UrlParameters = {q: string; queryParameters?: string};
 
 export const query = async function (

package/src/models/model.ts

@@ -7,9 +7,10 @@ import {
   SpatialFilter,
 } from '../types.js';
 import {$TODO} from '../types-internal.js';
-import {assert} from '../utils.js';
+import {assert, isPureObject} from '../utils.js';
 import {ModelRequestOptions, makeCall} from './common.js';
 import {ApiVersion} from '../constants.js';
+import {SpatialDataType, SpatialFilterPolyfillMode} from '../sources/types.js';
 
 /** @internalRemarks Source: @carto/react-api */
 const AVAILABLE_MODELS = [
@@ -35,9 +36,14 @@ export interface ModelSource {
   data: string;
   filters?: Record<string, Filter>;
   filtersLogicalOperator?: FilterLogicalOperator;
-  geoColumn?: string;
   spatialFilter?: SpatialFilter;
   queryParameters?: QueryParameters;
+  spatialDataColumn?: string;
+  spatialDataType?: SpatialDataType;
+  spatialFiltersResolution?: number;
+  spatialFiltersMode?: SpatialFilterPolyfillMode;
+  /** original resolution of the spatial index data as stored in the DW */
+  dataResolution?: number;
 }
 
 const {V3} = ApiVersion;
@@ -79,50 +85,51 @@ export function executeModel(props: {
     data,
     filters,
     filtersLogicalOperator = 'and',
-    geoColumn = DEFAULT_GEO_COLUMN,
+    spatialDataType = 'geo',
+    spatialFiltersMode = 'intersects',
+    spatialFiltersResolution = 0,
   } = source;
 
-  const queryParameters = source.queryParameters
-    ? JSON.stringify(source.queryParameters)
-    : '';
-
-  const queryParams: Record<string, string> = {
+  const queryParams: Record<string, unknown> = {
     type,
     client: clientId,
     source: data,
-    params: JSON.stringify(params),
-    queryParameters,
-    filters: JSON.stringify(filters),
+    params,
+    queryParameters: source.queryParameters || '',
+    filters,
     filtersLogicalOperator,
   };
 
+  const spatialDataColumn = source.spatialDataColumn || DEFAULT_GEO_COLUMN;
+
   // Picking Model API requires 'spatialDataColumn'.
   if (model === 'pick') {
-    queryParams.spatialDataColumn = geoColumn;
+    queryParams.spatialDataColumn = spatialDataColumn;
   }
 
-  // API supports multiple filters, we apply it only to geoColumn
+  // API supports multiple filters, we apply it only to spatialDataColumn
   const spatialFilters = source.spatialFilter
-    ? {[geoColumn]: source.spatialFilter}
+    ? {[spatialDataColumn]: source.spatialFilter}
     : undefined;
 
   if (spatialFilters) {
-    queryParams.spatialFilters = JSON.stringify(spatialFilters);
+    queryParams.spatialFilters = spatialFilters; // JSON.stringify(spatialFilters);
+    queryParams.spatialDataColumn = spatialDataColumn;
+    queryParams.spatialDataType = spatialDataType;
+  }
+
+  if (spatialDataType !== 'geo') {
+    if (spatialFiltersResolution > 0) {
+      queryParams.spatialFiltersResolution = spatialFiltersResolution;
+    }
+    queryParams.spatialFiltersMode = spatialFiltersMode;
   }
 
   const urlWithSearchParams =
-    url + '?' + new URLSearchParams(queryParams).toString();
+    url + '?' + objectToURLSearchParams(queryParams).toString();
   const isGet = urlWithSearchParams.length <= REQUEST_GET_MAX_URL_LENGTH;
   if (isGet) {
     url = urlWithSearchParams;
-  } else {
-    // undo the JSON.stringify, @TODO find a better pattern
-    queryParams.params = params as $TODO;
-    queryParams.filters = filters as $TODO;
-    queryParams.queryParameters = source.queryParameters as $TODO;
-    if (spatialFilters) {
-      queryParams.spatialFilters = spatialFilters as $TODO;
-    }
   }
   return makeCall({
     url,
@@ -134,3 +141,19 @@ export function executeModel(props: {
     },
   });
 }
+
+function objectToURLSearchParams(object: Record<string, unknown>) {
+  const params = new URLSearchParams();
+  for (const key in object) {
+    if (isPureObject(object[key])) {
+      params.append(key, JSON.stringify(object[key]));
+    } else if (Array.isArray(object[key])) {
+      params.append(key, JSON.stringify(object[key]));
+    } else if (object[key] === null) {
+      params.append(key, 'null');
+    } else if (object[key] !== undefined) {
+      params.append(key, String(object[key]));
+    }
+  }
+  return params;
+}

package/src/sources/h3-query-source.ts

@@ -19,6 +19,7 @@ export type H3QuerySourceOptions = SourceOptions &
   QuerySourceOptions &
   AggregationOptions &
   FilterOptions;
+
 type UrlParameters = {
   aggregationExp: string;
   aggregationResLevel?: string;
@@ -59,7 +60,12 @@ export const h3QuerySource = async function (
   return baseSource<UrlParameters>('query', options, urlParameters).then(
     (result) => ({
       ...(result as TilejsonResult),
-      widgetSource: new WidgetQuerySource(options),
+      widgetSource: new WidgetQuerySource({
+        ...options,
+        // NOTE: passing redundant spatialDataColumn here to apply the default value 'h3'
+        spatialDataColumn,
+        spatialDataType: 'h3',
+      }),
     })
   );
 };

package/src/sources/h3-table-source.ts

@@ -55,7 +55,12 @@ export const h3TableSource = async function (
   return baseSource<UrlParameters>('table', options, urlParameters).then(
     (result) => ({
       ...(result as TilejsonResult),
-      widgetSource: new WidgetTableSource(options),
+      widgetSource: new WidgetTableSource({
+        ...options,
+        // NOTE: passing redundant spatialDataColumn here to apply the default value 'h3'
+        spatialDataColumn,
+        spatialDataType: 'h3',
+      }),
     })
   );
 };

package/src/sources/quadbin-query-source.ts

@@ -60,7 +60,12 @@ export const quadbinQuerySource = async function (
   return baseSource<UrlParameters>('query', options, urlParameters).then(
     (result) => ({
       ...(result as TilejsonResult),
-      widgetSource: new WidgetQuerySource(options),
+      widgetSource: new WidgetQuerySource({
+        ...options,
+        // NOTE: passing redundant spatialDataColumn here to apply the default value 'quadbin'
+        spatialDataColumn,
+        spatialDataType: 'quadbin',
+      }),
     })
   );
 };

package/src/sources/quadbin-table-source.ts

@@ -56,7 +56,12 @@ export const quadbinTableSource = async function (
   return baseSource<UrlParameters>('table', options, urlParameters).then(
     (result) => ({
       ...(result as TilejsonResult),
-      widgetSource: new WidgetTableSource(options),
+      widgetSource: new WidgetTableSource({
+        ...options,
+        // NOTE: passing redundant spatialDataColumn here to apply the default value 'quadbin'
+        spatialDataColumn,
+        spatialDataType: 'quadbin',
+      }),
     })
   );
 };

package/src/sources/types.ts

@@ -47,6 +47,33 @@ export type SourceOptionalOptions = {
    * @default {@link DEFAULT_MAX_LENGTH_URL}
    */
   maxLengthURL?: number;
+
+  /**
+   * The column name and the type of geospatial support.
+   *
+   * If not present, defaults to `'geom'` for generic queries, `'quadbin'` for Quadbin sources and `'h3'` for H3 sources.
+   */
+  spatialDataColumn?: string;
+
+  /**
+   * The type of geospatial support. Defaults to `'geo'`.
+   */
+  spatialDataType?: SpatialDataType;
+
+  /**
+   * Relative resolution of a tile. Higher values increase density and data size. At `tileResolution = 1`, tile geometry is
+   * quantized to a 1024x1024 grid. Increasing or decreasing the resolution will increase or decrease the dimensions of
+   * the quantization grid proportionately.
+   *
+   * Supported `tileResolution` values, with corresponding grid sizes:
+   *
+   * - 0.25: 256x256
+   * - 0.5: 512x512
+   * - 1: 1024x1024
+   * - 2: 2048x2048
+   * - 4: 4096x4096
+   */
+  tileResolution?: TileResolution;
 };
 
 export type SourceOptions = SourceRequiredOptions &
@@ -68,6 +95,11 @@ export type AggregationOptions = {
    * @default 6 for quadbin and 4 for h3 sources
    */
   aggregationResLevel?: number;
+
+  /**
+   * Original resolution of the spatial index data as stored in the DW
+   */
+  dataResolution?: number;
 };
 
 export type FilterOptions = {
@@ -78,31 +110,9 @@ export type FilterOptions = {
 };
 
 export type QuerySourceOptions = {
-  /**
-   * The column name and the type of geospatial support.
-   *
-   * If not present, defaults to `'geom'` for generic queries, `'quadbin'` for Quadbin sources and `'h3'` for H3 sources.
-   */
-  spatialDataColumn?: string;
-
-  /** SQL query. */
+  /** Full SQL query with query paremeter placeholders (if any). */
   sqlQuery: string;
 
-  /**
-   * Relative resolution of a tile. Higher values increase density and data size. At `tileResolution = 1`, tile geometry is
-   * quantized to a 1024x1024 grid. Increasing or decreasing the resolution will increase or decrease the dimensions of
-   * the quantization grid proportionately.
-   *
-   * Supported `tileResolution` values, with corresponding grid sizes:
-   *
-   * - 0.25: 256x256
-   * - 0.5: 512x512
-   * - 1: 1024x1024
-   * - 2: 2048x2048
-   * - 4: 4096x4096
-   */
-  tileResolution?: TileResolution;
-
   /**
    * Values for named or positional paramteres in the query.
    *
@@ -135,28 +145,6 @@ export type TableSourceOptions = {
    * Fully qualified name of table.
    */
   tableName: string;
-
-  /**
-   * The column name and the type of geospatial support.
-   *
-   * If not present, defaults to `'geom'` for generic tables, `'quadbin'` for Quadbin sources and `'h3'` for H3 sources.
-   */
-  spatialDataColumn?: string;
-
-  /**
-   * Relative resolution of a tile. Higher values increase density and data size. At `tileResolution = 1`, tile geometry is
-   * quantized to a 1024x1024 grid. Increasing or decreasing the resolution will increase or decrease the dimensions of
-   * the quantization grid proportionately.
-   *
-   * Supported `tileResolution` values, with corresponding grid sizes:
-   *
-   * - 0.25: 256x256
-   * - 0.5: 512x512
-   * - 1: 1024x1024
-   * - 2: 2048x2048
-   * - 4: 4096x4096
-   */
-  tileResolution?: TileResolution;
 };
 
 export type TilesetSourceOptions = {
@@ -177,6 +165,14 @@ export type ColumnsOption = {
 
 export type SpatialDataType = 'geo' | 'h3' | 'quadbin';
 
+/**
+ * Strategy used for covering spatial filter geometry with spatial indexes.
+ * See https://docs.carto.com/data-and-analysis/analytics-toolbox-for-bigquery/sql-reference/quadbin#quadbin_polyfill_mode
+ * or https://docs.carto.com/data-and-analysis/analytics-toolbox-for-bigquery/sql-reference/h3#h3_polyfill_mode for more information.
+ * @internalRemarks Source: cloud-native maps-api
+ * */
+export type SpatialFilterPolyfillMode = 'center' | 'intersects' | 'contains';
+
 export type TilejsonMapInstantiation = MapInstantiation & {
   tilejson: {url: string[]};
 };

package/src/sources/vector-query-source.ts

@@ -64,7 +64,10 @@ export const vectorQuerySource = async function (
   return baseSource<UrlParameters>('query', options, urlParameters).then(
     (result) => ({
       ...(result as TilejsonResult),
-      widgetSource: new WidgetQuerySource(options),
+      widgetSource: new WidgetQuerySource({
+        ...options,
+        spatialDataType: 'geo',
+      }),
     })
   );
 };

package/src/sources/vector-table-source.ts

@@ -22,6 +22,7 @@ export type VectorTableSourceOptions = SourceOptions &
   TableSourceOptions &
   FilterOptions &
   ColumnsOption;
+
 type UrlParameters = {
   columns?: string;
   filters?: Record<string, unknown>;
@@ -58,7 +59,10 @@ export const vectorTableSource = async function (
   return baseSource<UrlParameters>('table', options, urlParameters).then(
     (result) => ({
       ...(result as TilejsonResult),
-      widgetSource: new WidgetTableSource(options),
+      widgetSource: new WidgetTableSource({
+        ...options,
+        spatialDataType: 'geo',
+      }),
     })
   );
 };

package/src/spatial-index.ts

@@ -0,0 +1,119 @@
+import {
+  DEFAULT_AGGREGATION_RES_LEVEL_H3,
+  DEFAULT_AGGREGATION_RES_LEVEL_QUADBIN,
+} from './constants-internal';
+import type {ModelSource} from './models/model';
+import type {AggregationOptions} from './sources/types';
+import {assert} from './utils';
+import type {ViewState} from './widget-sources';
+
+const DEFAULT_TILE_SIZE = 512;
+const QUADBIN_ZOOM_MAX_OFFSET = 4;
+
+export function getSpatialFiltersResolution({
+  source,
+  viewState,
+}: {
+  source: Partial<ModelSource & AggregationOptions>;
+  viewState?: ViewState;
+}) {
+  assert(
+    viewState,
+    'viewState prop is required to compute automatic spatialFiltersResolution when using spatialFilter with spatial indexes. Either pass a `spatialFiltersResolution` prop or a `viewState` prop to avoid this error'
+  );
+
+  const dataResolution = source.dataResolution ?? Number.MAX_VALUE;
+
+  const aggregationResLevel =
+    source.aggregationResLevel ??
+    (source.spatialDataType === 'h3'
+      ? DEFAULT_AGGREGATION_RES_LEVEL_H3
+      : DEFAULT_AGGREGATION_RES_LEVEL_QUADBIN);
+
+  const aggregationResLevelOffset = Math.max(
+    0,
+    Math.floor(aggregationResLevel)
+  );
+
+  const currentZoomInt = Math.ceil(viewState.zoom);
+  if (source.spatialDataType === 'h3') {
+    const tileSize = DEFAULT_TILE_SIZE;
+    const maxResolutionForZoom =
+      maxH3SpatialFiltersResolutions.find(
+        ([zoom]) => zoom === currentZoomInt
+      )?.[1] ?? Math.max(0, currentZoomInt - 3);
+
+    const maxSpatialFiltersResolution = maxResolutionForZoom
+      ? Math.min(dataResolution, maxResolutionForZoom)
+      : dataResolution;
+
+    const hexagonResolution =
+      getHexagonResolution(viewState, tileSize) + aggregationResLevelOffset;
+
+    return Math.min(hexagonResolution, maxSpatialFiltersResolution);
+  }
+
+  if (source.spatialDataType === 'quadbin') {
+    const maxResolutionForZoom = currentZoomInt + QUADBIN_ZOOM_MAX_OFFSET;
+    const maxSpatialFiltersResolution = Math.min(
+      dataResolution,
+      maxResolutionForZoom
+    );
+
+    const quadsResolution =
+      Math.floor(viewState.zoom) + aggregationResLevelOffset;
+    return Math.min(quadsResolution, maxSpatialFiltersResolution);
+  }
+
+  return undefined;
+}
+
+const maxH3SpatialFiltersResolutions = [
+  [20, 14],
+  [19, 13],
+  [18, 12],
+  [17, 11],
+  [16, 10],
+  [15, 9],
+  [14, 8],
+  [13, 7],
+  [12, 7],
+  [11, 7],
+  [10, 6],
+  [9, 6],
+  [8, 5],
+  [7, 4],
+  [6, 4],
+  [5, 3],
+  [4, 2],
+  [3, 1],
+  [2, 1],
+  [1, 0],
+];
+
+// stolen from https://github.com/visgl/deck.gl/blob/master/modules/carto/src/layers/h3-tileset-2d.ts
+
+// Relative scale factor (0 = no biasing, 2 = a few hexagons cover view)
+const BIAS = 2;
+
+// Resolution conversion function. Takes a WebMercatorViewport and returns
+// a H3 resolution such that the screen space size of the hexagons is
+// similar
+export function getHexagonResolution(
+  viewport: {zoom: number; latitude: number},
+  tileSize: number
+): number {
+  // Difference in given tile size compared to deck's internal 512px tile size,
+  // expressed as an offset to the viewport zoom.
+  const zoomOffset = Math.log2(tileSize / DEFAULT_TILE_SIZE);
+  const hexagonScaleFactor = (2 / 3) * (viewport.zoom - zoomOffset);
+  const latitudeScaleFactor = Math.log(
+    1 / Math.cos((Math.PI * viewport.latitude) / 180)
+  );
+
+  // Clip and bias
+  return Math.max(
+    0,
+    Math.floor(hexagonScaleFactor + latitudeScaleFactor - BIAS)
+  );
+}