SIMSBIOHUB-354-355: Study area and Sampling sites on observations map (…

…#1157)

SIMSBIOHUB-354-355: Added sampling site and study area features to the observation map on the survey details page
---------

Co-authored-by: Nick Phura <nickphura@gmail.com>

app/src/components/map/components/DrawControls.tsx

@@ -4,6 +4,7 @@ import L from 'leaflet';
 import 'leaflet-draw';
 import 'leaflet-draw/dist/leaflet.draw.css';
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import { coloredPoint } from 'utils/mapUtils';
 
 /**
  * Custom subset of `L.Control.DrawConstructorOptions` that omits `edit.featureGroup` as this will be added automatically
@@ -89,17 +90,32 @@ const DrawControls = forwardRef<IDrawControlsRef | undefined, IDrawControlsProps
   const getDrawControls = (): L.Control.Draw => {
     const featureGroup = getFeatureGroup();
 
+    const CustomMarker = L.Icon.extend({
+      // The preview icon rendered when you are in the process of adding a marker to the map
+      options: {
+        iconUrl: 'assets/icon/circle-medium.svg',
+        iconRetinaUrl: 'assets/icon/circle-medium.svg',
+        iconSize: new L.Point(36, 36),
+        iconAnchor: new L.Point(18, 18),
+        popupAnchor: [18, 18],
+        shadowUrl: null
+      }
+    });
+
     const drawOptions: L.Control.DrawConstructorOptions = {
+      draw: {
+        ...options?.draw,
+        marker: {
+          icon: new CustomMarker()
+        }
+      },
       edit: {
         ...options?.edit,
         featureGroup: featureGroup
-      }
+      },
+      position: options?.position || 'topright'
     };
 
-    drawOptions.draw = { ...options?.draw };
-
-    drawOptions.position = drawOptions?.position || 'topright';
-
     return new L.Control.Draw(drawOptions);
   };
 
@@ -170,7 +186,7 @@ const DrawControls = forwardRef<IDrawControlsRef | undefined, IDrawControlsProps
               return new L.Circle([latlng.lat, latlng.lng], feature.properties.radius);
             }
 
-            return new L.Marker([latlng.lat, latlng.lng]);
+            return coloredPoint({ latlng });
           },
           onEachFeature: function (_feature, layer) {
             featureGroup.addLayer(layer);

app/src/components/map/components/MapBaseCss.tsx

@@ -1,19 +1,6 @@
-import L from 'leaflet';
 import 'leaflet-fullscreen/dist/leaflet.fullscreen.css';
 import 'leaflet-fullscreen/dist/Leaflet.fullscreen.js';
-import iconRetina from 'leaflet/dist/images/marker-icon-2x.png';
-import icon from 'leaflet/dist/images/marker-icon.png';
-import iconShadow from 'leaflet/dist/images/marker-shadow.png';
 import 'leaflet/dist/leaflet.css';
-/*
-  Set react leaflet icon to leaflet images
-  React leaflet does not have these images in their package https://stackoverflow.com/questions/49441600/react-leaflet-marker-files-not-found
-*/
-L.Icon.Default.mergeOptions({
-  iconRetinaUrl: iconRetina,
-  iconUrl: icon,
-  shadowUrl: iconShadow
-});
 
 /**
  * This component exists to keep the leaflet map container css/ changes required for each map container to render properly.

app/src/components/map/components/StaticLayers.tsx

@@ -11,6 +11,7 @@ import {
   Tooltip,
   TooltipProps
 } from 'react-leaflet';
+import { coloredPoint } from 'utils/mapUtils';
 
 export interface IStaticLayerFeature {
   geoJSON: Feature;
@@ -38,7 +39,7 @@ const StaticLayers: React.FC<React.PropsWithChildren<IStaticLayersProps>> = (pro
 
   const layerControls: ReactElement[] = [];
 
-  props.layers.forEach((layer, index) => {
+  props.layers.forEach((layer) => {
     if (!layer.features?.length) {
       return;
     }
@@ -57,12 +58,12 @@ const StaticLayers: React.FC<React.PropsWithChildren<IStaticLayersProps>> = (pro
                     return new L.Circle([latlng.lat, latlng.lng], feature.properties.radius);
                   }
 
-                  return new L.Marker([latlng.lat, latlng.lng]);
+                  return coloredPoint({ latlng });
                 }}
                 data={item.geoJSON}
                 {...item.GeoJSONProps}>
                 {item.tooltip && (
-                  <Tooltip key={`static-feature-tooltip-${id}`} direction="top" {...item.TooltipProps}>
+                  <Tooltip key={`static-feature-tooltip-${id}`} direction="top" sticky={true} {...item.TooltipProps}>
                     {item.tooltip}
                   </Tooltip>
                 )}

app/src/features/surveys/observations/ObservationsMap.tsx

@@ -2,23 +2,25 @@ import { mdiRefresh } from '@mdi/js';
 import Icon from '@mdi/react';
 import { IconButton } from '@mui/material';
 import Box from '@mui/material/Box';
-import { square } from '@turf/turf';
 import BaseLayerControls from 'components/map/components/BaseLayerControls';
 import { SetMapBounds } from 'components/map/components/Bounds';
 import FullScreenScrollingEventHandler from 'components/map/components/FullScreenScrollingEventHandler';
 import { MapBaseCss } from 'components/map/components/MapBaseCss';
-import { MAP_DEFAULT_CENTER } from 'constants/spatial';
+import StaticLayers from 'components/map/components/StaticLayers';
+import { ALL_OF_BC_BOUNDARY, MAP_DEFAULT_CENTER } from 'constants/spatial';
 import { ObservationsContext } from 'contexts/observationsContext';
-import { Position } from 'geojson';
+import { SurveyContext } from 'contexts/surveyContext';
+import { Feature, Position } from 'geojson';
 import { LatLngBoundsExpression } from 'leaflet';
-import { useCallback, useContext, useMemo, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { GeoJSON, LayersControl, MapContainer as LeafletMapContainer } from 'react-leaflet';
-import { calculateFeatureBoundingBox, latLngBoundsFromBoundingBox } from 'utils/mapBoundaryUploadHelpers';
+import { calculateUpdatedMapBounds } from 'utils/mapBoundaryUploadHelpers';
 import { coloredPoint, INonEditableGeometries } from 'utils/mapUtils';
 import { v4 as uuidv4 } from 'uuid';
 
 const ObservationsMap = () => {
   const observationsContext = useContext(ObservationsContext);
+  const surveyContext = useContext(SurveyContext);
 
   const surveyObservations: INonEditableGeometries[] = useMemo(() => {
     const observations = observationsContext.observationsDataLoader.data?.surveyObservations;
@@ -58,29 +60,59 @@ const ObservationsMap = () => {
       });
   }, [observationsContext.observationsDataLoader.data]);
 
-  const getDefaultMapBounds = useCallback((): LatLngBoundsExpression | undefined => {
-    const features = surveyObservations.map((observation) => observation.feature);
-    const boundingBox = calculateFeatureBoundingBox(features);
+  const studyAreaFeatures: Feature[] = useMemo(() => {
+    const locations = surveyContext.surveyDataLoader.data?.surveyData.locations;
+    if (!locations) {
+      return [];
+    }
 
-    if (!boundingBox) {
-      return;
+    return locations.flatMap((item) => item.geojson);
+  }, [surveyContext.surveyDataLoader.data]);
+
+  const sampleSiteFeatures: Feature[] = useMemo(() => {
+    const sites = surveyContext.sampleSiteDataLoader.data?.sampleSites;
+    if (!sites) {
+      return [];
     }
 
-    return latLngBoundsFromBoundingBox(square(boundingBox));
-  }, [surveyObservations]);
+    return sites.map((item) => item.geojson);
+  }, [surveyContext.sampleSiteDataLoader.data]);
 
-  const [bounds, setBounds] = useState<LatLngBoundsExpression | undefined>(getDefaultMapBounds());
+  const getDefaultMapBounds = useCallback((): LatLngBoundsExpression | undefined => {
+    const features = surveyObservations.map((observation) => observation.feature);
+    return calculateUpdatedMapBounds([...features, ...studyAreaFeatures, ...sampleSiteFeatures]);
+  }, [surveyObservations, studyAreaFeatures, sampleSiteFeatures]);
+
+  // set default bounds to encompass all of BC
+  const [bounds, setBounds] = useState<LatLngBoundsExpression | undefined>(
+    calculateUpdatedMapBounds([ALL_OF_BC_BOUNDARY])
+  );
 
   const zoomToBoundaryExtent = useCallback(() => {
     setBounds(getDefaultMapBounds());
   }, [getDefaultMapBounds]);
 
+  useEffect(() => {
+    // Once all data loaders have finished loading it will zoom the map to include all features
+    if (
+      !surveyContext.surveyDataLoader.isLoading &&
+      !surveyContext.sampleSiteDataLoader.isLoading &&
+      !observationsContext.observationsDataLoader.isLoading
+    ) {
+      zoomToBoundaryExtent();
+    }
+  }, [
+    observationsContext.observationsDataLoader.isLoading,
+    surveyContext.sampleSiteDataLoader.isLoading,
+    surveyContext.surveyDataLoader.isLoading,
+    zoomToBoundaryExtent
+  ]);
+
   return (
     <Box position="relative">
       <LeafletMapContainer
         data-testid="leaflet-survey_observations_map"
         id="survey_observations_map"
-        zoom={6}
         center={MAP_DEFAULT_CENTER}
         scrollWheelZoom={false}
         fullscreenControl={true}
@@ -93,15 +125,27 @@ const ObservationsMap = () => {
           <GeoJSON
             key={uuidv4()}
             data={nonEditableGeo.feature}
-            pointToLayer={(feature, latlng) => coloredPoint({ feature, latlng })}>
+            pointToLayer={(_, latlng) => coloredPoint({ latlng, fillColor: '#F28C28' })}>
             {nonEditableGeo.popupComponent}
           </GeoJSON>
         ))}
         <LayersControl position="bottomright">
           <BaseLayerControls />
+          <StaticLayers
+            layers={[
+              {
+                layerName: 'Study Area',
+                features: studyAreaFeatures.map((feature) => ({ geoJSON: feature, tooltip: <>Study Area</> }))
+              },
+              {
+                layerName: 'Sample Sites',
+                features: sampleSiteFeatures.map((feature) => ({ geoJSON: feature, tooltip: <>Sample Site</> }))
+              }
+            ]}
+          />
         </LayersControl>
       </LeafletMapContainer>
-      {surveyObservations.length > 0 && (
+      {(surveyObservations.length > 0 || studyAreaFeatures.length > 0 || sampleSiteFeatures.length > 0) && (
         <Box position="absolute" top="126px" left="10px" zIndex="999">
           <IconButton
             sx={{

app/src/utils/mapBoundaryUploadHelpers.ts

@@ -220,7 +220,7 @@ export const calculateFeatureBoundingBox = (features: Feature[]): BBox | undefin
 
   /**
    * If there are multiple points or a polygon and a point, we can automatically
-   * create a bouding box using Turf.
+   * create a bounding box using Turf.
    */
   const allGeosFeatureCollection = {
     type: 'FeatureCollection',

app/src/utils/mapUtils.ts

@@ -1,6 +1,8 @@
 import { Feature } from 'geojson';
 import L, { LatLng } from 'leaflet';
 
+export const MapDefaultBlue = '#3388ff';
+
 export const DefaultMapValues = {
   zoom: 5,
   center: [55, -128]
@@ -16,7 +18,6 @@ export interface IClusteredPointGeometries {
   popupComponent?: JSX.Element;
 }
 export interface MapPointProps {
-  feature: Feature;
   latlng: LatLng;
   fillColor?: string;
   borderColor?: string;
@@ -26,7 +27,7 @@ export const coloredPoint = (point: MapPointProps): L.CircleMarker<any> => {
   return new L.CircleMarker(point.latlng, {
     radius: 6,
     fillOpacity: 1,
-    fillColor: point.fillColor ?? '#006edc',
+    fillColor: point.fillColor ?? MapDefaultBlue,
     color: point.borderColor ?? '#ffffff',
     weight: 1
   });