✨ [open-formulieren/open-forms#2177] added interaction configuration

src/registry/map/edit.tsx

@@ -23,6 +23,7 @@ import {
 import {LABELS} from '@/components/builder/messages';
 import {Checkbox, Select, TabList, TabPanel, Tabs} from '@/components/formio';
 import {BuilderContext} from '@/context';
+import InteractionConfiguration from '@/registry/map/interaction-configuration';
 import {useErrorChecker} from '@/utils/errors';
 
 import {EditFormDefinition} from '../types';
@@ -65,7 +66,8 @@ const EditForm: EditFormDefinition<MapComponentSchema> = () => {
             'useConfigDefaultMapSettings',
             'defaultZoom',
             'initialCenter',
-            'tileLayerIdentifier'
+            'tileLayerIdentifier',
+            'interactions'
           )}
         />
         <BuilderTabs.Advanced hasErrors={hasAnyError('conditional')} />
@@ -87,6 +89,7 @@ const EditForm: EditFormDefinition<MapComponentSchema> = () => {
         <UseConfigDefaultMapSettings />
         {!values.useConfigDefaultMapSettings && <MapConfiguration />}
         <TileLayer />
+        <InteractionConfiguration />
       </TabPanel>
 
       {/* Advanced tab */}
@@ -139,6 +142,12 @@ EditForm.defaultValues = {
     lng: undefined,
   },
   tileLayerIdentifier: undefined,
+  interactions: {
+    circle: false,
+    polygon: false,
+    polyline: false,
+    marker: true,
+  },
   defaultValue: null,
   // Advanced tab
   conditional: {

src/registry/map/interaction-configuration.tsx

@@ -0,0 +1,101 @@
+import {FormattedMessage, useIntl} from 'react-intl';
+
+import {Checkbox, Panel} from '@/components/formio';
+
+const CircleInteraction: React.FC = () => {
+  const intl = useIntl();
+  const tooltip = intl.formatMessage({
+    description: "Tooltip for 'interactions.circle' builder field",
+    defaultMessage: 'Allowing users to draw a circle when using the map component',
+  });
+  return (
+    <Checkbox
+      name="interactions.circle"
+      label={
+        <FormattedMessage
+          description="Label for 'interactions.circle' builder field"
+          defaultMessage="Circle interactions"
+        />
+      }
+      tooltip={tooltip}
+    />
+  );
+};
+
+const PolygonInteraction: React.FC = () => {
+  const intl = useIntl();
+  const tooltip = intl.formatMessage({
+    description: "Tooltip for 'interactions.polygon' builder field",
+    defaultMessage: 'Allowing users to draw a polygon when using the map component',
+  });
+  return (
+    <Checkbox
+      name="interactions.polygon"
+      label={
+        <FormattedMessage
+          description="Label for 'interactions.polygon' builder field"
+          defaultMessage="Polygon interactions"
+        />
+      }
+      tooltip={tooltip}
+    />
+  );
+};
+
+const PolylineInteraction: React.FC = () => {
+  const intl = useIntl();
+  const tooltip = intl.formatMessage({
+    description: "Tooltip for 'interactions.polyline' builder field",
+    defaultMessage: 'Allowing users to draw a line when using the map component',
+  });
+  return (
+    <Checkbox
+      name="interactions.polyline"
+      label={
+        <FormattedMessage
+          description="Label for 'interactions.polyline' builder field"
+          defaultMessage="Line interactions"
+        />
+      }
+      tooltip={tooltip}
+    />
+  );
+};
+
+const MarkerInteraction: React.FC = () => {
+  const intl = useIntl();
+  const tooltip = intl.formatMessage({
+    description: "Tooltip for 'interactions.marker' builder field",
+    defaultMessage: 'Allowing users to set a marker when using the map component',
+  });
+  return (
+    <Checkbox
+      name="interactions.marker"
+      label={
+        <FormattedMessage
+          description="Label for 'interactions.marker' builder field"
+          defaultMessage="Marker interactions"
+        />
+      }
+      tooltip={tooltip}
+    />
+  );
+};
+
+const InteractionConfiguration: React.FC = () => (
+  <Panel
+    title={
+      <FormattedMessage
+        description="Interaction configuration panel title"
+        defaultMessage="Available map interactions"
+      />
+    }
+  >
+    <CircleInteraction />
+    <PolygonInteraction />
+    <PolylineInteraction />
+    <MarkerInteraction />
+  </Panel>
+);
+
+export default InteractionConfiguration;