Map Legend Styling Updates

apps/frontend/src/components/map/Map.tsx

@@ -7,6 +7,7 @@
 import generateTriangleSVG from '../../images/markers/triangle';
 import generateStarSVG from '../../images/markers/star';
 import generatePentagonSVG from '../../images/markers/pentagon';
+import generateOtherSVG from '../../images/markers/other';
 import PopupBox from '../mapIcon/PopupBox';
 import { createRoot } from 'react-dom/client';
 import { createPortal } from 'react-dom';
@@ -31,7 +32,9 @@
   'Porous Paving': generateDiamondSVG,
   'Tree Trench/Pit': generateStarSVG,
   'Green Roof/Planter': generatePentagonSVG,
-  'Other': generatePentagonSVG,
+
+  'Other': generateOtherSVG // Placeholder, will remove
+
 } as const;
 
 type SymbolType = keyof typeof iconGenerators;
@@ -50,7 +53,7 @@
   if (selectedFeatures.length === 0) {
     markers.forEach((marker: google.maps.Marker) => {
       marker.setMap(map);
-    });
+    }); 
     tempMarkers = markers;
   } else {
     markers.forEach((marker: google.maps.Marker) => marker.setMap(null));
@@ -87,7 +90,7 @@
 const Map: React.FC<MapProps> = ({ zoom, selectedFeatures, selectedStatuses }) => {
   const mapRef = useRef<HTMLDivElement | null>(null);
   const [showSignUp, setShowSignUp] = useState(false);
   const [markers, setMarkers] = useState<google.maps.Marker[]>([]);
   // CHANGED: State to store the selected site's ID.
   const [selectedSiteId, setSelectedSiteId] = useState<string | null>(null);
 
@@ -96,7 +99,7 @@
   useEffect(() => {
     if (mapRef.current) {
       loader.load().then(async () => {
         map = new google.maps.Map(mapRef.current as HTMLElement, {
           center: { lat: 42.36, lng: -71.06 },
           zoom: zoom,
           mapId: '3aa9b524d13192b',
@@ -121,15 +124,25 @@
           const sites = await fetchAllSites();
           const markersArray: google.maps.Marker[] = [];
 
           sites.forEach((markerInfo: any) => {
             const symbolType = markerInfo.symbolType;
 
             if (!isValidSymbolType(symbolType)) {
               console.warn(`Unknown symbol type: ${symbolType}`);
               return;
             }
+
+
+            let typeColor = '#58585B';    
+              if (markerInfo.siteStatus === 'Available') {
+  typeColor = '#2D6A4F'; // Green
+              } else if (markerInfo.siteStatus === 'Adopted') {
+              typeColor = '#DFC22A'; // Yellow (match legend)
+              } else if (markerInfo.siteStatus === 'Inactive') {
+  typeColor = '#58585B'; // Gray
+              }
+
 
-            const typeColor = markerInfo.siteStatus === 'Available' ? '#2D6A4F' : '#FB4D42';
             const generateIcon = iconGenerators[symbolType];
             const tempIcon = generateIcon(typeColor);
             const typeIcon = `data:image/svg+xml;utf8,${encodeURIComponent(tempIcon)}`;