Location pinned comments

Author: nofurtherinformation

app/src/app/components/Map/MetaLayers.tsx

@@ -1,17 +1,24 @@
 import {EMPTY_FT_COLLECTION, getDissolved, ZONE_LABEL_STYLE} from '@/app/constants/layers';
+import { useMapMetadata } from '@/app/hooks/useMapMetadata';
 import {useDemographyStore} from '@/app/store/demography/demographyStore';
 import {useMapStore} from '@/app/store/mapStore';
+import { useTooltipStore } from '@/app/store/tooltipStore';
+import { saveMap } from '@/app/utils/api/apiHandlers/saveMap';
 import {demographyCache} from '@/app/utils/demography/demographyCache';
 import GeometryWorker from '@/app/utils/GeometryWorker';
+import { DEFAULT_MAP_METADATA } from '@/app/utils/language';
 import React, {useLayoutEffect, useRef, useState} from 'react';
 import {useEffect} from 'react';
-import {Source, Layer} from 'react-map-gl/maplibre';
+import {Source, Layer, Marker, MarkerDragEvent, Popup} from 'react-map-gl/maplibre';
+import { Box, Button, Text, TextArea } from '@radix-ui/themes';
+import { Pin } from '../Topbar/Icons';
 
 export const MetaLayers: React.FC<{isDemographicMap?: boolean}> = ({isDemographicMap}) => {
   return (
     <>
       {!isDemographicMap && <ZoneNumbersLayer />}
       <PopulationTextLayer />
+      <PinCommentsLayer />
     </>
   );
 };
@@ -272,3 +279,82 @@ const ZoneNumbersLayer = () => {
     </Source>
   );
 };
+
+
+const PinCommentsLayer = () => {
+  const mapMetadata = useMapMetadata();
+  const [openPopupIndex, setOpenPopupIndex] = useState<number | null>(null);
+  const setErrorNotification = useMapStore(state => state.setErrorNotification);
+  const [popupIndex, setPopupIndex] = useState<number | null>(null);
+  const handleDrag = async (e: MarkerDragEvent, index: number) => {
+    let locationComments = [...(mapMetadata?.location_comments || [])];
+    locationComments[index] = {
+      ...locationComments[index], 
+      lng: e.lngLat.lng,
+      lat: e.lngLat.lat,
+    }
+    try {
+
+      const r = await saveMap({
+        ...(mapMetadata || DEFAULT_MAP_METADATA),
+        location_comments: locationComments,
+      });
+    } catch (e) {
+      setErrorNotification({
+        message: 'Error saving map metadata or comment.',
+        severity: 3,
+      });
+      console.error(e);
+    }
+  }
+
+  const handleSave = async (index: number) => {
+    if (!mapMetadata?.location_comments?.[index]) {
+      return;
+    }
+    const r = await saveMap({
+      ...(mapMetadata || DEFAULT_MAP_METADATA),
+      location_comments: [...(mapMetadata?.location_comments || []), {
+        lng: mapMetadata?.location_comments?.[index]?.lng || 0,
+                lat: mapMetadata?.location_comments?.[index]?.lat || 0,
+          comment: mapMetadata?.location_comments?.[index]?.comment || '',
+        },
+      ],
+    });
+  }
+  if (!mapMetadata?.location_comments) {
+    return null;
+  }
+
+  return (
+    <>
+    {mapMetadata?.location_comments?.map((comment, index) => (
+      <Marker
+        key={index}
+        longitude={comment.lng}
+        latitude={comment.lat}
+        anchor="center"
+        draggable={true}
+        onDragEnd={(e) => handleDrag(e, index)}
+        onClick={() => {
+          setPopupIndex(index)
+        }}
+      >
+        <Pin size="size-8" />
+      </Marker> 
+    ))}
+    {popupIndex !== null && (
+      <Popup
+        anchor="bottom"
+        offset={[0, -30]}
+        longitude={mapMetadata?.location_comments?.[popupIndex]?.lng}
+        latitude={mapMetadata?.location_comments?.[popupIndex]?.lat}
+        closeOnMove={false}
+        closeOnClick={false}
+      >
+        <Box className="flex flex-col gap-2 p-4 z-[999]">{mapMetadata?.location_comments?.[popupIndex]?.comment}</Box>
+      </Popup>
+    )}
+    </>
+  );
+};

app/src/app/components/Toolbar/ToolControls.tsx

@@ -35,6 +35,9 @@ const ToolControlsConfig: Record<
       }
     },
   },
+  pin: {
+    Component: () => <React.Fragment />,
+  },
 };
 
 export const ToolControls: React.FC<{

app/src/app/components/Topbar/Icons.tsx

@@ -52,3 +52,11 @@ export const ReadyIcon: React.FC = () => {
     </svg>
   );
 };
+
+export const Pin : React.FC<{size?: string}> = ({size = 'size-4'}) => {
+  return (
+    <svg className={`${size}`} version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+      <path d="m24.875 57.48c4.457 8.4727 12.168 19.703 25.125 37.664 12.957-17.961 20.664-29.191 25.125-37.664 4.5352-8.6211 5.6602-14.387 5.6602-21.84-0.003906-17-13.785-30.785-30.785-30.785s-30.781 13.785-30.781 30.785c0 7.4531 1.1211 13.219 5.6562 21.84zm25.125-38.082c11.852 0 17.824 14.398 9.4375 22.785-8.3867 8.3867-22.785 2.4141-22.785-9.4375 0-7.3711 5.9766-13.348 13.348-13.348z" fill-rule="evenodd"/>
+    </svg>
+  );
+};