Fixes to the map display and several other bugs

map/app/public/js/location-manager.js

@@ -51,34 +51,62 @@ function createLocationMarker(location) {
         return null;
     }
     
-    const lat = parseFloat(location.latitude);
-    const lng = parseFloat(location.longitude);
+    // Try to get coordinates from multiple possible sources
+    let lat, lng;
     
-    // Determine marker color based on support level
-    let markerColor = 'blue';
-    if (location['Support Level']) {
-        const level = parseInt(location['Support Level']);
-        switch(level) {
-            case 1: markerColor = 'green'; break;
-            case 2: markerColor = 'yellow'; break;
-            case 3: markerColor = 'orange'; break;
-            case 4: markerColor = 'red'; break;
+    // First try the Geo-Location field
+    if (location['Geo-Location']) {
+        const coords = location['Geo-Location'].split(';');
+        if (coords.length === 2) {
+            lat = parseFloat(coords[0]);
+            lng = parseFloat(coords[1]);
         }
     }
     
+    // If that didn't work, try latitude/longitude fields
+    if ((!lat || !lng) && location.latitude && location.longitude) {
+        lat = parseFloat(location.latitude);
+        lng = parseFloat(location.longitude);
+    }
+    
+    // Validate coordinates
+    if (!lat || !lng || isNaN(lat) || isNaN(lng)) {
+        console.warn('Invalid coordinates for location:', location);
+        return null;
+    }
+    
+    // Determine marker color based on support level
+    let markerColor = '#3388ff'; // Default blue
+    if (location['Support Level']) {
+        const level = parseInt(location['Support Level']);
+        switch(level) {
+            case 1: markerColor = '#27ae60'; break; // Green
+            case 2: markerColor = '#f1c40f'; break; // Yellow
+            case 3: markerColor = '#e67e22'; break; // Orange
+            case 4: markerColor = '#e74c3c'; break; // Red
+        }
+    }
+    
+    // Create circle marker with explicit styling
     const marker = L.circleMarker([lat, lng], {
         radius: 8,
         fillColor: markerColor,
-        color: '#fff',
+        color: '#ffffff',
         weight: 2,
         opacity: 1,
-        fillOpacity: 0.8
-    }).addTo(map);
+        fillOpacity: 0.8,
+        className: 'location-marker' // Add a class for CSS targeting
+    });
+    
+    // Add to map
+    marker.addTo(map);
     
     const popupContent = createPopupContent(location);
     marker.bindPopup(popupContent);
     marker._locationData = location;
     
+    console.log(`Created marker at ${lat}, ${lng} with color ${markerColor}`);
+    
     return marker;
 }