From 5f4fb631b3b89d2f6f5040e532d841890dd4d22b Mon Sep 17 00:00:00 2001
From: robinvandermolen <robin@maykinmedia.nl>
Date: Tue, 10 Dec 2024 11:52:40 +0100
Subject: [PATCH] :sparkles: [open-formulieren/open-forms#2177] Change map
 interactions with component property

With the new property `interactions` the component can defined the possible map interactions. Currently supporting 'marker', 'polygon', 'polyline' and 'circle'
---
 src/components/Map/Map.stories.jsx | 17 +++++++++++++++++
 src/components/Map/index.jsx       | 15 +++++++++++----
 src/formio/components/Map.jsx      |  1 +
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/components/Map/Map.stories.jsx b/src/components/Map/Map.stories.jsx
index 62653ac27..16b68f225 100644
--- a/src/components/Map/Map.stories.jsx
+++ b/src/components/Map/Map.stories.jsx
@@ -59,3 +59,20 @@ export const MapReverseGeoEmpty = {
     },
   },
 };
+
+export const MapWithInteractions = {
+  args: {
+    interactions: {
+      circle: true,
+      polygon: true,
+      polyline: true,
+      marker: true,
+    },
+    onGeoJsonFeatureSet: () => {},
+  },
+  parameters: {
+    msw: {
+      handlers: [mockAddressSearchGet, mockLatLngSearchEmptyGet],
+    },
+  },
+};
diff --git a/src/components/Map/index.jsx b/src/components/Map/index.jsx
index 8f59fba72..e835ff6fe 100644
--- a/src/components/Map/index.jsx
+++ b/src/components/Map/index.jsx
@@ -69,6 +69,7 @@ const LeaftletMap = ({
   defaultCenter = DEFAULT_LAT_LNG,
   defaultZoomLevel = DEFAULT_ZOOM,
   disabled = false,
+  interactions,
 }) => {
   const ref = useRef();
   const intl = useIntl();
@@ -126,10 +127,10 @@ const LeaftletMap = ({
             }}
             draw={{
               rectangle: false,
-              circle: true,
-              polyline: true,
-              polygon: true,
-              marker: true,
+              circle: !!interactions?.circle,
+              polyline: !!interactions?.polyline,
+              polygon: !!interactions?.polygon,
+              marker: !!interactions?.marker,
               circlemarker: false,
             }}
           />
@@ -183,6 +184,12 @@ LeaftletMap.propTypes = {
     ]).isRequired,
   }),
   onGeoJsonFeatureSet: PropTypes.func,
+  interactions: PropTypes.shape({
+    circle: PropTypes.bool,
+    polyline: PropTypes.bool,
+    polygon: PropTypes.bool,
+    marker: PropTypes.bool,
+  }),
   disabled: PropTypes.bool,
 };
 
diff --git a/src/formio/components/Map.jsx b/src/formio/components/Map.jsx
index c82cc9bcc..c07851d1b 100644
--- a/src/formio/components/Map.jsx
+++ b/src/formio/components/Map.jsx
@@ -115,6 +115,7 @@ export default class Map extends Field {
             onGeoJsonFeatureSet={this.onGeoJsonSet.bind(this)}
             defaultCenter={defaultCenter}
             defaultZoomLevel={zoom || DEFAULT_ZOOM}
+            interactions={this.component?.interactions}
           />
         </ConfigContext.Provider>
       </IntlProvider>