@deck.gl/carto 9.0.28 → 9.0.30

package/package.json

@@ -3,7 +3,7 @@
   "description": "CARTO official integration with Deck.gl. Build geospatial applications using CARTO and Deck.gl.",
   "license": "MIT",
   "type": "module",
-  "version": "9.0.28",
+  "version": "9.0.30",
   "publishConfig": {
     "access": "public"
   },
@@ -47,8 +47,8 @@
     "@loaders.gl/mvt": "^4.2.0",
     "@loaders.gl/schema": "^4.2.0",
     "@loaders.gl/tiles": "^4.2.0",
-    "@luma.gl/core": "^9.0.15",
-    "@luma.gl/shadertools": "^9.0.15",
+    "@luma.gl/core": "~9.0.27",
+    "@luma.gl/shadertools": "~9.0.27",
     "@math.gl/web-mercator": "^4.0.0",
     "@types/d3-array": "^3.0.2",
     "@types/d3-color": "^1.4.2",
@@ -72,5 +72,5 @@
     "@deck.gl/layers": "^9.0.0",
     "@loaders.gl/core": "^4.2.0"
   },
-  "gitHead": "58a2526b9b910d3ce086d627643839c3cd8ee944"
+  "gitHead": "255576946233ccf28f6e1a7709f9360d06ca64a2"
 }

package/src/api/common.ts

@@ -1,4 +1,6 @@
 export const DEFAULT_API_BASE_URL = 'https://gcp-us-east1.api.carto.com';
 export const DEFAULT_CLIENT = 'deck-gl-carto';
 export const V3_MINOR_VERSION = '3.4';
-export const MAX_GET_LENGTH = 8192;
+
+// Fastly default limit is 8192; leave some padding.
+export const DEFAULT_MAX_LENGTH_URL = 7000;

package/src/api/fetch-map.ts

@@ -1,9 +1,6 @@
 /* eslint-disable camelcase */
-/**
- * Maps API Client for Carto 3
- */
 import {CartoAPIError} from './carto-api-error';
