Using multiple map interactions

package.json

@@ -43,6 +43,7 @@
     "ibantools": "^3.3.0",
     "immer": "^9.0.6",
     "leaflet": "^1.9.4",
+    "leaflet-draw": "^1.0.4",
     "leaflet-geosearch": "^3.8.0",
     "leaflet-gesture-handling": "^1.2.2",
     "microscope-sass": "^2.0.0",
@@ -51,6 +52,7 @@
     "react-formio": "^4.3.0",
     "react-intl": "^6.4.4",
     "react-leaflet": "4.2.1",
+    "react-leaflet-draw": "^0.20.4",
     "react-modal": "3.16.1",
     "react-number-format": "5.2.2",
     "react-router-dom": "^6.11.2",

src/components/FormStepSummary/ComponentValueDisplay.jsx

@@ -189,7 +189,7 @@
     return <EmptyDisplay />;
   }
 
-  return <Map markerCoordinates={value} disabled tileLayerUrl={component.tileLayerUrl} />;
+  return <Map geoJsonFeature={value} disabled tileLayerUrl={component.tileLayerUrl} />;
 };
 
 const CoSignDisplay = ({value}) => {

src/components/Map/Map.stories.jsx

@@ -1,4 +1,5 @@
-import {userEvent, within} from '@storybook/test';
+import {expect, fn, userEvent, waitFor, within} from '@storybook/test';
+import {useState} from 'react';
 
 import {ConfigDecorator} from 'story-utils/decorators';
 
@@ -11,12 +12,33 @@ const withMapLayout = Story => (
   </div>
 );
 
+const StorybookLeafletMap = props => {
+  const [geoJson, setGeoJson] = useState(props?.geoJsonFeature);
+  const handleGeoJsonChange = args => {
+    if (props?.onGeoJsonFeatureSet) {
+      props?.onGeoJsonFeatureSet(args);
+    }
+    setGeoJson(args);
+  };
+  return (
+    <LeafletMap {...props} geoJsonFeature={geoJson} onGeoJsonFeatureSet={handleGeoJsonChange} />
+  );
+};
+
 export default {
   title: 'Private API / Map',
   component: LeafletMap,
   decorators: [withMapLayout, ConfigDecorator],
+  render: StorybookLeafletMap,
   args: {
-    markerCoordinates: [52.1326332, 5.291266],
+    geoJsonFeature: {
+      type: 'Feature',
+      properties: {},
+      geometry: {
+        type: 'Point',
+        coordinates: [5.291266, 52.1326332],
+      },
+    },
     defaultCenter: [52.1326332, 5.291266],
     defaultZoomLevel: 12,
     disabled: false,
@@ -31,17 +53,36 @@ export default {
 export const Map = {};
 
 export const MapWithAddressSearch = {
-  play: async ({canvasElement}) => {
+  args: {
+    onGeoJsonFeatureSet: fn(),
+  },
+  play: async ({canvasElement, args}) => {
     const canvas = within(canvasElement);
-    const button = await canvas.findByLabelText('Zoeken');
-    await userEvent.click(button);
+
+    await waitFor(async () => {
+      const button = await canvas.findByLabelText('Zoeken');
+      await userEvent.click(button);
+      expect(await canvas.findByPlaceholderText('Zoek adres')).toBeVisible();
+    });
 
     const searchField = await canvas.findByPlaceholderText('Zoek adres');
     const searchBox = within(searchField.parentNode);
     await userEvent.type(searchField, 'Gemeente Utrecht');
     const searchResult = await searchBox.findByText('Utrecht, Utrecht, Utrecht');
 
     await userEvent.click(searchResult);
+    await waitFor(async () => {
+      // A marker is placed on the search result
+      expect(args.onGeoJsonFeatureSet).toBeCalledWith({
+        type: 'Feature',
+        properties: {},
+        geometry: {
+          type: 'Point',
+          // To make sure that this test doesn't magically fail, just expect any 2 values
+          coordinates: [expect.anything(), expect.anything()],
+        },
+      });
+    });
   },
 };
 
@@ -59,3 +100,49 @@ export const MapWithAerialPhotoBackground = {
       'https://service.pdok.nl/hwh/luchtfotorgb/wmts/v1_0/Actueel_orthoHR/EPSG:28992/{z}/{x}/{y}.png',
   },
 };
+
+export const MapWithInteractions = {
+  args: {
+    interactions: {
+      polygon: true,
+      polyline: true,
+      marker: true,
+    },
+    onGeoJsonFeatureSet: fn(),
+  },
+  parameters: {
+    msw: {
+      handlers: [mockAddressSearchGet, mockLatLngSearchEmptyGet],
+    },
+  },
+  play: async ({canvasElement, step, args}) => {
+    const canvas = within(canvasElement);
+    const map = canvasElement.querySelector('.leaflet-pane.leaflet-map-pane');
+
+    await step('All interactions are available', async () => {
+      expect(await canvas.findByTitle('Draw a marker')).toBeVisible();
+      expect(await canvas.findByTitle('Draw a polygon')).toBeVisible();
+      expect(await canvas.findByTitle('Draw a polyline')).toBeVisible();
+    });
+
+    await step('Draw a marker', async () => {
+      const markerButton = await canvas.findByTitle('Draw a marker');
+      await userEvent.click(markerButton);
+
+      await userEvent.click(map, {x: 100, y: 100});
+
+      expect(await canvas.findByRole('button', {name: 'Marker'})).toBeVisible();
+      expect(args.onGeoJsonFeatureSet).toBeCalledWith({
+        type: 'Feature',
+        properties: {},
+        geometry: {
+          type: 'Point',
+          // Expect that the coordinates array contains 2 items.
+          // We cannot pin it to specific values, because they can differentiate.
+          // To make sure that this test doesn't magically fail, just expect any 2 values
+          coordinates: [expect.anything(), expect.anything()],
+        },
+      });
+    });
+  },
+};