fix aggregation layers - hightlight outlines

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

Author: igorDykhta

src/deckgl-layers/src/grid-layer/enhanced-cpu-grid-layer.ts

@@ -7,12 +7,40 @@ import {GridLayer} from '@deck.gl/aggregation-layers';
  * In deck.gl 9, GridLayer natively supports CPU aggregation via gpuAggregation: false,
  * custom getColorValue/getElevationValue accessors, percentile filtering, and scale types.
  * The custom CPUAggregator override from deck.gl 8 is no longer needed.
+ *
+ * We override getPickingInfo to add `cellOutline` — an array of [lng, lat] coordinates
+ * computed in common space so the outline aligns with rendered cells at all latitudes.
  */
 export default class ScaleEnhancedGridLayer extends GridLayer<any> {
   static defaultProps = {
     ...GridLayer.defaultProps,
     gpuAggregation: false
   };
+
+  getPickingInfo(params: any) {
+    const info = super.getPickingInfo(params);
+    if (info.object) {
+      const {cellOriginCommon, cellSizeCommon, aggregatorViewport} = this.state as any;
+      const coverage = this.props.coverage ?? 1;
+      if (cellOriginCommon && cellSizeCommon && aggregatorViewport) {
+        const {col, row} = info.object;
+        // Cell center in common space
+        const cx = (col + 0.5) * cellSizeCommon[0] + cellOriginCommon[0];
+        const cy = (row + 0.5) * cellSizeCommon[1] + cellOriginCommon[1];
+        const hw = 0.5 * coverage * cellSizeCommon[0]; // half-width
+        const hh = 0.5 * coverage * cellSizeCommon[1]; // half-height
+
+        info.object.cellOutline = [
+          aggregatorViewport.unprojectFlat([cx - hw, cy - hh]),
+          aggregatorViewport.unprojectFlat([cx + hw, cy - hh]),
+          aggregatorViewport.unprojectFlat([cx + hw, cy + hh]),
+          aggregatorViewport.unprojectFlat([cx - hw, cy + hh]),
+          aggregatorViewport.unprojectFlat([cx - hw, cy - hh])
+        ];
+      }
+    }
+    return info;
+  }
 }
 
 ScaleEnhancedGridLayer.layerName = 'ScaleEnhancedGridLayer';

src/deckgl-layers/src/hexagon-layer/enhanced-hexagon-layer.ts

@@ -3,16 +3,57 @@
 
 import {HexagonLayer} from '@deck.gl/aggregation-layers';
 
+const THIRD_PI = Math.PI / 3;
+const HexbinVertices = Array.from({length: 6}, (_, i) => {
+  const angle = i * THIRD_PI;
+  return [Math.sin(angle), -Math.cos(angle)];
+});
+
+function getHexbinCentroid(id: [number, number], radius: number): [number, number] {
+  const DIST_X = 2 * Math.sin(THIRD_PI);
+  const DIST_Y = 1.5;
+  return [(id[0] + (id[1] & 1) / 2) * radius * DIST_X, id[1] * radius * DIST_Y];
+}
+
 /**
  * In deck.gl 9, HexagonLayer natively supports CPU aggregation via gpuAggregation: false,
  * custom getColorValue/getElevationValue accessors, percentile filtering, and scale types.
- * The custom CPUAggregator override from deck.gl 8 is no longer needed.
+ *
+ * We override getPickingInfo to add `cellOutline` — an array of [lng, lat] coordinates
+ * computed in common space so the outline aligns with rendered cells at all latitudes.
  */
 export default class ScaleEnhancedHexagonLayer extends HexagonLayer<any> {
   static defaultProps = {
     ...HexagonLayer.defaultProps,
     gpuAggregation: false
   };
+
+  getPickingInfo(params: any) {
+    const info = super.getPickingInfo(params);
+    if (info.object) {
+      const {radiusCommon, hexOriginCommon, aggregatorViewport} = this.state as any;
+      const coverage = this.props.coverage ?? 1;
+      if (radiusCommon && aggregatorViewport) {
+        const centroid = getHexbinCentroid(
+          [info.object.col, info.object.row],
+          radiusCommon
+        );
+        const ox = hexOriginCommon?.[0] ?? 0;
+        const oy = hexOriginCommon?.[1] ?? 0;
+        const r = radiusCommon * coverage;
+
+        const outline: number[][] = [];
+        for (let i = 0; i < 6; i++) {
+          const vx = centroid[0] + r * HexbinVertices[i][0] + ox;
+          const vy = centroid[1] + r * HexbinVertices[i][1] + oy;
+          outline.push(aggregatorViewport.unprojectFlat([vx, vy]));
+        }
+        outline.push(outline[0]);
+        info.object.cellOutline = outline;
+      }
+    }
+    return info;
+  }
 }
 
 ScaleEnhancedHexagonLayer.layerName = 'ScaleEnhancedHexagonLayer';