-import {DEFAULT_API_BASE_URL, DEFAULT_CLIENT} from './common';
+import {DEFAULT_API_BASE_URL, DEFAULT_CLIENT, DEFAULT_MAX_LENGTH_URL} from './common';
 import {buildPublicMapUrl, buildStatsUrl} from './endpoints';
 import {
   GeojsonResult,
@@ -39,13 +36,14 @@ type Dataset = {
 };
 
 /* global clearInterval, setInterval, URL */
-/* eslint-disable complexity, max-statements */
+/* eslint-disable complexity, max-statements, max-params */
 async function _fetchMapDataset(
   dataset: Dataset,
   accessToken: string,
   apiBaseUrl: string,
   clientId?: string,
-  headers?: Record<string, string>
+  headers?: Record<string, string>,
+  maxLengthURL = DEFAULT_MAX_LENGTH_URL
 ) {
   const {
     aggregationExp,
@@ -67,7 +65,8 @@ async function _fetchMapDataset(
     clientId,
     connectionName,
     format,
-    headers
+    headers,
+    maxLengthURL
   };
 
   if (type === 'tileset') {
@@ -117,7 +116,8 @@ async function _fetchTilestats(
   attribute: string,
   dataset: Dataset,
   accessToken: string,
-  apiBaseUrl: string
+  apiBaseUrl: string,
+  maxLengthURL = DEFAULT_MAX_LENGTH_URL
 ) {
   const {connectionName, data, id, source, type, queryParameters} = dataset;
   const errorContext: APIErrorContext = {
@@ -147,7 +147,8 @@ async function _fetchTilestats(
     baseUrl,
     headers,
     parameters,
-    errorContext
+    errorContext,
+    maxLengthURL
   });
 
   // Replace tilestats for attribute with value from API
@@ -161,17 +162,19 @@ async function fillInMapDatasets(
   {datasets, token}: {datasets: Dataset[]; token: string},
   clientId: string,
   apiBaseUrl: string,
-  headers?: Record<string, string>
+  headers?: Record<string, string>,
+  maxLengthURL = DEFAULT_MAX_LENGTH_URL
 ) {
   const promises = datasets.map(dataset =>
-    _fetchMapDataset(dataset, token, apiBaseUrl, clientId, headers)
+    _fetchMapDataset(dataset, token, apiBaseUrl, clientId, headers, maxLengthURL)
   );
   return await Promise.all(promises);
 }
 
 async function fillInTileStats(
   {datasets, keplerMapConfig, token}: {datasets: Dataset[]; keplerMapConfig: any; token: string},
-  apiBaseUrl: string
+  apiBaseUrl: string,
+  maxLengthURL = DEFAULT_MAX_LENGTH_URL
 ) {
   const attributes: {attribute: string; dataset: any}[] = [];
   const {layers} = keplerMapConfig.config.visState;
@@ -200,18 +203,53 @@ async function fillInTileStats(
   }
 
   const promises = filteredAttributes.map(({attribute, dataset}) =>
-    _fetchTilestats(attribute, dataset, token, apiBaseUrl)
+    _fetchTilestats(attribute, dataset, token, apiBaseUrl, maxLengthURL)
   );
   return await Promise.all(promises);
 }
 
 export type FetchMapOptions = {
+  /**
+   * CARTO platform access token. Only required for private maps.
+   */
+  accessToken?: string;
+
+  /**
+   * Base URL of the CARTO Maps API.
+   *
+   * Example for account located in EU-west region: `https://gcp-eu-west1.api.carto.com`
+   *
+   * @default https://gcp-us-east1.api.carto.com
+   */
   apiBaseUrl?: string;
+
+  /**
+   * Identifier of map created in CARTO Builder.
+   */
   cartoMapId: string;
   clientId?: string;
+
+  /**
+   * Custom HTTP headers added to map instantiation and data requests.
+   */
   headers?: Record<string, string>;
+
+  /**
+   * Interval in seconds at which to autoRefresh the data. If provided, `onNewData` must also be provided.
+   */
   autoRefresh?: number;
+
+  /**
+   * Callback function that will be invoked whenever data in layers is changed. If provided, `autoRefresh` must also be provided.
+   */
   onNewData?: (map: any) => void;
+
+  /**
+   * Maximum URL character length. Above this limit, requests use POST.
+   * Used to avoid browser and CDN limits.
+   * @default {@link DEFAULT_MAX_LENGTH_URL}
+   */
+  maxLengthURL?: number;
 };
 
 export type FetchMapResult = ParseMapResult & {
@@ -224,16 +262,22 @@ export type FetchMapResult = ParseMapResult & {
 
 /* eslint-disable max-statements */
 export async function fetchMap({
+  accessToken,
   apiBaseUrl = DEFAULT_API_BASE_URL,
   cartoMapId,
   clientId = DEFAULT_CLIENT,
   headers = {},
   autoRefresh,
-  onNewData
+  onNewData,
+  maxLengthURL = DEFAULT_MAX_LENGTH_URL
 }: FetchMapOptions): Promise<FetchMapResult> {
   assert(cartoMapId, 'Must define CARTO map id: fetchMap({cartoMapId: "XXXX-XXXX-XXXX"})');
   assert(apiBaseUrl, 'Must define apiBaseUrl');
 
+  if (accessToken) {
+    headers = {Authorization: `Bearer ${accessToken}`, ...headers};
+  }
+
   if (autoRefresh || onNewData) {
     assert(onNewData, 'Must define `onNewData` when using autoRefresh');
     assert(typeof onNewData === 'function', '`onNewData` must be a function');
@@ -245,7 +289,7 @@ export async function fetchMap({
 
   const baseUrl = buildPublicMapUrl({apiBaseUrl, cartoMapId});
   const errorContext: APIErrorContext = {requestType: 'Public map', mapId: cartoMapId};
-  const map = await requestWithParameters({baseUrl, headers, errorContext});
+  const map = await requestWithParameters({baseUrl, headers, errorContext, maxLengthURL});
 
   // Periodically check if the data has changed. Note that this
   // will not update when a map is published.
@@ -253,10 +297,16 @@ export async function fetchMap({
   if (autoRefresh) {
     // eslint-disable-next-line @typescript-eslint/no-misused-promises
     const intervalId = setInterval(async () => {
-      const changed = await fillInMapDatasets(map, clientId, apiBaseUrl, {
-        ...headers,
-        'If-Modified-Since': new Date().toUTCString()
-      });
+      const changed = await fillInMapDatasets(
+        map,
+        clientId,
+        apiBaseUrl,
+        {
+          ...headers,
+          'If-Modified-Since': new Date().toUTCString()
+        },
+        maxLengthURL
+      );
       if (onNewData && changed.some(v => v === true)) {
         onNewData(parseMap(map));
       }
@@ -285,11 +335,11 @@ export async function fetchMap({
     fetchBasemapProps({config: map.keplerMapConfig.config, errorContext}),
 
     // Mutates map.datasets so that dataset.data contains data
-    fillInMapDatasets(map, clientId, apiBaseUrl, headers)
+    fillInMapDatasets(map, clientId, apiBaseUrl, headers, maxLengthURL)
   ]);
 
   // Mutates attributes in visualChannels to contain tile stats
-  await fillInTileStats(map, apiBaseUrl);
+  await fillInTileStats(map, apiBaseUrl, maxLengthURL);
 
   const out = {...parseMap(map), basemap, ...{stopAutoRefresh}};
 

package/src/api/query.ts

@@ -11,6 +11,7 @@ export const query = async function (options: QueryOptions): Promise<QueryResult
   const {
     apiBaseUrl = SOURCE_DEFAULTS.apiBaseUrl,
     clientId = SOURCE_DEFAULTS.clientId,
+    maxLengthURL = SOURCE_DEFAULTS.maxLengthURL,
     connectionName,
     sqlQuery,
     queryParameters
@@ -35,6 +36,7 @@ export const query = async function (options: QueryOptions): Promise<QueryResult
     baseUrl,
     parameters,
     headers,
-    errorContext
+    errorContext,
+    maxLengthURL
   });
 };

package/src/api/request-with-parameters.ts

@@ -1,7 +1,7 @@
 import {VERSION} from '@deck.gl/core';
 import {isPureObject} from '../utils';
 import {CartoAPIError} from './carto-api-error';
-import {MAX_GET_LENGTH, V3_MINOR_VERSION} from './common';
+import {DEFAULT_MAX_LENGTH_URL, V3_MINOR_VERSION} from './common';
 import type {APIErrorContext} from './types';
 
 /**
@@ -25,12 +25,14 @@ export async function requestWithParameters<T = any>({
   baseUrl,
   parameters = {},
   headers: customHeaders = {},
-  errorContext
+  errorContext,
+  maxLengthURL = DEFAULT_MAX_LENGTH_URL
 }: {
   baseUrl: string;
   parameters?: Record<string, unknown>;
   headers?: Record<string, string>;
   errorContext: APIErrorContext;
+  maxLengthURL?: number;
 }): Promise<T> {
   parameters = {...DEFAULT_PARAMETERS, ...parameters};
   baseUrl = excludeURLParameters(baseUrl, Object.keys(parameters));
@@ -44,7 +46,7 @@ export async function requestWithParameters<T = any>({
 
   /* global fetch */
   const fetchPromise =
-    url.length > MAX_GET_LENGTH
+    url.length > maxLengthURL
       ? fetch(baseUrl, {method: 'POST', body: JSON.stringify(parameters), headers})
       : fetch(url, {headers});
 

package/src/layers/cluster-tile-layer.ts

@@ -106,8 +106,14 @@ class ClusterGeoJsonLayer<
     clusterIds: bigint[];
     hoveredFeatureId: bigint | number | null;
     highlightColor: number[];
+    aggregationCache: WeakMap<any, Map<number, ClusteredFeaturePropertiesT<FeaturePropertiesT>[]>>;
   };
 
+  initializeState() {
+    super.initializeState();
+    this.state.aggregationCache = new WeakMap();
+  }
+
   renderLayers(): Layer | null | LayersList {
     const visibleTiles = this.state.tileset?.tiles.filter((tile: Tile2DHeader) => {
       return tile.isLoaded && tile.content && this.state.tileset!.isTileVisible(tile);
@@ -119,6 +125,7 @@ class ClusterGeoJsonLayer<
 
     const {zoom} = this.context.viewport;
     const {clusterLevel, getPosition, getWeight} = this.props;
+    const {aggregationCache} = this.state;
 
     const properties = extractAggregationProperties(visibleTiles[0]);
     const data = [] as ClusteredFeaturePropertiesT<FeaturePropertiesT>[];
@@ -127,15 +134,21 @@ class ClusterGeoJsonLayer<
       // Calculate aggregation based on viewport zoom
       const overZoom = Math.round(zoom - tile.zoom);
       const aggregationLevels = Math.round(clusterLevel) - overZoom;
+      let tileAggregationCache = aggregationCache.get(tile.content);
+      if (!tileAggregationCache) {
+        tileAggregationCache = new Map();
+        aggregationCache.set(tile.content, tileAggregationCache);
+      }
       const didAggregate = aggregateTile(
         tile,
+        tileAggregationCache,
         aggregationLevels,
         properties,
         getPosition,
         getWeight
       );
       needsUpdate ||= didAggregate;
-      data.push(...tile.userData![aggregationLevels]);
+      data.push(...tileAggregationCache.get(aggregationLevels)!);
     }
 
     data.sort((a, b) => Number(b.count - a.count));

package/src/layers/cluster-utils.ts

@@ -23,6 +23,7 @@ export type ParsedQuadbinTile<FeaturePropertiesT> = ParsedQuadbinCell<FeaturePro
  */
 export function aggregateTile<FeaturePropertiesT>(
   tile: Tile2DHeader<ParsedQuadbinTile<FeaturePropertiesT>>,
+  tileAggregationCache: Map<number, ClusteredFeaturePropertiesT<FeaturePropertiesT>[]>,
   aggregationLevels: number,
   properties: AggregationProperties<FeaturePropertiesT> = [],
   getPosition: Accessor<ParsedQuadbinCell<FeaturePropertiesT>, [number, number]>,
@@ -32,7 +33,7 @@ export function aggregateTile<FeaturePropertiesT>(
 
   // Aggregate on demand and cache result
   if (!tile.userData) tile.userData = {};
-  const cell0 = tile.userData[aggregationLevels]?.[0];
+  const cell0 = tileAggregationCache.get(aggregationLevels)?.[0];
   if (cell0) {
     // Have already aggregated this tile
     if (properties.every(property => property.name in cell0)) {
@@ -41,7 +42,7 @@ export function aggregateTile<FeaturePropertiesT>(
     }
 
     // Aggregated properties have changed, re-aggregate
-    tile.userData = {};
+    tileAggregationCache.clear();
   }
 
   const out: Record<number, any> = {};
@@ -49,7 +50,7 @@ export function aggregateTile<FeaturePropertiesT>(
     let id = cell.id;
     const position = typeof getPosition === 'function' ? getPosition(cell, {} as any) : getPosition;
 
-    // Aggregate by parent id
+    // Aggregate by parent rid
     for (let i = 0; i < aggregationLevels - 1; i++) {
       id = cellToParent(id);
     }
@@ -93,7 +94,7 @@ export function aggregateTile<FeaturePropertiesT>(
     }
   }
 
-  tile.userData[aggregationLevels] = Object.values(out);
+  tileAggregationCache.set(aggregationLevels, Object.values(out));
   return true;
 }
 

package/src/layers/heatmap.ts

@@ -192,6 +192,7 @@ export const heatmap: ShaderPass<HeatmapProps, HeatmapUniforms> = {
     intensity: 'f32',
     opacity: 'f32'
   },
+  // @ts-expect-error stricter luma gl types
   getUniforms: opts => {
     const {
       delta = [1, 0],

package/src/sources/base-source.ts

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import {DEFAULT_API_BASE_URL, DEFAULT_CLIENT} from '../api/common';
+import {DEFAULT_API_BASE_URL, DEFAULT_CLIENT, DEFAULT_MAX_LENGTH_URL} from '../api/common';
 import {buildSourceUrl} from '../api/endpoints';
 import {requestWithParameters} from '../api/request-with-parameters';
 import type {APIErrorContext, MapType} from '../api/types';
@@ -16,7 +16,8 @@ export const SOURCE_DEFAULTS: SourceOptionalOptions = {
   apiBaseUrl: DEFAULT_API_BASE_URL,
   clientId: DEFAULT_CLIENT,
   format: 'tilejson',
-  headers: {}
+  headers: {},
+  maxLengthURL: DEFAULT_MAX_LENGTH_URL
 };
 
 export async function baseSource<UrlParameters extends Record<string, unknown>>(
@@ -32,7 +33,7 @@ export async function baseSource<UrlParameters extends Record<string, unknown>>(
     }
   }
   const baseUrl = buildSourceUrl(mergedOptions);
-  const {clientId, format} = mergedOptions;
+  const {clientId, maxLengthURL, format} = mergedOptions;
   const headers = {Authorization: `Bearer ${options.accessToken}`, ...options.headers};
   const parameters = {client: clientId, ...urlParameters};
 
@@ -46,7 +47,8 @@ export async function baseSource<UrlParameters extends Record<string, unknown>>(
     baseUrl,
     parameters,
     headers,
-    errorContext
+    errorContext,
+    maxLengthURL
   });
 
   const dataUrl = mapInstantiation[format].url[0];
@@ -59,7 +61,8 @@ export async function baseSource<UrlParameters extends Record<string, unknown>>(
     const json = await requestWithParameters<TilejsonResult>({
       baseUrl: dataUrl,
       headers,
-      errorContext
+      errorContext,
+      maxLengthURL
     });
     if (accessToken) {
       json.accessToken = accessToken;
@@ -70,6 +73,7 @@ export async function baseSource<UrlParameters extends Record<string, unknown>>(
   return await requestWithParameters<GeojsonResult | JsonResult>({
     baseUrl: dataUrl,
     headers,
-    errorContext
+    errorContext,
+    maxLengthURL
   });
 }

package/src/sources/types.ts

@@ -35,6 +35,13 @@ export type SourceOptionalOptions = {
   clientId: string;
   /** @deprecated  use `query` instead **/
   format: Format;
+
+  /**
+   * Maximum URL character length. Above this limit, requests use POST.
+   * Used to avoid browser and CDN limits.
+   * @default {@link DEFAULT_MAX_LENGTH_URL}
+   */
+  maxLengthURL?: number;
 };
 
 export type SourceOptions = SourceRequiredOptions & Partial<SourceOptionalOptions>;