fix: trigger redraw from layer

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>);
     };
 
+    _onForceUpdate = () => {
+      // Force a map re-render by triggering a minimal map state update
+      const {mapStateActions, mapState, index} = this.props;
+      mapStateActions.updateMap({width: mapState.width, height: mapState.height}, 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,
+          onForceUpdate: this._onForceUpdate
         },
         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 = {
@@ -112,6 +113,7 @@ export default class IconLayer extends Layer {
   _layerInfoModal: () => JSX.Element;
   iconGeometry: IconGeometry;
   iconGeometryVersion: number;
+  protected forceUpdate: BindedLayerCallbacks['onForceUpdate'] = undefined;
 
   declare visConfigSettings: IconLayerVisConfigSettings;
   declare config: IconLayerConfig;
@@ -246,6 +248,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.forceUpdate?.();
   }
 
   static findDefaultLayerProps({
@@ -361,7 +366,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.forceUpdate = layerCallbacks?.onForceUpdate;
 
     const radiusScale = this.getRadiusScaleByZoom(mapState);
 

src/types/layers.d.ts

@@ -426,6 +426,7 @@ export type LayerCallbacks = {
       coordinate?: [number, number] | null;
     }
   ) => void;
+  onForceUpdate?: (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;
+  onForceUpdate?: () => void;
 };
 
 export type VisualChannelAggregation = 'colorAggregation' | 'sizeAggregation';