From 8ef3a1f7512a3e4ad3c3659c80f1b4e91ca9da1a Mon Sep 17 00:00:00 2001
From: robinvandermolen <robin@maykinmedia.nl>
Date: Wed, 18 Dec 2024 14:32:33 +0100
Subject: [PATCH] :sparkles: [open-formulieren/open-forms#2177] Add map
 component interaction to preview

---
 src/jsonEditor.scss          |  3 +++
 src/registry/map/preview.tsx | 35 +++++++++++++++++++++++++++++++----
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/jsonEditor.scss b/src/jsonEditor.scss
index 53f87d6a..13285dba 100644
--- a/src/jsonEditor.scss
+++ b/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;
 
diff --git a/src/registry/map/preview.tsx b/src/registry/map/preview.tsx
index b52dbe9a..b0a17c34 100644
--- a/src/registry/map/preview.tsx
+++ b/src/registry/map/preview.tsx
@@ -1,14 +1,15 @@
 import {CRS_RD, TILE_LAYER_RD} from '@open-formulieren/leaflet-tools';
 import {MapComponentSchema} from '@open-formulieren/types';
-import {useContext, useLayoutEffect} from 'react';
-import {MapContainer, TileLayer, useMap} from 'react-leaflet';
+import type {FeatureGroup as LeafletFeatureGroup} from 'leaflet';
+import {useContext, useLayoutEffect, useRef} from 'react';
+import {FeatureGroup, MapContainer, TileLayer, useMap} from 'react-leaflet';
+import {EditControl} from 'react-leaflet-draw';
 import useAsync from 'react-use/esm/useAsync';
 
 import Loader from '@/components/builder/loader';
 import {Component, Description} from '@/components/formio';
 import {BuilderContext} from '@/context';
-
-import {ComponentPreviewProps} from '../types';
+import {ComponentPreviewProps} from '@/registry/types';
 
 interface MapViewProps {
   lat: number;
@@ -41,8 +42,10 @@ const Preview: React.FC<ComponentPreviewProps<MapComponentSchema>> = ({component
     defaultZoom,
     initialCenter = {},
     tileLayerIdentifier,
+    interactions,
   } = component;
   const {getMapTileLayers} = useContext(BuilderContext);
+  const featureGroupRef = useRef<LeafletFeatureGroup>(null);
   const {value: tileLayers, loading, error} = useAsync(async () => await getMapTileLayers(), []);
   if (error) {
     throw error;
@@ -63,6 +66,12 @@ const Preview: React.FC<ComponentPreviewProps<MapComponentSchema>> = ({component
       TILE_LAYER_RD.url
     );
   };
+
+  const onFeatureCreate = (event: any) => {
+    featureGroupRef.current?.clearLayers();
+    featureGroupRef.current?.addLayer(event.layer);
+  };
+
   return (
     <Component
       type={component.type}
@@ -84,6 +93,24 @@ const Preview: React.FC<ComponentPreviewProps<MapComponentSchema>> = ({component
         }}
       >
         <TileLayer {...TILE_LAYER_RD} url={tileLayerUrl()} />
+        <FeatureGroup ref={featureGroupRef}>
+          <EditControl
+            position="topright"
+            onCreated={onFeatureCreate}
+            edit={{
+              edit: false,
+              remove: false,
+            }}
+            draw={{
+              rectangle: false,
+              circle: !!interactions?.circle,
+              polyline: !!interactions?.polyline,
+              polygon: !!interactions?.polygon,
+              marker: !!interactions?.marker,
+              circlemarker: false,
+            }}
+          />
+        </FeatureGroup>
         <MapView lat={lat} lng={lng} zoom={zoom} />
       </MapContainer>
       {description && <Description text={description} />}