Fixes to the map display and several other bugs

map/app/public/css/style.css

@@ -84,12 +84,17 @@ body {
 
 /* Map container */
 #map-container {
-    flex: 1;
     position: relative;
-    overflow: hidden;
+    width: 100%;
+    height: calc(100vh - var(--header-height));
 }
 
 #map {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     width: 100%;
     height: 100%;
     background-color: #f0f0f0;
@@ -856,3 +861,63 @@ body {
         height: 100vh;
     }
 }
+
+/* Leaflet Circle Markers - Add this section */
+.leaflet-marker-icon {
+    background-color: transparent !important;
+    border: none !important;
+}
+
+.leaflet-interactive {
+    cursor: pointer;
+}
+
+/* Ensure circle markers are visible */
+path.leaflet-interactive {
+    stroke: #fff;
+    stroke-opacity: 1;
+    stroke-width: 2;
+    fill-opacity: 0.8;
+}
+
+/* Fix for marker z-index */
+.leaflet-pane.leaflet-marker-pane {
+    z-index: 600;
+}
+
+.leaflet-pane.leaflet-tooltip-pane {
+    z-index: 650;
+}
+
+.leaflet-pane.leaflet-popup-pane {
+    z-index: 700;
+}
+
+/* Ensure markers are above the map tiles */
+.leaflet-marker-pane svg {
+    position: relative;
+    z-index: 1;
+}
+
+/* Force circle markers to be visible */
+.leaflet-overlay-pane svg {
+    z-index: 1;
+}
+
+.leaflet-overlay-pane svg path {
+    cursor: pointer;
+    pointer-events: auto;
+}
+
+/* Ensure SVG circle markers are rendered */
+.location-marker {
+    cursor: pointer !important;
+}
+
+/* Override any conflicting styles */
+.leaflet-container path.leaflet-interactive {
+    stroke: #ffffff !important;
+    stroke-opacity: 1 !important;
+    stroke-width: 2px !important;
+    fill-opacity: 0.8 !important;
+}

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;
 }
 

map/app/public/login.html

@@ -181,7 +181,7 @@
             </form>
             
             <div class="login-footer">
-                <p>Access is restricted to authorized users only.</p>
+                <p>Access is restricted to authorized users only. Please contact your system administrator for login details.</p>
             </div>
         </div>
     </div>