From 7d1521a2b1dffcf66d711078a6babf43450dd620 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

Restructured the drawing logic of the map component, ensuring that geoJsonGeometry and the featureGroupRef are available. This also further encapsulates the drawing logic from the more general map functionalities.
---
 src/components/Map/LeafletMap.jsx | 57 ++++++++++++++++---------------
 src/components/Map/types.jsx      | 17 +++++++++
 2 files changed, 47 insertions(+), 27 deletions(-)
 create mode 100644 src/components/Map/types.jsx

diff --git a/src/components/Map/LeafletMap.jsx b/src/components/Map/LeafletMap.jsx
index 2170e82ca..0b3e19832 100644
--- a/src/components/Map/LeafletMap.jsx
+++ b/src/components/Map/LeafletMap.jsx
@@ -19,6 +19,7 @@ import {
   leafletGestureHandlingText,
   searchControlMessages,
 } from './translations';
+import {GeoJsonGeometry} from './types';
 
 // Run some Leaflet-specific patches...
 initialize();
@@ -92,18 +93,6 @@ 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]);
-
   return (
     <>
       <MapContainer
@@ -143,6 +132,7 @@ const LeaftletMap = ({
               }}
             />
           )}
+          <Geometry geoJsonGeometry={geoJsonGeometry} featureGroupRef={featureGroupRef} />
         </FeatureGroup>
         {coordinates && <MapView coordinates={coordinates} />}
         {!disabled && (
@@ -171,21 +161,7 @@ const LeaftletMap = ({
 };
 
 LeaftletMap.propTypes = {
-  geoJsonGeometry: PropTypes.oneOfType([
-    PropTypes.shape({
-      type: PropTypes.oneOf(['Point']).isRequired,
-      coordinates: PropTypes.arrayOf(PropTypes.number).isRequired,
-    }),
-    PropTypes.shape({
-      type: PropTypes.oneOf(['LineString']).isRequired,
-      coordinates: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).isRequired,
-    }),
-    PropTypes.shape({
-      type: PropTypes.oneOf(['Polygon']).isRequired,
-      coordinates: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)))
-        .isRequired,
-    }),
-  ]),
+  geoJsonGeometry: GeoJsonGeometry,
   onGeoJsonGeometrySet: PropTypes.func,
   interactions: PropTypes.shape({
     polyline: PropTypes.bool,
@@ -196,6 +172,33 @@ LeaftletMap.propTypes = {
   tileLayerUrl: PropTypes.string,
 };
 
+const Geometry = ({geoJsonGeometry, featureGroupRef}) => {
+  useEffect(() => {
+    if (!featureGroupRef.current) {
+      // If there is no feature group, nothing should be done...
+      return;
+    }
+
+    // Remove all shapes from the map.
+    // Only the data from `geoJsonGeometry` should be shown on the map.
+    featureGroupRef.current.clearLayers();
+    if (!geoJsonGeometry) {
+      return;
+    }
+
+    // Add the `geoJsonGeometry` data as shape.
+    const layer = Leaflet.GeoJSON.geometryToLayer(geoJsonGeometry);
+    featureGroupRef.current.addLayer(layer);
+  }, [featureGroupRef, geoJsonGeometry]);
+
+  return null;
+};
+
+Geometry.propTypes = {
+  geoJsonGeometry: GeoJsonGeometry,
+  featureGroupRef: PropTypes.object.isRequired,
+};
+
 // Set the map view if coordinates are provided
 const MapView = ({coordinates = null}) => {
   const map = useMap();
diff --git a/src/components/Map/types.jsx b/src/components/Map/types.jsx
new file mode 100644
index 000000000..598b98ded
--- /dev/null
+++ b/src/components/Map/types.jsx
@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+
+export const GeoJsonGeometry = PropTypes.oneOfType([
+  PropTypes.shape({
+    type: PropTypes.oneOf(['Point']).isRequired,
+    coordinates: PropTypes.arrayOf(PropTypes.number).isRequired,
+  }),
+  PropTypes.shape({
+    type: PropTypes.oneOf(['LineString']).isRequired,
+    coordinates: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).isRequired,
+  }),
+  PropTypes.shape({
+    type: PropTypes.oneOf(['Polygon']).isRequired,
+    coordinates: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)))
+      .isRequired,
+  }),
+]);