src/layers/src/aggregation-layer.ts

@@ -365,7 +365,7 @@ export default class AggregationLayer extends Layer {
       highlightColor: HIGHLIGH_COLOR_3D,
       // gpu data filtering is not supported in aggregation layer
       extensions: [],
-      autoHighlight: true
+      autoHighlight: this.config.visConfig.enable3d
     };
   }
 

src/layers/src/grid-layer/grid-layer.ts

@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
+import {GeoJsonLayer} from '@deck.gl/layers';
 import {EnhancedGridLayer} from '@kepler.gl/deckgl-layers';
 import AggregationLayer, {AggregationLayerConfig} from '../aggregation-layer';
 import GridLayerIcon from './grid-layer-icon';
@@ -97,19 +98,46 @@ export default class GridLayer extends AggregationLayer {
   }
 
   renderLayer(opts) {
-    const {data} = opts;
+    const {data, objectHovered, mapState} = opts;
 
     const defaultAggregationLayerProps = this.getDefaultAggregationLayerProp(opts);
+    const zoomFactor = this.getZoomFactor(mapState);
     const {visConfig} = this.config;
     const cellSize = visConfig.worldUnitSize * 1000;
+    const hoveredObject = this.hasHoveredObject(objectHovered);
+
+    // Use cellOutline computed in common space by ScaleEnhancedGridLayer.getPickingInfo
+    // so the outline aligns with rendered cells at all latitudes.
+    const outlineCoords = hoveredObject?.cellOutline;
 
     return [
       new EnhancedGridLayer({
         ...defaultAggregationLayerProps,
         ...data,
         wrapLongitude: false,
         cellSize
-      })
+      }),
+
+      // render an outline of each cell if not extruded
+      ...(outlineCoords && !visConfig.enable3d
+        ? [
+            new GeoJsonLayer({
+              ...this.getDefaultHoverLayerProps(),
+              visible: defaultAggregationLayerProps.visible,
+              wrapLongitude: false,
+              data: [
+                {
+                  geometry: {
+                    coordinates: outlineCoords,
+                    type: 'LineString'
+                  }
+                }
+              ],
+              getLineColor: this.config.highlightColor,
+              lineWidthScale: 8 * zoomFactor
+            })
+          ]
+        : [])
     ];
   }
 }

src/layers/src/hexagon-layer/hexagon-layer.ts

@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
+import {GeoJsonLayer} from '@deck.gl/layers';
 import AggregationLayer, {AggregationLayerConfig} from '../aggregation-layer';
 import {EnhancedHexagonLayer} from '@kepler.gl/deckgl-layers';
 import HexagonLayerIcon from './hexagon-layer-icon';
@@ -105,19 +106,46 @@ export default class HexagonLayer extends AggregationLayer {
   }
 
   renderLayer(opts) {
-    const {data} = opts;
+    const {data, objectHovered, mapState} = opts;
 
     const defaultAggregationLayerProps = this.getDefaultAggregationLayerProp(opts);
+    const zoomFactor = this.getZoomFactor(mapState);
     const {visConfig} = this.config;
     const radius = visConfig.worldUnitSize * 1000;
+    const hoveredObject = this.hasHoveredObject(objectHovered);
+
+    // Use cellOutline computed in common space by ScaleEnhancedHexagonLayer.getPickingInfo
+    // so the outline aligns with rendered cells at all latitudes.
+    const outlineCoords = hoveredObject?.cellOutline;
 
     return [
       new EnhancedHexagonLayer({
         ...defaultAggregationLayerProps,
         ...data,
         wrapLongitude: false,
         radius
-      })
+      }),
+
+      // render an outline of each hexagon if not extruded
+      ...(outlineCoords && !visConfig.enable3d
+        ? [
+            new GeoJsonLayer({
+              ...this.getDefaultHoverLayerProps(),
+              visible: defaultAggregationLayerProps.visible,
+              wrapLongitude: false,
+              data: [
+                {
+                  geometry: {
+                    coordinates: outlineCoords,
+                    type: 'LineString'
+                  }
+                }
+              ],
+              getLineColor: this.config.highlightColor,
+              lineWidthScale: 8 * zoomFactor
+            })
+          ]
+        : [])
     ];
   }
 }

src/layers/src/hexagon-layer/hexagon-utils.ts

@@ -7,8 +7,9 @@ import type {Centroid} from '@kepler.gl/common-utils';
 
 export function hexagonToPolygonGeo(object, properties, radius, mapState, coordinate?) {
   const viewport = new WebMercatorViewport(mapState);
-  const position = object.position || coordinate;
-  if (!Array.isArray(position)) {
+  const pos = object.position || coordinate;
+  const position = pos ? Array.from(pos) : null;
+  if (!position || position.length < 2) {
     return null;
   }