[feat] deck.gl render callbacks (#2330)

src/components/src/map-container.tsx

@@ -310,6 +310,11 @@ export interface MapContainerProps {
   generateDeckGLLayers?: typeof computeDeckLayers;
 
   onMouseMove?: (event: React.MouseEvent & {lngLat?: [number, number]}) => void;
+
+  deckRenderCallbacks?: {
+    onDeckLoad?: () => void;
+    onDeckRender?: (deckProps: Record<string, unknown>) => Record<string, unknown> | null;
+  };
 }
 
 export default function MapContainerFactory(
@@ -671,6 +676,7 @@ export default function MapContainerFactory(
         deckGlProps,
         index,
         mapControls,
+        deckRenderCallbacks,
         theme,
         generateDeckGLLayers,
         onMouseMove
@@ -754,6 +760,21 @@ export default function MapContainerFactory(
         ? deckGlProps?.views()
         : new MapView({legacyMeterSizes: true});
 
+      let allDeckGlProps = {
+        ...deckGlProps,
+        pickingRadius: DEFAULT_PICKING_RADIUS,
+        views,
+        layers: deckGlLayers
+      };
+
+      if (typeof deckRenderCallbacks?.onDeckRender === 'function') {
+        allDeckGlProps = deckRenderCallbacks.onDeckRender(allDeckGlProps);
+        if (!allDeckGlProps) {
+          // if onDeckRender returns null, do not render deck.gl
+          return null;
+        }
+      }
+
       return (
         <div
           onMouseMove={
@@ -768,12 +789,14 @@ export default function MapContainerFactory(
         >
           <DeckGL
             id="default-deckgl-overlay"
-            {...deckGlProps}
-            views={views}
-            layers={deckGlLayers}
+            onLoad={() => {
+              if (typeof deckRenderCallbacks?.onDeckLoad === 'function') {
+                deckRenderCallbacks.onDeckLoad();
+              }
+            }}
+            {...allDeckGlProps}
             controller={{doubleClickZoom: !isEditorDrawingMode}}
             viewState={mapState}
-            pickingRadius={DEFAULT_PICKING_RADIUS}
             onBeforeRender={this._onBeforeRender}
             onViewStateChange={this._onViewportChange}
             {...extraDeckParams}
@@ -902,6 +925,12 @@ export default function MapContainerFactory(
       const hasGeocoderLayer = Boolean(layers.find(l => l.id === GEOCODER_LAYER_ID));
       const isSplit = Boolean(mapState.isSplit);
 
+      const deckOverlay = this._renderDeckOverlay(layersForDeck, {primaryMap: true});
+      if (!deckOverlay) {
+        // deckOverlay can be null if onDeckRender returns null
+        // in this case we don't want to render the map
+        return null;
+      }
       return (
         <>
           <MapControl
@@ -945,7 +974,7 @@ export default function MapContainerFactory(
             {...bottomMapContainerProps}
             ref={this._setMapboxMap}
           >
-            {this._renderDeckOverlay(layersForDeck, {primaryMap: true})}
+            {deckOverlay}
             {this._renderMapboxOverlays()}
             <Editor
               index={index || 0}
@@ -993,14 +1022,20 @@ export default function MapContainerFactory(
 
     render() {
       const {visState} = this.props;
+      const mapContent = this._renderMap();
+      if (!mapContent) {
+        // mapContent can be null if onDeckRender returns null
+        // in this case we don't want to render the map
+        return null;
+      }
       return (
         <StyledMap
           ref={this._ref}
           style={this.styleSelector(this.props)}
           onContextMenu={event => event.preventDefault()}
           mixBlendMode={visState.overlayBlending}
         >
-          {this._renderMap()}
+          {mapContent}
         </StyledMap>
       );
     }