fix: trigger a redraw from icon layer once the icons are loaded. (#3269)

* fix: trigger redraw from layer

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

* rename

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

* optimize

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

* ts

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

* ts

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

* ts

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

---------

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

Author: igorDykhta

src/components/src/map-container.tsx

@@ -525,6 +525,12 @@ export default function MapContainerFactory(
       } as Partial<LayerBaseConfig>);
     };
 
+    _onRedrawNeeded = (_idx: number) => {
+      // updateMapUpdater always returns a new state object reference, which triggers re-render
+      const {mapStateActions, index} = this.props;
+      mapStateActions.updateMap({}, index);
+    };
+
     _onLayerFilteredItemsChange = (idx, event) => {
       this.props.visStateActions.layerFilteredItemsChange(this.props.visState.layers[idx], event);
     };
@@ -841,7 +847,8 @@ export default function MapContainerFactory(
           onLayerHover: this._onLayerHover,
           onSetLayerDomain: this._onLayerSetDomain,
           onFilteredItemsChange: this._onLayerFilteredItemsChange,
-          onWMSFeatureInfo: this._onWMSFeatureInfo
+          onWMSFeatureInfo: this._onWMSFeatureInfo,
+          onRedrawNeeded: this._onRedrawNeeded
         },
         deckGlProps
       );

src/layers/src/icon-layer/icon-layer.ts

@@ -22,7 +22,8 @@ import {
   VisConfigNumber,
   VisConfigRange,
   Merge,
-  LayerColumn
+  LayerColumn,
+  BindedLayerCallbacks
 } from '@kepler.gl/types';
 
 export type IconLayerColumnsConfig = {
@@ -113,6 +114,8 @@ export default class IconLayer extends Layer {
   iconGeometry: IconGeometry;
   iconGeometryVersion: number;
 
+  onRedrawNeeded: BindedLayerCallbacks['onRedrawNeeded'];
+
   declare visConfigSettings: IconLayerVisConfigSettings;
   declare config: IconLayerConfig;
 
@@ -246,6 +249,9 @@ export default class IconLayer extends Layer {
     this.iconGeometryVersion += 1;
 
     this._layerInfoModal = IconInfoModalFactory(svgIcons);
+
+    // Trigger a map redraw so deck.gl picks up the new geometry
+    this.onRedrawNeeded?.();
   }
 
   static findDefaultLayerProps({
@@ -361,7 +367,10 @@ export default class IconLayer extends Layer {
   }
 
   renderLayer(opts) {
-    const {data, gpuFilter, objectHovered, mapState, interactionConfig} = opts;
+    const {data, gpuFilter, objectHovered, mapState, interactionConfig, layerCallbacks} = opts;
+
+    // Store callback to trigger map redraw when icon geometry loads asynchronously
+    this.onRedrawNeeded = layerCallbacks?.onRedrawNeeded;
 
     const radiusScale = this.getRadiusScaleByZoom(mapState);
 

src/types/layers.d.ts

@@ -426,6 +426,7 @@ export type LayerCallbacks = {
       coordinate?: [number, number] | null;
     }
   ) => void;
+  onRedrawNeeded?: (idx: number) => void;
 };
 
 export type BindedLayerCallbacks = {
@@ -436,6 +437,7 @@ export type BindedLayerCallbacks = {
     featureInfo: Array<{name: string; value: string}> | string | null,
     coordinate?: [number, number]
   ) => void;
+  onRedrawNeeded?: () => void;
 };
 
 export type VisualChannelAggregation = 'colorAggregation' | 'sizeAggregation';