Adding map interaction config

bundle-scss.mjs

@@ -5,6 +5,10 @@ await esbuild.build({
   entryPoints: ['src/index.ts'],
   outdir: 'lib/css',
   bundle: true,
+  loader: {
+    ".png": "dataurl",
+    ".svg": "dataurl",
+  },
   minify: false,
   sourcemap: true,
   plugins: [sassPlugin()],

i18n/messages/en.json

@@ -149,6 +149,11 @@
     "description": "Label for 'customClass' builder field",
     "originalDefault": "CSS class"
   },
+  "3xnsUT": {
+    "defaultMessage": "Line interactions",
+    "description": "Label for 'interactions.polyline' builder field",
+    "originalDefault": "Line interactions"
+  },
   "4/cCvG": {
     "defaultMessage": "Location",
     "description": "Component edit form tab title for 'Location' tab",
@@ -564,6 +569,11 @@
     "description": "Label for 'disableAddingRemovingRows' builder field",
     "originalDefault": "Disable adding or removing groups"
   },
+  "NbDr3m": {
+    "defaultMessage": "Allowing users to draw a line when using the map component",
+    "description": "Tooltip for 'interactions.polyline' builder field",
+    "originalDefault": "Allowing users to draw a line when using the map component"
+  },
   "NdaqDN": {
     "defaultMessage": "Option description (<option></option>)",
     "description": "Label for option description location",
@@ -589,6 +599,16 @@
     "description": "Component property 'Label' label",
     "originalDefault": "Label"
   },
+  "P84Gif": {
+    "defaultMessage": "Allowing users to draw a circle when using the map component",
+    "description": "Tooltip for 'interactions.circle' builder field",
+    "originalDefault": "Allowing users to draw a circle when using the map component"
+  },
+  "POkaFQ": {
+    "defaultMessage": "Polygon interactions",
+    "description": "Label for 'interactions.polygon' builder field",
+    "originalDefault": "Polygon interactions"
+  },
   "PhXIai": {
     "defaultMessage": "Number of years. Empty values are ignored.",
     "description": "Tooltip for 'delta.years' in relative delta date constraint validation",
@@ -874,6 +894,16 @@
     "description": "Tooltip for 'includePartners' builder field",
     "originalDefault": "Whether to add partners information to the component."
   },
+  "ZRM6J8": {
+    "defaultMessage": "Available map interactions",
+    "description": "Interaction configuration panel title",
+    "originalDefault": "Available map interactions"
+  },
+  "ZXsJ9p": {
+    "defaultMessage": "Circle interactions",
+    "description": "Label for 'interactions.circle' builder field",
+    "originalDefault": "Circle interactions"
+  },
   "aBADYT": {
     "defaultMessage": "Maximum number of files",
     "description": "Label for 'maxNumberOfFiles' builder field",
@@ -1144,6 +1174,11 @@
     "description": "Label for 'ClearOnHide' builder field",
     "originalDefault": "Clear on hide"
   },
+  "iyWQAt": {
+    "defaultMessage": "Allowing users to draw a polygon when using the map component",
+    "description": "Tooltip for 'interactions.polygon' builder field",
+    "originalDefault": "Allowing users to draw a polygon when using the map component"
+  },
   "j2vQH3": {
     "defaultMessage": "Values",
     "description": "Label for the 'values' builder field",
@@ -1184,6 +1219,11 @@
     "description": "Label for translation message for validation error code",
     "originalDefault": "Error message"
   },
+  "kIX7bm": {
+    "defaultMessage": "Marker interactions",
+    "description": "Label for 'interactions.marker' builder field",
+    "originalDefault": "Marker interactions"
+  },
   "kg/eh1": {
     "defaultMessage": "Choice/option translations",
     "description": "Values/options translations table header",
@@ -1444,6 +1484,11 @@
     "description": "Tooltip for 'hideHeader' builder field",
     "originalDefault": "Do not display the configured label and top line as the header in the fieldset."
   },
+  "vFydxX": {
+    "defaultMessage": "Allowing users to set a marker when using the map component",
+    "description": "Tooltip for 'interactions.marker' builder field",
+    "originalDefault": "Allowing users to set a marker when using the map component"
+  },
   "vRVMpe": {
     "defaultMessage": "Value",
     "description": "Translations: property column header",

i18n/messages/nl.json

@@ -151,6 +151,11 @@
     "isTranslated": true,
     "originalDefault": "CSS class"
   },
+  "3xnsUT": {
+    "defaultMessage": "Lijn interacties",
+    "description": "Label for 'interactions.polyline' builder field",
+    "originalDefault": "Line interactions"
+  },
   "4/cCvG": {
     "defaultMessage": "Locatie",
     "description": "Component edit form tab title for 'Location' tab",
@@ -572,6 +577,11 @@
     "description": "Label for 'disableAddingRemovingRows' builder field",
     "originalDefault": "Disable adding or removing groups"
   },
+  "NbDr3m": {
+    "defaultMessage": "Geeft gebruikers de mogelijkheid een lijn te tekenen, wanneer ze met het kaartmateriaal werken",
+    "description": "Tooltip for 'interactions.polyline' builder field",
+    "originalDefault": "Allowing users to draw a line when using the map component"
+  },
   "NdaqDN": {
     "defaultMessage": "Waarde-omschrijving (<option></option>)",
     "description": "Label for option description location",
@@ -598,6 +608,16 @@
     "isTranslated": true,
     "originalDefault": "Label"
   },
+  "P84Gif": {
+    "defaultMessage": "Geeft gebruikers de mogelijkheid een cirkel te tekenen, wanneer ze met het kaartmateriaal werken",
+    "description": "Tooltip for 'interactions.circle' builder field",
+    "originalDefault": "Allowing users to draw a circle when using the map component"
+  },
+  "POkaFQ": {
+    "defaultMessage": "Polygoon interacties",
+    "description": "Label for 'interactions.polygon' builder field",
+    "originalDefault": "Polygon interactions"
+  },
   "PhXIai": {
     "defaultMessage": "Aantal jaren. Lege waarden worden genegeerd.",
     "description": "Tooltip for 'delta.years' in relative delta date constraint validation",
@@ -885,6 +905,16 @@
     "description": "Tooltip for 'includePartners' builder field",
     "originalDefault": "Whether to add partners information to the component."
   },
+  "ZRM6J8": {
+    "defaultMessage": "Mogelijke kaartmateriaal interacties",
+    "description": "Interaction configuration panel title",
+    "originalDefault": "Available map interactions"
+  },
+  "ZXsJ9p": {
+    "defaultMessage": "Cirkel interacties",
+    "description": "Label for 'interactions.circle' builder field",
+    "originalDefault": "Circle interactions"
+  },
   "aBADYT": {
     "defaultMessage": "Maximum aantal bestanden",
     "description": "Label for 'maxNumberOfFiles' builder field",
@@ -1158,6 +1188,11 @@
     "description": "Label for 'ClearOnHide' builder field",
     "originalDefault": "Clear on hide"
   },
+  "iyWQAt": {
+    "defaultMessage": "Geeft gebruikers de mogelijkheid een polygoon te tekenen, wanneer ze met het kaartmateriaal werken",
+    "description": "Tooltip for 'interactions.polygon' builder field",
+    "originalDefault": "Allowing users to draw a polygon when using the map component"
+  },
   "j2vQH3": {
     "defaultMessage": "Waarden",
     "description": "Label for the 'values' builder field",
@@ -1199,6 +1234,11 @@
     "description": "Label for translation message for validation error code",
     "originalDefault": "Error message"
   },
+  "kIX7bm": {
+    "defaultMessage": "Pin interacties",
+    "description": "Label for 'interactions.marker' builder field",
+    "originalDefault": "Marker interactions"
+  },
   "kg/eh1": {
     "defaultMessage": "Waardenvertalingen",
     "description": "Values/options translations table header",
@@ -1464,6 +1504,11 @@
     "description": "Tooltip for 'hideHeader' builder field",
     "originalDefault": "Do not display the configured label and top line as the header in the fieldset."
   },
+  "vFydxX": {
+    "defaultMessage": "Geeft gebruikers de mogelijkheid een pin te plaatsen, wanneer ze met het kaartmateriaal werken",
+    "description": "Tooltip for 'interactions.marker' builder field",
+    "originalDefault": "Allowing users to set a marker when using the map component"
+  },
   "vRVMpe": {
     "defaultMessage": "(Standaard)tekst",
     "description": "Translations: property column header",

package.json

@@ -66,7 +66,7 @@
     "@formatjs/cli": "^6.1.1",
     "@formatjs/ts-transformer": "^3.12.0",
     "@fortawesome/fontawesome-free": "^6.4.0",
-    "@open-formulieren/types": "^0.37.0",
+    "@open-formulieren/types": "^0.38.0",
     "@storybook/addon-actions": "^8.3.5",
     "@storybook/addon-essentials": "^8.3.5",
     "@storybook/addon-interactions": "^8.3.5",
@@ -124,9 +124,11 @@
     "clsx": "^1.2.1",
     "formik": "^2.4.5",
     "leaflet": "^1.9.4",
+    "leaflet-draw": "^1.0.4",
     "lodash": "^4.17.21",
     "react-intl": "^6.3.2",
     "react-leaflet": "^4.2.1",
+    "react-leaflet-draw": "^0.20.4",
     "react-modal": "^3.16.1",
     "react-select": "^5.8.0",
     "react-signature-canvas": "^1.0.6",

src/jsonEditor.scss

@@ -1,3 +1,6 @@
+@import 'leaflet-draw/dist/leaflet.draw.css';
+@import 'leaflet/dist/leaflet.css';
+
 .json-editor {
   min-block-size: 45vh;
 

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: {