✨ [open-formulieren/open-forms#2177] Allow manually deleting features

Due to some formio magic, the `resetValue` flag is needed when performing the `setValue` call. Without this flag it isn't allowed to set a field value to `null` or `undefined`.We also need to use the value `null`, instead of `undefined`. This because setting the value to `undefined` isn't reflected as a value change (what we need, to re-render the component).
This is described in node_modules/formiojs/components/_classes/component/Component.js:2524

src/components/Map/index.jsx

@@ -97,22 +97,35 @@ const LeaftletMap = ({
   const className = getBEMClassName('leaflet-map', modifiers);
 
   const onFeatureCreate = event => {
-    onGeoJsonFeatureSet(event.layer.toGeoJSON());
+    updateGeoJsonFeature(event.layer);
+  };
+
+  const onFeatureDelete = () => {
+    // The value `null` is needed to make sure that Formio actually updates the value.
+    // node_modules/formiojs/components/_classes/component/Component.js:2528
+    onGeoJsonFeatureSet(null);
   };
 
   const onSearchMarkerSet = event => {
-    onGeoJsonFeatureSet(event.marker.toGeoJSON());
+    updateGeoJsonFeature(event.marker);
   };
 
-  useEffect(() => {
-    if (!featureGroupRef.current) {
-      return;
+  const updateGeoJsonFeature = newFeatureLayer => {
+    if (featureGroupRef.current) {
+      const newFeatureLayerId = newFeatureLayer._leaflet_id;
+      const layers = featureGroupRef.current?.getLayers();
+      // Limit the amount of features to 1, by removing the previous layer
+      if (layers.length > 1) {
+        const oldLayerIds = layers
+          .map(layer => layer._leaflet_id)
+          .filter(layerId => layerId !== newFeatureLayerId);
+        oldLayerIds.forEach(oldLayerId => {
+          featureGroupRef.current?.removeLayer(oldLayerId);
+        });
+      }
     }
-    // Remove the old layers and add the new one.
-    // This limits the amount of features to 1
-    featureGroupRef.current?.clearLayers();
-    featureGroupRef.current?.addLayer(Leaflet.geoJSON(geoJsonFeature));
-  });
+    onGeoJsonFeatureSet(newFeatureLayer.toGeoJSON());
+  };
 
   return (
     <>
@@ -139,9 +152,9 @@ const LeaftletMap = ({
             <EditControl
               position="topright"
               onCreated={onFeatureCreate}
+              onDeleted={onFeatureDelete}
               edit={{
                 edit: false,
-                remove: false,
               }}
               draw={{
                 rectangle: false,

src/formio/components/Map.jsx

@@ -44,7 +44,7 @@ export default class Map extends Field {
   }
 
   get emptyValue() {
-    return '';
+    return undefined;
   }
 
   /**
@@ -90,8 +90,8 @@ export default class Map extends Field {
     super.destroy();
   }
 
-  onGeoJsonSet(newLatLng) {
-    this.setValue(newLatLng, {modified: true});
+  onGeoJsonSet(newGeoJson) {
+    this.setValue(newGeoJson, {modified: true});
   }
 
   renderReact() {
@@ -123,6 +123,11 @@ export default class Map extends Field {
   }
 
   setValue(value, flags = {}) {
+    if (value === null) {
+      // The `resetValue` flag is needed to allow the setting of `undefined` or `null` values.
+      // node_modules/formiojs/components/_classes/component/Component.js:2526
+      flags.resetValue = true;
+    }
     const changed = super.setValue(value, flags);
     // re-render if the value is set, which may be because of existing submission data
     if (changed) this.renderReact();