CARTO: parseMap support for HeatmapTileLayer (#9196)

visgl · Oct 2, 2024 · 0342802 · 0342802
1 parent 2e9d6dc
commit 0342802
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 9 deletions.
diff --git a/modules/carto/src/api/layer-map.ts b/modules/carto/src/api/layer-map.ts
@@ -140,6 +140,13 @@ const customMarkersPropsMap = {
   }
 };
 
+const heatmapTilePropsMap = {
+  visConfig: {
+    colorRange: x => ({colorRange: x.colors.map(hexToRGBA)}),
+    radius: 'radiusPixels'
+  }
+};
+
 const aggregationVisConfig = {
   colorAggregation: x => ({colorAggregation: AGGREGATION[x] || AGGREGATION.sum}),
   colorRange: x => ({colorRange: x.colors.map(hexToRGBA)}),
@@ -168,7 +175,10 @@ export function getLayer(
   let basePropMap: any = sharedPropMap;
 
   if (config.visConfig?.customMarkers) {
-    basePropMap = mergePropMaps(sharedPropMap, customMarkersPropsMap);
+    basePropMap = mergePropMaps(basePropMap, customMarkersPropsMap);
+  }
+  if (type === 'heatmapTile') {
+    basePropMap = mergePropMaps(basePropMap, heatmapTilePropsMap);
   }
   if (TILE_LAYER_TYPE_TO_LAYER[type]) {
     return getTileLayer(dataset, basePropMap, type);

diff --git a/modules/carto/src/api/parse-map.ts b/modules/carto/src/api/parse-map.ts
@@ -172,7 +172,8 @@ function createChannelProps(
     sizeField,
     sizeScale,
     strokeColorField,
-    strokeColorScale
+    strokeColorScale,
+    weightField
   } = visualChannels;
   let {heightField, heightScale} = visualChannels;
   if (type === 'hexagonId') {
@@ -246,7 +247,6 @@ function createChannelProps(
       data
     );
   }
-
   if (heightField && visConfig.enable3d) {
     result.getElevation = getSizeAccessor(
       heightField,
@@ -258,6 +258,16 @@ function createChannelProps(
     );
   }
 
+  if (weightField) {
+    result.getWeight = getSizeAccessor(
+      weightField,
+      undefined,
+      visConfig.weightAggregation,
+      undefined,
+      data
+    );
+  }
+
   if (visConfig.customMarkers) {
     const maxIconSize = getMaxMarkerSize(visConfig, visualChannels);
     const {getPointRadius, getFillColor} = result;

diff --git a/modules/carto/src/api/types.ts b/modules/carto/src/api/types.ts
@@ -106,6 +106,8 @@ export type VisualChannels = {
 
   heightField?: VisualChannelField;
   heightScale?: SCALE_TYPE;
+
+  weightField?: VisualChannelField;
 };
 
 export type ColorRange = {
@@ -148,6 +150,8 @@ export type VisConfig = {
 
   heightRange?: any;
   heightAggregation?: any;
+
+  weightAggregation?: any;
 };
 
 export type TextLabel = {

diff --git a/test/modules/carto/api/parse-map.spec.ts b/test/modules/carto/api/parse-map.spec.ts
@@ -1929,7 +1929,7 @@ test(`parseMap#visState HeatmapTileLayer`, async t => {
               ],
               visConfig: {
                 filled: true,
-                radius: 2,
+                radius: 17.3,
                 opacity: 0.8,
                 stroked: false,
                 enable3d: false,
@@ -1939,7 +1939,7 @@ test(`parseMap#visState HeatmapTileLayer`, async t => {
                 colorRange: {
                   name: 'Global Warming',
                   type: 'sequential',
-                  colors: ['#5A1846', '#900C3F', '#C70039', '#E3611C', '#F1920E', '#FFC300'],
+                  colors: ['#ff0000', '#00ff00', '#0000ff', '#fc8d59', '#e34a33', '#b30000'],
                   category: 'Uber'
                 },
                 heightRange: [0, 500],
@@ -1968,7 +1968,8 @@ test(`parseMap#visState HeatmapTileLayer`, async t => {
               radiusField: null,
               radiusScale: 'linear',
               strokeColorField: null,
-              strokeColorScale: 'quantile'
+              strokeColorScale: 'quantile',
+              weightField: {name: 'ride_count', type: 'integer'}
             }
           }
         ],
@@ -2015,11 +2016,20 @@ test(`parseMap#visState HeatmapTileLayer`, async t => {
   t.equal(heatmapTileLayer.props.visible, true, 'heatmapTileLayer - visible');
   t.equal(heatmapTileLayer.props.filled, true, 'heatmapTileLayer - filled');
   t.equal(heatmapTileLayer.props.stroked, false, 'heatmapTileLayer - stroked');
+  t.equal(heatmapTileLayer.props.radiusPixels, 17.3, 'heatmapTileLayer - radiusPixels');
   t.deepEqual(
-    heatmapTileLayer.props.getFillColor,
-    [246, 209, 138, 230],
-    'heatmapTileLayer - getFillColor'
+    heatmapTileLayer.props.colorRange,
+    [
+      [255, 0, 0, 255],
+      [0, 255, 0, 255],
+      [0, 0, 255, 255],
+      [252, 141, 89, 255],
+      [227, 74, 51, 255],
+      [179, 0, 0, 255]
+    ],
+    'heatmapTileLayer - colorRange'
   );
+  t.equal(typeof heatmapTileLayer.props.getWeight, 'function', 'heatmapTileLayer - getWeight');
   t.equal((heatmapTileLayer.props as any).cartoLabel, 'Layer 2', 'heatmapTileLayer - cartoLabel');
   t.end();
 });