From 0d7bdf01e29fb672bda657cb375a8924c6e6e354 Mon Sep 17 00:00:00 2001 From: admin Date: Tue, 29 Jul 2025 11:07:21 -0600 Subject: [PATCH] Updated apartment locations to stand out mor --- .../public/css/modules/apartment-marker.css | 34 ++++++ map/app/public/css/style.css | 1 + map/app/public/js/location-manager.js | 110 +++++++++++++----- 3 files changed, 113 insertions(+), 32 deletions(-) create mode 100644 map/app/public/css/modules/apartment-marker.css diff --git a/map/app/public/css/modules/apartment-marker.css b/map/app/public/css/modules/apartment-marker.css new file mode 100644 index 0000000..503b544 --- /dev/null +++ b/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); + } +} diff --git a/map/app/public/css/style.css b/map/app/public/css/style.css index 9d0cbc3..3e3a5db 100644 --- a/map/app/public/css/style.css +++ b/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"); diff --git a/map/app/public/js/location-manager.js b/map/app/public/js/location-manager.js index dffe2dc..dd4e33b 100644 --- a/map/app/public/js/location-manager.js +++ b/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: `
`, + 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: `
`, + iconSize: [20, 20], + iconAnchor: [10, 10], + popupAnchor: [0, -10] + }); + + const marker = L.marker([lat, lng], { + icon: icon }); // Add to map