@deck.gl/carto 8.7.0 → 8.7.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.0",
+  "version": "8.7.3",
   "publishConfig": {
     "access": "public"
   },
@@ -56,5 +56,5 @@
     "@deck.gl/layers": "^8.0.0",
     "@loaders.gl/core": "^3.1.5"
   },
-  "gitHead": "69cc7100ab41c1f074468ea80c1ca8472d4a6146"
+  "gitHead": "72504c7acaeaf6862fb85acfa8ea3369d1a6875f"
 }

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

@@ -10,7 +10,9 @@ import {
   MapInstantiation,
   MapType,
   MAP_TYPES,
-  SchemaField
+  SchemaField,
+  TileFormat,
+  TILE_FORMATS
 } from './maps-api-common';
 import {parseMap} from './parseMap';
 import {log} from '@deck.gl/core';
@@ -111,6 +113,7 @@ type FetchLayerDataParams = {
   schema?: boolean;
   clientId?: string;
   format?: Format;
+  formatTiles?: TileFormat;
 };
 
 /**
@@ -208,6 +211,7 @@ export async function fetchLayerData({
   geoColumn,
   columns,
   format,
+  formatTiles,
   schema,
   clientId
 }: FetchLayerDataParams): Promise<FetchLayerDataResult> {
@@ -221,6 +225,7 @@ export async function fetchLayerData({
     geoColumn,
     columns,
     format,
+    formatTiles,
     schema,
     clientId
   });
@@ -242,6 +247,7 @@ async function _fetchDataUrl({
   geoColumn,
   columns,
   format,
+  formatTiles,
   schema,
   clientId
 }: FetchLayerDataParams) {
@@ -288,6 +294,14 @@ async function _fetchDataUrl({
     assert(url && mapFormat, 'Unsupported data formats received from backend.');
   }
 
+  if (format === FORMATS.TILEJSON && formatTiles) {
+    log.assert(
+      Object.values(TILE_FORMATS).includes(formatTiles),
+      `Invalid value for formatTiles: ${formatTiles}. Use value from TILE_FORMATS`
+    );
+    url += `&${encodeParameter('formatTiles', formatTiles)}`;
+  }
+
   const {accessToken} = localCreds;
   return {url, accessToken, mapFormat, metadata};
 }
@@ -324,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;

package/src/layers/carto-layer.js

@@ -92,8 +92,10 @@ export default class CartoLayer extends CompositeLayer {
       changeFlags.dataChanged ||
       props.connection !== oldProps.connection ||
       props.geoColumn !== oldProps.geoColumn ||
-      JSON.stringify(props.columns) !== JSON.stringify(oldProps.columns) ||
+      props.format !== oldProps.format ||
+      props.formatTiles !== oldProps.formatTiles ||
       props.type !== oldProps.type ||
+      JSON.stringify(props.columns) !== JSON.stringify(oldProps.columns) ||
       JSON.stringify(props.credentials) !== JSON.stringify(oldProps.credentials);
 
     if (shouldUpdateData) {
@@ -139,10 +141,10 @@ export default class CartoLayer extends CompositeLayer {
 
     if (format === FORMATS.TILEJSON) {
       /* global URL */
+      const tileUrl = new URL(data.tiles[0]);
+
       props.formatTiles =
-        props.formatTiles ||
-        new URL(data.tiles[0]).searchParams.get('formatTiles') ||
-        TILE_FORMATS.MVT;
+        props.formatTiles || tileUrl.searchParams.get('formatTiles') || TILE_FORMATS.MVT;
 
       return props.formatTiles === TILE_FORMATS.MVT ? [MVTLayer, props] : [CartoTileLayer, props];
     }

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

@@ -48,6 +48,8 @@ function parseCartoTile(arrayBuffer, options) {
   return data;
 }
 
+const defaultTileFormat = TILE_FORMATS.BINARY;
+
 const CartoTileLoader = {
   name: 'CARTO Tile',
   id: 'cartoTile',
@@ -60,15 +62,20 @@ const CartoTileLoader = {
   parseSync: parseCartoTile,
   options: {
     cartoTile: {
-      // TODO change to BINARY for 8.7 prod release
-      formatTiles: TILE_FORMATS.BINARY
+      formatTiles: defaultTileFormat
     }
   }
 };
 
+const defaultProps = {
+  ...MVTLayer.defaultProps,
+  formatTiles: defaultTileFormat,
+  loaders: [CartoTileLoader]
+};
+
 export default class CartoTileLayer extends MVTLayer {
   getTileData(tile) {
-    let url = _getURLFromTemplate(this.state.data, tile);
+    const url = _getURLFromTemplate(this.state.data, tile);
     if (!url) {
       return Promise.reject('Invalid URL');
     }
@@ -87,10 +94,6 @@ export default class CartoTileLayer extends MVTLayer {
         Object.values(TILE_FORMATS).includes(formatTiles),
         `Invalid value for formatTiles: ${formatTiles}. Use value from TILE_FORMATS`
       );
-      // eslint-disable-next-line no-undef
-      const newUrl = new URL(url);
-      newUrl.searchParams.set('formatTiles', formatTiles);
-      url = newUrl.toString();
       loadOptions.cartoTile = {formatTiles};
     }
 
@@ -118,4 +121,4 @@ export default class CartoTileLayer extends MVTLayer {
 }
 
 CartoTileLayer.layerName = 'CartoTileLayer';
-CartoTileLayer.defaultProps = {...MVTLayer.defaultProps, loaders: [CartoTileLoader]};
+CartoTileLayer.defaultProps = defaultProps;