feat: upgrade heatmap layer from mapbox to deckgl (#3372)

* feat: upgrade heatmap layer from mapbox to deckgl

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

* fixes to shader logic

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

* fix for noneLayerDataAffectingProps

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

* remove _unfiltered from layer props

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

---------

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

Author: igorDykhta

src/components/src/side-panel/layer-panel/layer-configurator.tsx

@@ -319,6 +319,13 @@ export default function LayerConfiguratorFactory(
     }
 
     _renderHeatmapLayerConfig({layer, visConfiguratorProps, layerChannelConfigProps}) {
+      const {visConfig} = layer.config;
+      const aggregationOptions = (layer.visConfigSettings.aggregation?.options || []).map(key => ({
+        id: key,
+        label: key.charAt(0) + key.slice(1).toLowerCase()
+      }));
+      const selectedAggregation = aggregationOptions.find(({id}) => id === visConfig.aggregation);
+
       return (
         <StyledLayerVisualConfigurator>
           {/* Color */}
@@ -336,13 +343,35 @@ export default function LayerConfiguratorFactory(
               label={false}
             />
           </LayerConfigGroup>
+          {/* Intensity & Threshold */}
+          <LayerConfigGroup label={'layer.heatmap'}>
+            <VisConfigSlider {...layer.visConfigSettings.intensity} {...visConfiguratorProps} />
+            <VisConfigSlider {...layer.visConfigSettings.threshold} {...visConfiguratorProps} />
+          </LayerConfigGroup>
           {/* Weight */}
           <LayerConfigGroup label={'layer.weight'}>
             <ChannelByValueSelector
               channel={layer.visualChannels.weight}
               {...layerChannelConfigProps}
             />
           </LayerConfigGroup>
+          {/* Aggregation */}
+          <LayerConfigGroup label={'layer.aggregation'}>
+            <SidePanelSection>
+              <PanelLabel>
+                <FormattedMessage id={'layerVisConfigs.weightAggregation'} />
+              </PanelLabel>
+              <ItemSelector
+                selectedItems={selectedAggregation}
+                options={aggregationOptions}
+                displayOption="label"
+                getOptionValue="id"
+                multiSelect={false}
+                searchable={false}
+                onChange={value => visConfiguratorProps.onChange({aggregation: value})}
+              />
+            </SidePanelSection>
+          </LayerConfigGroup>
         </StyledLayerVisualConfigurator>
       );
     }

src/deckgl-layers/src/layer-utils/shader-utils.ts

@@ -22,3 +22,18 @@ export function editShader(vs: string, type: string, originalText: string, testT
 
   return vs.replace(originalText, testToReplace);
 }
+
+export function insertBefore(
+  vs: string,
+  type: string,
+  insertBeforeText: string,
+  textToInsert: string
+) {
+  const at = vs.indexOf(insertBeforeText);
+  if (at < 0) {
+    Console.error(`Cannot edit ${type} layer shader`);
+    return vs;
+  }
+
+  return vs.slice(0, at) + textToInsert + vs.slice(at);
+}

src/layers/package.json

@@ -31,6 +31,7 @@
   ],
   "dependencies": {
     "@deck.gl-community/editable-layers": "9.2.8",
+    "@deck.gl/aggregation-layers": "^9.2.11",
     "@deck.gl/core": "^9.2.11",
     "@deck.gl/extensions": "^9.2.11",
     "@deck.gl/geo-layers": "^9.2.11",

src/layers/src/heatmap-layer/deck-heatmap-layer.ts

@@ -0,0 +1,55 @@
+// SPDX-License-Identifier: MIT
+// Copyright contributors to the kepler.gl project
+
+import {HeatmapLayer as DeckGLHeatmapLayer} from '@deck.gl/aggregation-layers';
+import {editShader, insertBefore} from '@kepler.gl/deckgl-layers';
+
+/**
+ * Custom deck.gl HeatmapLayer subclass that patches GPU shaders
+ * to match the visual appearance of the previous Mapbox GL heatmap layer.
+ *
+ * These patches ensure that existing saved maps render identically after
+ * the migration from Mapbox heatmap to deck.gl heatmap.
+ *
+ * Two shader patches are applied:
+ *
+ * 1. Weights fragment shader (kernel):
+ *    - Divides Gaussian kernel output by 8.5 and clips small values
+ *      to remove visible hard edges at the radius boundary.
+ *    - Changes the distance input from `2. * dist` to `dist` to
+ *      correctly map the kernel falloff to the configured radius.
+ *
+ * 2. Max-weights fragment shader:
+ *    - Forces the red channel to 1.0, because Mapbox assumes
+ *      a max weight of 1.0 when sampling the color ramp.
+ */
+export default class KeplerHeatmapLayer extends DeckGLHeatmapLayer {
+  getShaders(shaders: any) {
+    const result = super.getShaders(shaders);
+
+    if (result.fs?.includes('gaussianKDE')) {
+      // Weights fragment shader: adjust kernel to match Mapbox heatmap layer
+      let fs = editShader(
+        result.fs,
+        'fs',
+        'return pow(2.71828, -u*u/0.05555)/(1.77245385*0.166666);',
+        `float value = pow(2.71828, -u*u/0.05555)/(1.77245385*0.166666) / 8.5;
+          return max(value - 0.00443, 0.0);`
+      );
+      fs = editShader(fs, 'fs', '2. * dist', 'dist');
+      result.fs = fs;
+    } else if (result.fs?.includes('outTexture.r / max(1.0, outTexture.a)')) {
+      // Max-weights fragment shader: force max value to 1.0
+      result.fs = insertBefore(
+        result.fs,
+        'fs',
+        'fragColor.g = outTexture.r / max(1.0, outTexture.a);',
+        'fragColor.r = 1.0;\n  '
+      );
+    }
+
+    return result;
+  }
+}
+
+KeplerHeatmapLayer.layerName = 'HeatmapLayer';