Add draw controls to the sample site map

app/src/features/surveys/observations/sampling-sites/SamplingSitePage.tsx

@@ -1,12 +1,12 @@
 import { LoadingButton } from '@mui/lab';
+import { Container } from '@mui/material';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
 import Divider from '@mui/material/Divider';
 import Paper from '@mui/material/Paper';
 import { Theme } from '@mui/material/styles';
 import { makeStyles } from '@mui/styles';
-import { Container } from '@mui/system';
 import { IErrorDialogProps } from 'components/dialog/ErrorDialog';
 import HorizontalSplitFormComponent from 'components/fields/HorizontalSplitFormComponent';
 import { CreateSamplingSiteI18N } from 'constants/i18n';

app/src/features/surveys/observations/sampling-sites/components/SamplingSiteMapControl.tsx

@@ -12,6 +12,7 @@ import FileUpload from 'components/file-upload/FileUpload';
 import FileUploadItem from 'components/file-upload/FileUploadItem';
 import BaseLayerControls from 'components/map/components/BaseLayerControls';
 import { SetMapBounds } from 'components/map/components/Bounds';
+import DrawControls, { IDrawControlsRef } from 'components/map/components/DrawControls';
 import FullScreenScrollingEventHandler from 'components/map/components/FullScreenScrollingEventHandler';
 import StaticLayers from 'components/map/components/StaticLayers';
 import { MapBaseCss } from 'components/map/styles/MapBaseCss';
@@ -22,13 +23,13 @@ import SampleSiteFileUploadItemProgressBar from 'features/surveys/observations/s
 import SampleSiteFileUploadItemSubtext from 'features/surveys/observations/sampling-sites/components/SampleSiteFileUploadItemSubtext';
 import { FormikContextType } from 'formik';
 import { Feature } from 'geojson';
-import { LatLngBoundsExpression } from 'leaflet';
+import { DrawEvents, LatLngBoundsExpression } from 'leaflet';
 import 'leaflet-fullscreen/dist/leaflet.fullscreen.css';
 import 'leaflet-fullscreen/dist/Leaflet.fullscreen.js';
 import 'leaflet/dist/leaflet.css';
 import get from 'lodash-es/get';
-import { useContext, useEffect, useMemo, useState } from 'react';
-import { LayersControl, MapContainer as LeafletMapContainer } from 'react-leaflet';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { FeatureGroup, LayersControl, MapContainer as LeafletMapContainer } from 'react-leaflet';
 import { boundaryUploadHelper, calculateUpdatedMapBounds } from 'utils/mapBoundaryUploadHelpers';
 import { pluralize, shapeFileFeatureDesc, shapeFileFeatureName } from 'utils/Utils';
 import { ISurveySampleSite } from '../SamplingSitePage';
