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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@deck.gl/carto",
   "description": "CARTO official integration with Deck.gl. Build geospatial applications using CARTO and Deck.gl.",
   "license": "MIT",
-  "version": "8.7.10",
+  "version": "8.8.0-alpha.4",
   "publishConfig": {
     "access": "public"
   },
@@ -31,12 +31,12 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env.dev"
   },
   "dependencies": {
-    "@loaders.gl/gis": "^3.1.5",
-    "@loaders.gl/loader-utils": "^3.1.5",
-    "@loaders.gl/mvt": "^3.1.5",
-    "@loaders.gl/tiles": "^3.1.5",
+    "@loaders.gl/gis": "^3.2.0-alpha.4",
+    "@loaders.gl/loader-utils": "^3.2.0-alpha.4",
+    "@loaders.gl/mvt": "^3.2.0-alpha.4",
+    "@loaders.gl/tiles": "^3.2.0-alpha.4",
     "@luma.gl/constants": "^8.5.10",
-    "@math.gl/web-mercator": "^3.5.7",
+    "@math.gl/web-mercator": "3.6.0-alpha.5",
     "cartocolor": "^4.0.2",
     "d3-array": "^2.8.0",
     "d3-color": "^2.0.0",
@@ -53,9 +53,10 @@
   "peerDependencies": {
     "@deck.gl/aggregation-layers": "^8.0.0",
     "@deck.gl/core": "^8.0.0",
+    "@deck.gl/extensions": "^8.0.0",
     "@deck.gl/geo-layers": "^8.0.0",
     "@deck.gl/layers": "^8.0.0",
-    "@loaders.gl/core": "^3.1.5"
+    "@loaders.gl/core": "^3.0.0"
   },
-  "gitHead": "0d3e70aefb845cd7b37ce030a67d8a6540420c5c"
+  "gitHead": "608c74fff3c955142c4e1f5e77b9e21ebbf690f7"
 }

package/src/api/layer-map.ts

@@ -42,6 +42,12 @@ export const AGGREGATION = {
   sum: 'SUM'
 };
 
