✨ [open-formulieren/open-forms#2177] Change map interactions with com…

…ponent 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

@@ -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],
+    },
+  },
+};

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,
 };
 

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>