@@ -64,11 +65,16 @@ const SamplingSiteMapControl = (props: ISamplingSiteMapControlProps) => {
   const classes = useStyles();
 
   const surveyContext = useContext(SurveyContext);
+  const [lastDrawn, setLastDrawn] = useState<null | number>(null);
+
+  const drawControlsRef = useRef<IDrawControlsRef>();
 
   const { name, mapId, formikProps } = props;
 
   const { values, errors, setFieldValue, setFieldError } = formikProps;
 
+  let numSites = surveyContext.sampleSiteDataLoader.data?.sampleSites.length ?? 0;
+
   const [updatedBounds, setUpdatedBounds] = useState<LatLngBoundsExpression | undefined>(undefined);
 
   const removeFile = () => {
@@ -102,7 +108,6 @@ const SamplingSiteMapControl = (props: ISamplingSiteMapControlProps) => {
           <FileUpload
             uploadHandler={boundaryUploadHelper({
               onSuccess: (features: Feature[]) => {
-                let numSites = surveyContext.sampleSiteDataLoader.data?.sampleSites.length ?? 0;
                 setFieldValue(
                   name,
                   features.map((feature) => ({
@@ -161,15 +166,55 @@ const SamplingSiteMapControl = (props: ISamplingSiteMapControlProps) => {
                 {/* Programmatically set map bounds */}
                 <SetMapBounds bounds={updatedBounds} />
 
+                <FeatureGroup data-id="draw-control-feature-group" key="draw-control-feature-group">
+                  <DrawControls
+                    ref={drawControlsRef}
+                    options={{
+                      // Always disable circle, circlemarker and line
+                      draw: { circle: false, circlemarker: false }
+                    }}
+                    onLayerAdd={(event: DrawEvents.Created, id: number) => {
+                      if (lastDrawn) {
+                        drawControlsRef?.current?.deleteLayer(lastDrawn);
+                      }
+
+                      const feature = event.layer.toGeoJSON();
+                      setFieldValue(name, [
+                        {
+                          name: `Sample Site ${++numSites}`,
+                          description: '',
+                          geojson: feature
+                        }
+                      ]);
+                      // Set last drawn to remove it if a subsequent shape is added. There can only be one shape.
+                      setLastDrawn(id);
+                    }}
+                    onLayerEdit={(event: DrawEvents.Edited) => {
+                      event.layers.getLayers().forEach((layer: any) => {
+                        const feature = layer.toGeoJSON() as Feature;
+                        setFieldValue(name, [
+                          {
+                            name: `Sample Site ${++numSites}`,
+                            description: '',
+                            geojson: feature
+                          }
+                        ]);
+                      });
+                    }}
+                    onLayerDelete={(event: DrawEvents.Deleted) => {
+                      setFieldValue(name, []);
+                    }}
+                  />
+                </FeatureGroup>
+
                 <LayersControl position="bottomright">
                   <StaticLayers
                     layers={[
                       {
                         layerName: 'Sampling Sites',
-                        features: samplingSiteGeoJsonFeatures.map((feature: Feature, index) => ({
-                          geoJSON: feature,
-                          key: index
-                        }))
+                        features: samplingSiteGeoJsonFeatures
+                          .filter((item) => item?.id) // Filter for only drawn features
+                          .map((feature, index) => ({ geoJSON: feature, key: index }))
                       }
                     ]}
                   />

app/src/features/surveys/observations/sampling-sites/edit/components/SamplingSiteEditMapControl.tsx

@@ -12,6 +12,7 @@ import FileUpload from 'components/file-upload/FileUpload';
 import FileUploadItem from 'components/file-upload/FileUploadItem';
 import BaseLayerControls from 'components/map/components/BaseLayerControls';
 import { SetMapBounds } from 'components/map/components/Bounds';
+import DrawControls, { IDrawControlsRef } from 'components/map/components/DrawControls';
 import FullScreenScrollingEventHandler from 'components/map/components/FullScreenScrollingEventHandler';
 import StaticLayers, { IStaticLayer } from 'components/map/components/StaticLayers';
 import { MapBaseCss } from 'components/map/styles/MapBaseCss';
@@ -22,10 +23,10 @@ import SampleSiteFileUploadItemProgressBar from 'features/surveys/observations/s
 import SampleSiteFileUploadItemSubtext from 'features/surveys/observations/sampling-sites/components/SampleSiteFileUploadItemSubtext';
 import { FormikContextType } from 'formik';
 import { Feature } from 'geojson';
-import { LatLngBoundsExpression } from 'leaflet';
+import { DrawEvents, LatLngBoundsExpression } from 'leaflet';
 import get from 'lodash-es/get';
-import { useContext, useEffect, useState } from 'react';
-import { LayersControl, MapContainer as LeafletMapContainer } from 'react-leaflet';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { FeatureGroup, LayersControl, MapContainer as LeafletMapContainer } from 'react-leaflet';
 import { useParams } from 'react-router';
 import { boundaryUploadHelper, calculateUpdatedMapBounds } from 'utils/mapBoundaryUploadHelpers';
 import { pluralize } from 'utils/Utils';
@@ -66,6 +67,10 @@ const SamplingSiteEditMapControl = (props: ISamplingSiteEditMapControlProps) =>
     ? surveyContext.sampleSiteDataLoader.data.sampleSites.find((x) => x.survey_sample_site_id === surveySampleSiteId)
     : undefined;
 
+  const drawControlsRef = useRef<IDrawControlsRef>();
+
+  const [lastDrawn, setLastDrawn] = useState<null | number>(null);
+
   const { name, mapId, formikProps } = props;
 
   const { values, errors, setFieldValue, setFieldError } = formikProps;
@@ -79,10 +84,10 @@ const SamplingSiteEditMapControl = (props: ISamplingSiteEditMapControlProps) =>
   };
 
   // Array of sampling site features
-  const samplingSiteGeoJsonFeatures: Feature[] = get(values, name);
+  const samplingSiteGeoJsonFeatures: Feature[] = useMemo(() => get(values, name), [values, name]);
 
-  useEffect(() => {
-    setUpdatedBounds(calculateUpdatedMapBounds(samplingSiteGeoJsonFeatures));
+  const updateStaticLayers = (geoJsonFeatures: Feature[]) => {
+    setUpdatedBounds(calculateUpdatedMapBounds(geoJsonFeatures));
 
     const staticLayers: IStaticLayer[] = [
       {
@@ -92,6 +97,18 @@ const SamplingSiteEditMapControl = (props: ISamplingSiteEditMapControlProps) =>
     ];
 
     setStaticLayers(staticLayers);
+  };
+
+  const [editedGeometry, setEditedGeometry] = useState<Feature[] | undefined>(undefined);
+
+  useEffect(() => {
+    if (editedGeometry) {
+      updateStaticLayers(editedGeometry);
+    }
+  }, [editedGeometry]);
+
+  useEffect(() => {
+    updateStaticLayers(samplingSiteGeoJsonFeatures);
   }, [samplingSiteGeoJsonFeatures]);
 
   return (
@@ -155,10 +172,43 @@ const SamplingSiteEditMapControl = (props: ISamplingSiteEditMapControlProps) =>
               fullscreenControl={true}
               scrollWheelZoom={false}>
               <MapBaseCss />
+
+              <FeatureGroup data-id="draw-control-feature-group" key="draw-control-feature-group">
+                <DrawControls
+                  ref={drawControlsRef}
+                  options={{
+                    // Always disable circle, circlemarker and line
+                    draw: { circle: false, circlemarker: false }
+                  }}
+                  onLayerAdd={(event: DrawEvents.Created, id: number) => {
+                    if (lastDrawn) {
+                      drawControlsRef?.current?.deleteLayer(lastDrawn);
+                    }
+
+                    const feature = event.layer.toGeoJSON();
+
+                    setFieldValue(name, [feature]);
+                    setEditedGeometry([feature]);
+
+                    setLastDrawn(id);
+                  }}
+                  onLayerEdit={(event: DrawEvents.Edited) => {
+                    event.layers.getLayers().forEach((layer: any) => {
+                      const feature = layer.toGeoJSON() as Feature;
+                      setFieldValue(name, [feature]);
+                      setEditedGeometry([feature]);
+                    });
+                  }}
+                  onLayerDelete={(event: DrawEvents.Deleted) => {
+                    setFieldValue(name, sampleSiteData?.geojson ? [sampleSiteData?.geojson] : []);
+                  }}
+                />
+              </FeatureGroup>
+
               <LayersControl position="bottomright">
                 <FullScreenScrollingEventHandler bounds={updatedBounds} scrollWheelZoom={false} />
                 <SetMapBounds bounds={updatedBounds} />
-                <StaticLayers layers={staticLayers} />
+                {!lastDrawn && <StaticLayers layers={staticLayers} />}
                 <BaseLayerControls />
               </LayersControl>
             </LeafletMapContainer>

app/src/features/surveys/view/SurveyMap.tsx

@@ -259,8 +259,6 @@ const SurveyMap = (props: ISurveyMapProps) => {
     })
   ];
 
-  // console.log('staticlayers:', staticLayers)
-
   return (
     <>
       {props.isLoading ? (