+export const OPACITY_MAP = {
+  getFillColor: 'opacity',
+  getLineColor: 'strokeOpacity',
+  getTextColor: 'opacity'
+};
+
 const AGGREGATION_FUNC = {
   'count unique': (values, accessor) => groupSort(values, v => v.length, accessor).length,
   median,
@@ -71,7 +77,6 @@ const sharedPropMap = {
     enable3d: 'extruded',
     elevationScale: 'elevationScale',
     filled: 'filled',
-    opacity: 'opacity',
     strokeColor: 'getLineColor',
     stroked: 'stroked',
     thickness: 'getLineWidth',
@@ -225,6 +230,10 @@ function normalizeAccessor(accessor, data) {
   return accessor;
 }
 
+export function opacityToAlpha(opacity) {
+  return opacity !== undefined ? Math.round(255 * Math.pow(opacity, 1 / 2.2)) : 255;
+}
+
 export function getColorValueAccessor({name}, colorAggregation, data: any) {
   const aggregator = AGGREGATION_FUNC[colorAggregation];
   const accessor = values => aggregator(values, p => p[name]);
@@ -259,11 +268,12 @@ export function getColorAccessor(
   scale.domain(domain);
   scale.range(scaleColor);
   scale.unknown(UNKNOWN_COLOR);
-  const alpha = opacity !== undefined ? Math.round(255 * Math.pow(opacity, 1 / 2.2)) : 255;
+  const alpha = opacityToAlpha(opacity);
 
   const accessor = properties => {
-    const {r, g, b} = rgb(scale(properties[name]));
-    return [r, g, b, alpha];
+    const propertyValue = properties[name];
+    const {r, g, b} = rgb(scale(propertyValue));
+    return [r, g, b, propertyValue === null ? 0 : alpha];
   };
   return normalizeAccessor(accessor, data);
 }

package/src/api/maps-api-common.ts

@@ -20,8 +20,8 @@ export const MAP_TYPES = {
   TILESET: 'tileset'
 } as const;
 export type MapType = ValuesOf<typeof MAP_TYPES>;
-export const COLUMNS_SUPPORT = [MAP_TYPES.TABLE];
-export const GEO_COLUMN_SUPPORT = [MAP_TYPES.QUERY, MAP_TYPES.TABLE];
+export const COLUMNS_SUPPORT: MapType[] = [MAP_TYPES.TABLE];
+export const GEO_COLUMN_SUPPORT: MapType[] = [MAP_TYPES.QUERY, MAP_TYPES.TABLE];
 
 // AVAILABLE FORMATS
 export const FORMATS = {
@@ -35,6 +35,7 @@ export type Format = ValuesOf<typeof FORMATS>;
 // AVAILABLE FORMATS FOR TILES
 export const TILE_FORMATS = {
   MVT: 'mvt',
+  JSON: 'json',
   GEOJSON: 'geojson',
   BINARY: 'binary'
 } as const;
@@ -59,7 +60,7 @@ export interface SchemaField {
 export interface MapInstantiation extends MapInstantiationFormats {
   nrows: number;
   size?: number;
-  schema?: SchemaField[];
+  schema: SchemaField[];
 }
 
 type MapInstantiationFormats = Record<

package/src/api/maps-v3-client.ts

@@ -112,7 +112,6 @@ type FetchLayerDataParams = {
   credentials: CloudNativeCredentials;
   geoColumn?: string;
   columns?: string[];
-  schema?: boolean;
   clientId?: string;
   format?: Format;
   formatTiles?: TileFormat;
@@ -128,15 +127,11 @@ function getParameters({
   source,
   geoColumn,
   columns,
-  schema,
   clientId,
   aggregationExp,
   aggregationResLevel
 }: Omit<FetchLayerDataParams, 'connection' | 'credentials'>) {
   const parameters = [encodeParameter('client', clientId || DEFAULT_CLIENT)];
-  if (schema) {
-    parameters.push(encodeParameter('schema', true));
-  }
 
   const sourceName = type === MAP_TYPES.QUERY ? 'q' : 'name';
   parameters.push(encodeParameter(sourceName, source));
@@ -164,7 +159,6 @@ export async function mapInstantiation({
   credentials,
   geoColumn,
   columns,
-  schema,
   clientId,
   aggregationExp,
   aggregationResLevel
@@ -175,7 +169,6 @@ export async function mapInstantiation({
     source,
     geoColumn,
     columns,
-    schema,
     clientId,
     aggregationExp,
     aggregationResLevel
@@ -248,8 +241,8 @@ function checkFetchLayerDataParameters({
 
 export interface FetchLayerDataResult {
   data: any;
-  format: Format;
-  schema?: SchemaField[];
+  format?: Format;
+  schema: SchemaField[];
 }
 export async function fetchLayerData({
   type,
@@ -260,7 +253,6 @@ export async function fetchLayerData({
   columns,
   format,
   formatTiles,
-  schema,
   clientId,
   aggregationExp,
   aggregationResLevel
@@ -276,18 +268,13 @@ export async function fetchLayerData({
     columns,
     format,
     formatTiles,
-    schema,
     clientId,
     aggregationExp,
     aggregationResLevel
   });
 
   const data = await requestData({url, format: mapFormat, accessToken});
-  const result: FetchLayerDataResult = {data, format: mapFormat};
-  if (schema) {
-    result.schema = metadata.schema;
-  }
-
+  const result: FetchLayerDataResult = {data, format: mapFormat, schema: metadata.schema};
   return result;
 }
 
@@ -300,7 +287,6 @@ async function _fetchDataUrl({
   columns,
   format,
   formatTiles,
-  schema,
   clientId,
   aggregationExp,
   aggregationResLevel
@@ -334,7 +320,6 @@ async function _fetchDataUrl({
     credentials: localCreds,
     geoColumn,
     columns,
-    schema,
     clientId,
     aggregationExp,
     aggregationResLevel
@@ -390,7 +375,6 @@ export async function getData({
     geoColumn,
     columns,
     format,
-    schema: false,
     clientId
   });
   return layerData.data;

package/src/api/parseMap.ts

@@ -6,7 +6,9 @@ import {
   getColorValueAccessor,
   getSizeAccessor,
   getTextAccessor,
-  getTextPixelOffsetAccessor
+  getTextPixelOffsetAccessor,
+  OPACITY_MAP,
+  opacityToAlpha
 } from './layer-map';
 import {_flatten as flatten, log} from '@deck.gl/core';
 import {assert} from '../utils';
@@ -131,10 +133,21 @@ function createStyleProps(config, mapping) {
   mapProps(config, result, mapping);
 
   // Kepler format sometimes omits strokeColor. TODO: remove once we can rely on
-  // `strokeColor` always being sert when `stroke: true`.
+  // `strokeColor` always being set when `stroke: true`.
   if (result.stroked && !result.getLineColor) {
     result.getLineColor = result.getFillColor;
   }
+
+  for (const colorAccessor in OPACITY_MAP) {
+    if (Array.isArray(result[colorAccessor])) {
+      const color = [...result[colorAccessor]];
+      const opacityKey = OPACITY_MAP[colorAccessor];
+      const opacity = config.visConfig[opacityKey];
+      color[3] = opacityToAlpha(opacity);
+      result[colorAccessor] = color;
+    }
+  }
+
   result.highlightColor = config.visConfig.enable3d ? [255, 255, 255, 60] : [252, 242, 26, 255];
   return result;
 }
@@ -159,7 +172,7 @@ function createChannelProps(visualChannels, type, config, data) {
       if (!AGGREGATION[colorAggregation]) {
         result.getColorValue = getColorValueAccessor(colorField, colorAggregation, data);
       } else {
-        result.getColorWeight = d => [colorField.name];
+        result.getColorWeight = d => d[colorField.name];
       }
     }
   } else if (colorField) {
@@ -167,13 +180,15 @@ function createChannelProps(visualChannels, type, config, data) {
       colorField,
       colorScale,
       visConfig.colorRange,
-      1, // Rely on layer opacity
+      visConfig.opacity,
       data
     );
   }
 
   if (strokeColorField) {
-    const opacity = visConfig.strokeOpacity !== undefined ? visConfig.strokeOpacity : 1;
+    const fallbackOpacity = type === 'point' ? visConfig.opacity : 1;
+    const opacity =
+      visConfig.strokeOpacity !== undefined ? visConfig.strokeOpacity : fallbackOpacity;
     result.getLineColor = getColorAccessor(
       strokeColorField,
       strokeColorScale,

package/src/index.ts

@@ -1,6 +1,8 @@
 export {getDefaultCredentials, setDefaultCredentials} from './config';
 export {default as CartoLayer} from './layers/carto-layer';
 export {default as _CartoTileLayer} from './layers/carto-tile-layer';
+export {default as _H3TileLayer} from './layers/h3-tile-layer';
+export {default as _QuadkeyTileLayer} from './layers/quadkey-tile-layer';
 export {default as BASEMAP} from './basemap';
 export {default as colorBins} from './style/color-bins-style';
 export {default as colorCategories} from './style/color-categories-style';
@@ -16,3 +18,5 @@ export {
   getData,
   mapInstantiation as _mapInstantiation
 } from './api';
+
+export type {CartoLayerProps} from './layers/carto-layer';

package/src/layers/{carto-layer.js → carto-layer.ts}

@@ -1,16 +1,30 @@
-import {CompositeLayer, log} from '@deck.gl/core';
+import {CompositeLayer, Layer, log} from '@deck.gl/core';
 import CartoTileLayer from './carto-tile-layer';
+import H3TileLayer from './h3-tile-layer';
+import QuadkeyTileLayer from './quadkey-tile-layer';
 import {MVTLayer} from '@deck.gl/geo-layers';
 import {GeoJsonLayer} from '@deck.gl/layers';
 import {fetchLayerData, getDataV2, API_VERSIONS} from '../api';
 import {
   COLUMNS_SUPPORT,
+  Format,
   FORMATS,
   GEO_COLUMN_SUPPORT,
+  MapType,
   MAP_TYPES,
+  TileFormat,
   TILE_FORMATS
 } from '../api/maps-api-common';
-import {getDefaultCredentials} from '../config';
+import {
+  ClassicCredentials,
+  CloudNativeCredentials,
+  Credentials,
+  getDefaultCredentials
+} from '../config';
+import {CompositeLayerProps, LayerProps} from 'modules/core/src/types/layer-props';
+import {ChangeFlags} from 'modules/core/src/lib/layer-state';
+import {FetchLayerDataResult} from '../api/maps-v3-client';
+import {assert} from '../utils';
 
 const defaultProps = {
   // (String, required): data resource to load. table name, sql query or tileset name.
@@ -43,22 +57,114 @@ const defaultProps = {
   geoColumn: null,
 
   // (Array<String>, optional): names of columns to fetch. By default, all columns are fetched.
-  columns: {type: 'array', value: null}
+  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
 };
 
-export default class CartoLayer extends CompositeLayer {
-  initializeState() {
+export interface CartoLayerProps<DataT = any> extends CompositeLayerProps<DataT> {
+  /**
+   * Either a SQL query or a name of dataset/tileset.
+   */
+  data: string;
+
+  /**
+   * Data type.
+   *
+   * Possible values are:
+   *  * `MAP_TYPES.QUERY`, if data is a SQL query.
+   *  * `MAP_TYPES.TILESET`, if data is a tileset name.
+   *  * `MAP_TYPES.TABLE`, if data is a dataset name. Only supported with API v3.
+   */
+  type: MapType;
+
+  /**
+   * Name of the connection registered in the CARTO workspace.
+   *
+   * Required when apiVersion is `API_VERSIONS.V3`.
+   */
+  connection?: string;
+
+  /**
+   * Use to override the default data format.
+   *
+   * Only supported when apiVersion is `API_VERSIONS.V3`.
+   *
+   * Possible values are: `FORMATS.GEOJSON`, `FORMATS.JSON` and `FORMATS.TILEJSON`.
+   */
+  format?: Format;
+
+  /**
+   * Use to override the default tile data format.
+   *
+   * Only supported when apiVersion is `API_VERSIONS.V3` and format is `FORMATS.TILEJSON`.
+   *
+   * Possible values are: `TILE_FORMATS.BINARY`, `TILE_FORMATS.GEOJSON` and `TILE_FORMATS.MVT`.
+   */
+  formatTiles?: TileFormat;
+
+  /**
+   * Name of the geo_column in the CARTO platform.
+   *
+   * Use this override the default column (`'geom'`), from which the geometry information should be fetched.
+   *
+   * Only supported when apiVersion is `API_VERSIONS.V3` and type is `MAP_TYPES.TABLE`.
+   */
+  geoColumn?: string;
+
+  /**
+   * Names of columns to fetch.
+   *
+   * By default, all columns are fetched
+   *
+   * Only supported when apiVersion is `API_VERSIONS.V3` and type is `MAP_TYPES.TABLE`.
+   */
+  columns?: string[];
+
+  /**
+   * A string pointing to a unique attribute at the result of the query.
+   *
+   * A unique attribute is needed for highlighting with vector tiles when a feature is split across two or more tiles.
+   */
+  uniqueIdProperty?: string;
+
+  /**
+   * Optional. Overrides the configuration to connect with CARTO.
+   *
+   * @see Credentials
+   */
+  credentials?: Credentials;
+
+  /**
+   * Called when the request to the CARTO Maps API failed.
+   *
+   * By default the Error is thrown.
+   */
+  onDataError?: (err: unknown) => void;
+
+  clientId?: string;
+}
+
+export default class CartoLayer<DataT = any> extends CompositeLayer<CartoLayerProps<DataT>> {
+  static layerName = 'CartoLayer';
+  static defaultProps = defaultProps as any;
+
+  initializeState(): void {
     this.state = {
       data: null,
       apiVersion: null
     };
   }
 
-  get isLoaded() {
+  get isLoaded(): boolean {
     return this.getSubLayers().length > 0 && super.isLoaded;
   }
 
-  _checkProps(props) {
+  _checkProps(props: CartoLayerProps): void {
     const {type, credentials, connection, geoColumn, columns} = props;
     const localCreds = {...getDefaultCredentials(), ...credentials};
     const {apiVersion} = localCreds;
@@ -97,7 +203,16 @@ export default class CartoLayer extends CompositeLayer {
     }
   }
 
-  updateState({props, oldProps, changeFlags}) {
+  updateState({
+    props,
+    oldProps,
+    changeFlags
+  }: {
+    props: CartoLayerProps;
+    oldProps: CartoLayerProps;
+    context: any;
+    changeFlags: ChangeFlags;
+  }): void {
     this._checkProps(props);
     const shouldUpdateData =
       changeFlags.dataChanged ||
@@ -111,40 +226,57 @@ export default class CartoLayer extends CompositeLayer {
 
     if (shouldUpdateData) {
       this.setState({data: null, apiVersion: null});
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
       this._updateData();
     }
   }
 
-  async _updateData() {
+  async _updateData(): Promise<void> {
     try {
-      const {type, data: source, clientId, credentials, ...rest} = this.props;
+      const {type, data: source, clientId, credentials, connection, ...rest} = this.props;
       const localConfig = {...getDefaultCredentials(), ...credentials};
       const {apiVersion} = localConfig;
 
-      let result;
+      let result: FetchLayerDataResult;
       if (apiVersion === API_VERSIONS.V1 || apiVersion === API_VERSIONS.V2) {
-        result = {data: await getDataV2({type, source, credentials})};
+        result = {
+          data: await getDataV2({type, source, credentials: credentials as ClassicCredentials})
+        };
       } else {
-        result = await fetchLayerData({type, source, clientId, credentials, ...rest});
+        result = await fetchLayerData({
+          type,
+          source,
+          clientId,
+          credentials: credentials as CloudNativeCredentials,
+          connection,
+          ...rest
+        });
       }
 
       this.setState({...result, apiVersion});
-      this.props.onDataLoad(result.data);
+
+      this.props.onDataLoad?.(result.data, {
+        propName: 'data',
+        layer: this
+      });
     } catch (err) {
       if (this.props.onDataError) {
-        this.props.onDataError(err);
+        this.props.onDataError(err as Error);
       } else {
         throw err;
       }
     }
   }
 
-  _getSubLayerAndProps() {
+  _getSubLayerAndProps(): [any, LayerProps] {
+    assert(this.state);
+
     const {data, format, apiVersion} = this.state;
 
     const {uniqueIdProperty} = defaultProps;
-    const props = {uniqueIdProperty, ...this.props};
-    delete props.data;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const {data: _notUsed, ...propsNoData} = this.props;
+    const props = {uniqueIdProperty, ...propsNoData};
 
     if (apiVersion === API_VERSIONS.V1 || apiVersion === API_VERSIONS.V2) {
       return [MVTLayer, props];
@@ -155,8 +287,16 @@ export default class CartoLayer extends CompositeLayer {
       const tileUrl = new URL(data.tiles[0]);
 
       props.formatTiles =
-        props.formatTiles || tileUrl.searchParams.get('formatTiles') || TILE_FORMATS.MVT;
+        props.formatTiles ||
+        (tileUrl.searchParams.get('formatTiles') as TileFormat) ||
+        TILE_FORMATS.MVT;
 
+      if (data.scheme === 'h3') {
+        return [H3TileLayer, props];
+      }
+      if (data.scheme === 'quadkey') {
+        return [QuadkeyTileLayer, props];
+      }
       return props.formatTiles === TILE_FORMATS.MVT ? [MVTLayer, props] : [CartoTileLayer, props];
     }
 
@@ -164,7 +304,9 @@ export default class CartoLayer extends CompositeLayer {
     return [GeoJsonLayer, props];
   }
 
-  renderLayers() {
+  renderLayers(): Layer | null {
+    assert(this.state);
+
     const {data} = this.state;
 
     if (!data) return null;
@@ -184,6 +326,3 @@ export default class CartoLayer extends CompositeLayer {
     );
   }
 }
-
-CartoLayer.layerName = 'CartoLayer';
-CartoLayer.defaultProps = defaultProps;

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

@@ -0,0 +1,52 @@
+import {CompositeLayer} from '@deck.gl/core';
+import {H3HexagonLayer} from '@deck.gl/geo-layers';
+import H3Tileset2D from './h3-tileset-2d';
+import SpatialIndexTileLayer from './spatial-index-tile-layer';
+
+const renderSubLayers = props => {
+  const {data} = props;
+  const {index} = props.tile;
+  if (!data || !data.length) return null;
+
+  return new H3HexagonLayer(props, {
+    centerHexagon: index,
+    highPrecision: true
+  });
+};
+
+const defaultProps = {
+  aggregationResLevel: 4
+};
+
+export default class H3TileLayer extends CompositeLayer {
+  initializeState() {
+    this.setState({data: null, tileJSON: null});
+  }
+
+  updateState({props, oldProps, context, changeFlags}) {
+    if (changeFlags.dataChanged) {
+      let {data} = this.props;
+      const tileJSON = data;
+      data = tileJSON.tiles;
+      this.setState({data, tileJSON});
+    }
+  }
+
+  renderLayers() {
+    const {data, tileJSON} = this.state;
+    const maxZoom = parseInt(tileJSON.maxresolution);
+    return [
+      new SpatialIndexTileLayer(this.props, {
+        id: 'h3-tile-layer',
+        data,
+        getHexagon: d => d.id,
+        TilesetClass: H3Tileset2D,
+        renderSubLayers,
+        maxZoom
+      })
+    ];
+  }
+}
+
+H3TileLayer.layerName = 'H3TileLayer';
+H3TileLayer.defaultProps = defaultProps;