Updated apartment locations to stand out mor

map/app/public/css/modules/apartment-marker.css

@@ -0,0 +1,34 @@
+/* Custom styles for multi-unit (apartment) markers */
+.multi-unit-marker {
+    border-radius: 0; /* Makes it square */
+    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+    border: 2px solid white;
+    transition: transform 0.1s ease-in-out, width 0.1s ease-in-out, height 0.1s ease-in-out;
+}
+
+.apartment-marker {
+    width: 100%;
+    height: 100%;
+    border-radius: 0; /* Square shape */
+}
+
+/* Style for when a marker is being moved */
+.multi-unit-marker.moving .apartment-marker {
+    animation: pulse-marker 1.5s infinite;
+    border-radius: 0;
+}
+
+@keyframes pulse-marker {
+    0% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(255, 120, 0, 0.7);
+    }
+    70% {
+        transform: scale(1.2);
+        box-shadow: 0 0 0 10px rgba(255, 120, 0, 0);
+    }
+    100% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(255, 120, 0, 0);
+    }
+}

map/app/public/css/style.css

@@ -14,3 +14,4 @@
 @import url("modules/print.css");
 @import url("modules/cache-busting.css");
 @import url("modules/apartment-popup.css");
+@import url("modules/apartment-marker.css");

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

@@ -25,6 +25,7 @@ export let isMovingMarker = false;
 export let movingMarker = null;
 export let originalPosition = null;
 export let movingLocationData = null;
+let originalIcon = null;
 
 export async function loadLocations() {
     try {
@@ -545,11 +546,22 @@ export function startMovingMarker(location, marker) {
     // Highlight the marker being moved
     if (marker) {
         movingMarker = marker;
-        marker.setStyle({
-            fillColor: '#ff7800',
-            fillOpacity: 0.9,
-            radius: 10
-        });
+        if (marker.setStyle) { // It's a circleMarker
+            marker.setStyle({
+                fillColor: '#ff7800',
+                fillOpacity: 0.9,
+                radius: 10
+            });
+        } else if (marker.setIcon) { // It's a divIcon marker
+            originalIcon = marker.getIcon();
+            const movingIcon = L.divIcon({
+                className: 'multi-unit-marker moving',
+                html: `<div class="apartment-marker" style="background-color: #ff7800;"></div>`,
+                iconSize: [24, 24],
+                iconAnchor: [12, 12]
+            });
+            marker.setIcon(movingIcon);
+        }
     }
 }
 
@@ -670,24 +682,28 @@ function cleanupMoveState() {
     
     // Reset marker style if exists
     if (movingMarker && originalPosition) {
-        // Restore original marker style based on support level
-        const location = movingMarker._locationData;
-        let markerColor = '#3388ff';
-        if (location && location['Support Level']) {
-            const level = parseInt(location['Support Level']);
-            switch(level) {
-                case 1: markerColor = '#27ae60'; break;
-                case 2: markerColor = '#f1c40f'; break;
-                case 3: markerColor = '#e67e22'; break;
-                case 4: markerColor = '#e74c3c'; break;
+        if (movingMarker.setStyle) { // It's a circleMarker
+            // Restore original marker style based on support level
+            const location = movingMarker._locationData;
+            let markerColor = '#3388ff';
+            if (location && location['Support Level']) {
+                const level = parseInt(location['Support Level']);
+                switch(level) {
+                    case 1: markerColor = '#27ae60'; break;
+                    case 2: markerColor = '#f1c40f'; break;
+                    case 3: markerColor = '#e67e22'; break;
+                    case 4: markerColor = '#e74c3c'; break;
+                }
             }
+            
+            movingMarker.setStyle({
+                fillColor: markerColor,
+                fillOpacity: 0.8,
+                radius: 8
+            });
+        } else if (movingMarker.setIcon && originalIcon) {
+            movingMarker.setIcon(originalIcon);
         }
-        
-        movingMarker.setStyle({
-            fillColor: markerColor,
-            fillOpacity: 0.8,
-            radius: 8
-        });
     }
     
     // Reset state
@@ -695,6 +711,7 @@ function cleanupMoveState() {
     movingMarker = null;
     originalPosition = null;
     movingLocationData = null;
+    originalIcon = null;
 }
 
 function createMultiUnitMarker(group) {
@@ -711,18 +728,47 @@ function createMultiUnitMarker(group) {
         return null;
     }
     
-    // Use orange color for multi-unit buildings (similar to Edmonton data)
-    const markerColor = '#ff6b35';
+    // Determine dominant support level for color coding
+    const supportLevelCounts = locations.reduce((acc, loc) => {
+        const level = loc['Support Level'];
+        if (level) {
+            acc[level] = (acc[level] || 0) + 1;
+        }
+        return acc;
+    }, {});
+
+    let dominantSupportLevel = null;
+    let maxCount = 0;
+    for (const level in supportLevelCounts) {
+        if (supportLevelCounts[level] > maxCount) {
+            maxCount = supportLevelCounts[level];
+            dominantSupportLevel = level;
+        }
+    }
+
+    // Set marker color based on dominant support level
+    let markerColor = '#3388ff'; // Default blue, same as single markers
+    if (dominantSupportLevel) {
+        const level = parseInt(dominantSupportLevel);
+        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 apartment building styling
-    const marker = L.circleMarker([lat, lng], {
-        radius: 10, // Slightly larger for multi-unit
-        fillColor: markerColor,
-        color: '#ffffff',
-        weight: 2,
-        opacity: 1,
-        fillOpacity: 0.8,
-        className: 'location-marker multi-unit'
+    // Create a square marker using DivIcon for apartment buildings
+    const icon = L.divIcon({
+        className: 'multi-unit-marker',
+        html: `<div class="apartment-marker" style="background-color: ${markerColor};"></div>`,
+        iconSize: [20, 20],
+        iconAnchor: [10, 10],
+        popupAnchor: [0, -10]
+    });
+
+    const marker = L.marker([lat, lng], {
+        icon: icon
     });
     
     // Add to map