From 8408f1e0651abc20f5457fabc39e6709f809b1fb Mon Sep 17 00:00:00 2001
From: robinvandermolen <robin@maykinmedia.nl>
Date: Thu, 30 Jan 2025 15:16:11 +0100
Subject: [PATCH] :bug: [open-formulieren/open-forms#5038] Missing map shapes
 in summary

Because the geoJsonGeometry is available before the featureGroupRef is set, can the useEffect hook not draw the map shapes
---
 src/components/Map/LeafletMap.jsx | 32 ++++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/components/Map/LeafletMap.jsx b/src/components/Map/LeafletMap.jsx
index 2170e82ca..1fc259ea4 100644
--- a/src/components/Map/LeafletMap.jsx
+++ b/src/components/Map/LeafletMap.jsx
@@ -92,17 +92,27 @@ const LeaftletMap = ({
     onGeoJsonGeometrySet?.(newFeatureLayer.toGeoJSON().geometry);
   };
 
-  useEffect(() => {
-    // Remove all shapes from the map.
-    // Only `geoJsonGeometry` should be shown on the map.
-    featureGroupRef.current?.clearLayers();
-    if (!geoJsonGeometry) {
-      return;
-    }
-    // Add the current `geoJsonGeometry` as shape
-    const layer = Leaflet.GeoJSON.geometryToLayer(geoJsonGeometry);
-    featureGroupRef.current?.addLayer(layer);
-  }, [geoJsonGeometry]);
+  useEffect(
+    () => {
+      if (!featureGroupRef.current) {
+        // If there is no feature group, nothing should be done..
+        return;
+      }
+
+      // Remove all shapes from the map.
+      // Only `geoJsonGeometry` should be shown on the map.
+      featureGroupRef.current.clearLayers();
+      if (!geoJsonGeometry) {
+        return;
+      }
+      // Add the current `geoJsonGeometry` as shape
+      const layer = Leaflet.GeoJSON.geometryToLayer(geoJsonGeometry);
+      featureGroupRef.current.addLayer(layer);
+    },
+    // `featureGroupRef.current` is needed as dependency to make sure that
+    // the featureGroupRef can be used.
+    [geoJsonGeometry, featureGroupRef.current]
+  );
 
   return (
     <>