#263 Add child sample location markers

NERC-CEH · Nov 10, 2023 · 58ca75d · 58ca75d
1 parent a3fcf6f
commit 58ca75d
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 4 deletions.
diff --git a/src/Survey/common/Components/ModelLocation/LeafletMap/index.tsx b/src/Survey/common/Components/ModelLocation/LeafletMap/index.tsx
@@ -67,6 +67,7 @@ const centerMap = (
 interface Props {
   model: any;
   location: any;
+  childLocations: any[];
   setLocation: any;
   onGPSClick?: any;
   onLayersClick?: any;
@@ -76,6 +77,7 @@ interface Props {
 const Map: FC<Props> = ({
   model,
   location,
+  childLocations,
   setLocation,
   onGPSClick = null,
   onLayersClick = null,
@@ -134,6 +136,20 @@ const Map: FC<Props> = ({
     location.geocoded,
   ]);
 
+  const addChildMarkers = () => {
+    if (!map) return;
+
+    const addChildMarker = (loc: Location) => {
+      const marker = mapHelpers.generateCircleMarker(loc, false, {
+        fillColor: '#00bd1a',
+        color: 'white',
+      });
+      marker.addTo(map);
+    };
+    childLocations.map(addChildMarker);
+  };
+  useEffect(addChildMarkers, [map, childLocations]);
+
   const updateGPSState = () => {
     if (!map) return;
     map.getContainer().classList.toggle('GPStracking', model.isGPSRunning());

diff --git a/src/Survey/common/Components/ModelLocation/LeafletMap/map/marker.ts b/src/Survey/common/Components/ModelLocation/LeafletMap/map/marker.ts
@@ -33,9 +33,7 @@ const marker: any = {
     // remove previous marker
     this._removeMapMarker();
 
-    if (!location.latitude) {
-      return;
-    }
+    if (!location.latitude) return;
 
     if (!location.gridref) {
       // outside GB
@@ -109,14 +107,15 @@ const marker: any = {
    * @param isComplexMarker
    * @returns {*}
    */
-  generateCircleMarker(location: any, isComplexMarker: any) {
+  generateCircleMarker(location: any, isComplexMarker: any, paint: any) {
     const latLng = L.latLng([location.latitude, location.longitude]);
 
     const options = {
       color: 'red',
       weight: 1,
       opacity: 1,
       fillOpacity: 0.7,
+      ...paint,
     };
 
     let newMarker;

diff --git a/src/Survey/common/Components/ModelLocation/MapboxMap/index.tsx b/src/Survey/common/Components/ModelLocation/MapboxMap/index.tsx
@@ -43,6 +43,7 @@ const getInitialView = (
 type Props = {
   location: any;
   parentLocation: any;
+  childLocations: any[];
   isDisabled: any;
   isLocating: any;
   onMapClick: any;
@@ -55,6 +56,7 @@ type Props = {
 const MapboxContainer = ({
   location,
   parentLocation,
+  childLocations,
   isDisabled,
   onMapClick,
   currentStyle,
@@ -97,6 +99,15 @@ const MapboxContainer = ({
   const transformRequest = (url: string) =>
     url.startsWith('https://api.os.uk') ? { url: `${url}&srs=3857` } : { url };
 
+  const childLocationMarkers = childLocations.map((loc: Location) => (
+    <MapContainer.Marker.Circle
+      id={`${loc.latitude}${loc.longitude}`}
+      key={`${loc.latitude}${loc.longitude}`}
+      {...loc}
+      paint={{ 'circle-color': '#00bd1a', 'circle-stroke-color': 'white' }}
+    />
+  ));
+
   return (
     <MapContainer
       onReady={setMapRef}
@@ -124,6 +135,8 @@ const MapboxContainer = ({
         parentGridref={parentLocation?.gridref}
         {...location}
       />
+
+      {childLocationMarkers}
     </MapContainer>
   );
 };

diff --git a/src/Survey/common/Components/ModelLocation/index.tsx b/src/Survey/common/Components/ModelLocation/index.tsx
@@ -154,6 +154,10 @@ const ModelLocationMap = ({
 
   const isMapboxMap = currentStyle !== 'os_explorer';
 
+  const getSampleLocation = (smp: Sample) => smp.attrs.location;
+  const childLocations =
+    model?.samples?.map(getSampleLocation).filter(isValidLocation) || [];
+
   return (
     <Page id="model-location">
       <MapHeader>
@@ -184,6 +188,7 @@ const ModelLocationMap = ({
           <MapboxMap
             location={location}
             parentLocation={parentLocation}
+            childLocations={childLocations}
             isDisabled={isDisabled}
             onMapClick={onMapClick}
             onGPSClick={onGPSClick}
@@ -198,6 +203,7 @@ const ModelLocationMap = ({
           <LeafletMap
             model={model}
             location={location}
+            childLocations={childLocations}
             setLocation={setLocation}
             onGPSClick={onGPSClick}
             onLayersClick={onLayersClick}