@deck.gl/carto 8.7.1 → 8.7.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.1",
+  "version": "8.7.4",
   "publishConfig": {
     "access": "public"
   },
@@ -56,5 +56,5 @@
     "@deck.gl/layers": "^8.0.0",
     "@loaders.gl/core": "^3.1.5"
   },
-  "gitHead": "8a2f488c640bbf80982c684e7fd741982afe1d81"
+  "gitHead": "eb545b0af1760f83d8225ef8282aca66754fd0b7"
 }

package/src/api/layer-map.ts

@@ -11,8 +11,11 @@ import {
 } from 'd3-scale';
 import {format as d3Format} from 'd3-format';
 import moment from 'moment-timezone';
-import {H3HexagonLayer, MVTLayer} from '@deck.gl/geo-layers';
+
+import {CPUGridLayer, HeatmapLayer, HexagonLayer} from '@deck.gl/aggregation-layers';
 import {GeoJsonLayer} from '@deck.gl/layers';
+import {H3HexagonLayer, MVTLayer} from '@deck.gl/geo-layers';
+
 import CartoTileLayer from '../layers/carto-tile-layer';
 import {TILE_FORMATS} from './maps-api-common';
 import {assert} from '../utils';
@@ -28,6 +31,11 @@ const SCALE_FUNCS = {
 };
 export type SCALE_TYPE = keyof typeof SCALE_FUNCS;
 
+const hexToRGBA = c => {
+  const {r, g, b, opacity} = rgb(c);
+  return [r, g, b, 255 * opacity];
+};
+
 // Kepler -> Deck.gl
 const sharedPropMap = {
   color: 'getFillColor',
@@ -41,6 +49,7 @@ const sharedPropMap = {
   },
   visConfig: {
     enable3d: 'extruded',
+    elevationScale: 'elevationScale',
     filled: 'filled',
     opacity: 'opacity',
     strokeColor: 'getLineColor',
@@ -51,6 +60,14 @@ const sharedPropMap = {
   }
 };
 
+const aggregationVisConfig = {
+  colorAggregation: 'colorAggregation',
+  colorRange: x => ({colorRange: x.colors.map(hexToRGBA)}),
+  coverage: 'coverage',
+  elevationPercentile: ['elevationLowerPercentile', 'elevationUpperPercentile'],
+  percentile: ['lowerPercentile', 'upperPercentile']
+};
+
 const RADIUS_DOWNSCALE = 0.2;
 
 const defaultProps = {
@@ -62,7 +79,7 @@ const defaultProps = {
   wrapLongitude: false
 };
 
-function mergePropMaps(a, b) {
+function mergePropMaps(a = {}, b = {}) {
   return {...a, ...b, visConfig: {...a.visConfig, ...b.visConfig}};
 }
 
@@ -75,30 +92,44 @@ export function getLayer(
     return getTileLayer(dataset);
   }
 
+  const geoColumn = dataset?.geoColumn;
+  const getPosition = d => d[geoColumn].coordinates;
+
   const hexagonId = config.columns?.hex_id;
   const layer = {
     point: {
       Layer: GeoJsonLayer,
-      propMap: mergePropMaps(sharedPropMap, {
-        visConfig: {outline: 'stroked'}
-      }),
-      defaultProps
+      propMap: {visConfig: {outline: 'stroked'}}
     },
     geojson: {
       Layer: GeoJsonLayer,
-      propMap: sharedPropMap,
-      defaultProps: {...defaultProps, lineWidthScale: 2}
+      defaultProps: {lineWidthScale: 2}
+    },
+    grid: {
+      Layer: CPUGridLayer,
+      propMap: {visConfig: {...aggregationVisConfig, worldUnitSize: x => ({cellSize: 1000 * x})}},
+      defaultProps: {getPosition}
+    },
+    heatmap: {
+      Layer: HeatmapLayer,
+      propMap: {visConfig: {...aggregationVisConfig, radius: 'radiusPixels'}},
+      defaultProps: {getPosition}
+    },
+    hexagon: {
+      Layer: HexagonLayer,
+      propMap: {visConfig: {...aggregationVisConfig, worldUnitSize: x => ({radius: 1000 * x})}},
+      defaultProps: {getPosition}
     },
     hexagonId: {
       Layer: H3HexagonLayer,
-      propMap: mergePropMaps(sharedPropMap, {
-        visConfig: {coverage: 'coverage', elevationScale: 'elevationScale'}
-      }),
-      defaultProps: {...defaultProps, getHexagon: d => d[hexagonId]}
+      propMap: {visConfig: {coverage: 'coverage'}},
+      defaultProps: {getHexagon: d => d[hexagonId]}
     }
   }[type];
 
   assert(layer, `Unsupported layer type: ${type}`);
+  layer.propMap = mergePropMaps(sharedPropMap, layer.propMap);
+  layer.defaultProps = {...defaultProps, ...layer.defaultProps};
   return layer;
 }
 
@@ -189,8 +220,8 @@ export function getColorAccessor(
   const alpha = opacity !== undefined ? Math.round(255 * Math.pow(opacity, 1 / 2.2)) : 255;
 
   const accessor = properties => {
-    const rgba = rgb(scale(properties[name]));
-    return [rgba.r, rgba.g, rgba.b, alpha];
+    const {r, g, b} = rgb(scale(properties[name]));
+    return [r, g, b, alpha];
   };
   return normalizeAccessor(accessor, data);
 }

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

@@ -338,16 +338,17 @@ async function _fetchMapDataset(
   credentials: CloudNativeCredentials,
   clientId?: string
 ) {
-  const {connectionName: connection, columns, geoColumn, source, type} = dataset;
+  const {connectionName: connection, columns, format, geoColumn, source, type} = dataset;
   // First fetch metadata
   const {url, mapFormat} = await _fetchDataUrl({
+    clientId,
     credentials: {...credentials, accessToken},
     connection,
     columns,
+    format,
     geoColumn,
     source,
-    type,
-    clientId
+    type
   });
 
   // Extract the last time the data changed

package/src/api/parseMap.ts

@@ -114,8 +114,11 @@ function mapProps(source, target, mapping) {
     }
     if (typeof targetKey === 'string') {
       target[targetKey] = sourceValue;
+    } else if (typeof targetKey === 'function') {
+      const [key, value] = Object.entries(targetKey(sourceValue))[0];
+      target[key] = value;
     } else if (typeof targetKey === 'object') {
-      // Nested definition, recurse down one level
+      // Nested definition, recurse down one level (also handles arrays)
       mapProps(sourceValue, target, targetKey);
     }
   }
@@ -148,6 +151,8 @@ function createChannelProps(visualChannels, type, config, data) {
       1, // Rely on layer opacity
       data
     );
+  } else if (type === 'grid' || type === 'hexagon') {
+    result.colorScaleType = colorScale;
   }
   if (strokeColorField) {
     const opacity = visConfig.strokeOpacity !== undefined ? visConfig.strokeOpacity : 1;