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

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.8",
+  "version": "8.8.0-alpha.3",
   "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": "2172dfe62ab2963f755601c1338e98e72cf032e7"
+  "gitHead": "edad7cf75b75a137d63ec89d2d644727d3082e25"
 }

package/src/api/layer-map.ts

@@ -7,7 +7,8 @@ import {
   scalePoint,
   scaleQuantile,
   scaleQuantize,
-  scaleSqrt
+  scaleSqrt,
+  scaleThreshold
 } from 'd3-scale';
 import {format as d3Format} from 'd3-format';
 import moment from 'moment-timezone';
@@ -27,10 +28,13 @@ const SCALE_FUNCS = {
   point: scalePoint,
   quantile: scaleQuantile,
   quantize: scaleQuantize,
-  sqrt: scaleSqrt
+  sqrt: scaleSqrt,
+  custom: scaleThreshold
 };
 export type SCALE_TYPE = keyof typeof SCALE_FUNCS;
 
+const UNKNOWN_COLOR = '#868d91';
+
 export const AGGREGATION = {
   average: 'MEAN',
   maximum: 'MAX',
@@ -38,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,
@@ -67,7 +77,6 @@ const sharedPropMap = {
     enable3d: 'extruded',
     elevationScale: 'elevationScale',
     filled: 'filled',
-    opacity: 'opacity',
     strokeColor: 'getLineColor',
     stroked: 'stroked',
     thickness: 'getLineWidth',
@@ -179,7 +188,11 @@ function domainFromAttribute(attribute, scaleType: SCALE_TYPE) {
 
 function domainFromValues(values, scaleType: SCALE_TYPE) {
   if (scaleType === 'ordinal') {
-    return [...new Set(values)].sort();
+    return groupSort(
+      values,
+      g => -g.length,
+      d => d
+    );
   } else if (scaleType === 'quantile') {
     return values.sort((a, b) => a - b);
   } else if (scaleType === 'log') {
@@ -217,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]);
@@ -226,18 +243,37 @@ export function getColorValueAccessor({name}, colorAggregation, data: any) {
 export function getColorAccessor(
   {name},
   scaleType: SCALE_TYPE,
-  {colors},
+  {colors, colorMap},
   opacity: number | undefined,
   data: any
 ) {
   const scale = SCALE_FUNCS[scaleType as any]();
-  scale.domain(calculateDomain(data, name, scaleType));
-  scale.range(colors);
-  const alpha = opacity !== undefined ? Math.round(255 * Math.pow(opacity, 1 / 2.2)) : 255;
+  let domain: (string | number)[] = [];
+  let scaleColor: string[] = [];
+
+  if (Array.isArray(colorMap)) {
+    colorMap.forEach(([value, color]) => {
+      domain.push(value);
+      scaleColor.push(color);
+    });
+  } else {
+    domain = calculateDomain(data, name, scaleType);
+    scaleColor = colors;
+  }
+
+  if (scaleType === 'ordinal') {
+    domain = domain.slice(0, scaleColor.length);
+  }
+
+  scale.domain(domain);
+  scale.range(scaleColor);
+  scale.unknown(UNKNOWN_COLOR);
+  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,10 +112,11 @@ type FetchLayerDataParams = {
   credentials: CloudNativeCredentials;
   geoColumn?: string;
   columns?: string[];
-  schema?: boolean;
   clientId?: string;
   format?: Format;
   formatTiles?: TileFormat;
+  aggregationExp?: string;
+  aggregationResLevel?: number;
 };
 
 /**
@@ -126,23 +127,27 @@ function getParameters({
   source,
   geoColumn,
   columns,
-  schema,
-  clientId
+  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));
 
-  if (GEO_COLUMN_SUPPORT.includes(type) && geoColumn) {
+  if (geoColumn) {
     parameters.push(encodeParameter('geo_column', geoColumn));
   }
-  if (COLUMNS_SUPPORT.includes(type) && columns) {
+  if (columns) {
     parameters.push(encodeParameter('columns', columns.join(',')));
   }
+  if (aggregationExp) {
+    parameters.push(encodeParameter('aggregationExp', aggregationExp));
+  }
+  if (aggregationResLevel) {
+    parameters.push(encodeParameter('aggregationResLevel', aggregationResLevel));
+  }
 
   return parameters.join('&');
 }
@@ -154,11 +159,20 @@ export async function mapInstantiation({
   credentials,
   geoColumn,
   columns,
-  schema,
-  clientId
+  clientId,
+  aggregationExp,
+  aggregationResLevel
 }: FetchLayerDataParams): Promise<MapInstantiation> {
   const baseUrl = `${credentials.mapsUrl}/${connection}/${type}`;
-  const url = `${baseUrl}?${getParameters({type, source, geoColumn, columns, schema, clientId})}`;
+  const url = `${baseUrl}?${getParameters({
+    type,
+    source,
+    geoColumn,
+    columns,
+    clientId,
+    aggregationExp,
+    aggregationResLevel
+  })}`;
   const {accessToken} = credentials;
 
   if (url.length > MAX_GET_LENGTH && type === MAP_TYPES.QUERY) {
@@ -187,7 +201,11 @@ function checkFetchLayerDataParameters({
   type,
   source,
   connection,
-  credentials
+  credentials,
+  geoColumn,
+  columns,
+  aggregationExp,
+  aggregationResLevel
 }: FetchLayerDataParams) {
   assert(connection, 'Must define connection');
   assert(type, 'Must define a type');
@@ -196,12 +214,35 @@ function checkFetchLayerDataParameters({
   assert(credentials.apiVersion === API_VERSIONS.V3, 'Method only available for v3');
   assert(credentials.apiBaseUrl, 'Must define apiBaseUrl');
   assert(credentials.accessToken, 'Must define an accessToken');
+
+  if (columns) {
+    assert(
+      COLUMNS_SUPPORT.includes(type),
+      `The columns parameter is not supported by type ${type}`
+    );
+  }
+  if (geoColumn) {
+    assert(
+      GEO_COLUMN_SUPPORT.includes(type),
+      `The geoColumn parameter is not supported by type ${type}`
+    );
+  } else {
+    assert(!aggregationExp, 'Have aggregationExp, but geoColumn parameter is missing');
+    assert(!aggregationResLevel, 'Have aggregationResLevel, but geoColumn parameter is missing');
+  }
+
+  if (!aggregationExp) {
+    assert(
+      !aggregationResLevel,
+      'Have aggregationResLevel, but aggregationExp parameter is missing'
+    );
+  }
 }
 
 export interface FetchLayerDataResult {
   data: any;
-  format: Format;
-  schema?: SchemaField[];
+  format?: Format;
+  schema: SchemaField[];
 }
 export async function fetchLayerData({
   type,
@@ -212,8 +253,9 @@ export async function fetchLayerData({
   columns,
   format,
   formatTiles,
-  schema,
-  clientId
+  clientId,
+  aggregationExp,
+  aggregationResLevel
 }: FetchLayerDataParams): Promise<FetchLayerDataResult> {
   // Internally we split data fetching into two parts to allow us to
   // conditionally fetch the actual data, depending on the metadata state
@@ -226,16 +268,13 @@ export async function fetchLayerData({
     columns,
     format,
     formatTiles,
-    schema,
-    clientId
+    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;
 }
 
@@ -248,8 +287,9 @@ async function _fetchDataUrl({
   columns,
   format,
   formatTiles,
-  schema,
-  clientId
+  clientId,
+  aggregationExp,
+  aggregationResLevel
 }: FetchLayerDataParams) {
   const defaultCredentials = getDefaultCredentials();
   // Only pick up default credentials if they have been defined for
@@ -258,7 +298,16 @@ async function _fetchDataUrl({
     ...(defaultCredentials.apiVersion === API_VERSIONS.V3 && defaultCredentials),
     ...credentials
   };
-  checkFetchLayerDataParameters({type, source, connection, credentials: localCreds});
+  checkFetchLayerDataParameters({
+    type,
+    source,
+    connection,
+    credentials: localCreds,
+    geoColumn,
+    columns,
+    aggregationExp,
+    aggregationResLevel
+  });
 
   if (!localCreds.mapsUrl) {
     localCreds.mapsUrl = buildMapsUrlFromBase(localCreds.apiBaseUrl);
@@ -271,8 +320,9 @@ async function _fetchDataUrl({
     credentials: localCreds,
     geoColumn,
     columns,
-    schema,
-    clientId
+    clientId,
+    aggregationExp,
+    aggregationResLevel
   });
   let url: string | null = null;
   let mapFormat: Format | undefined;
@@ -325,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';