From 7edc66565c804caf04b5e099999341c53b96ded3 Mon Sep 17 00:00:00 2001
From: admin <admin@thebunkerops.ca>
Date: Wed, 30 Jul 2025 08:55:50 -0600
Subject: [PATCH] square representations of apartments

---
 map/Instuctions.md                            |  5 +++
 .../public/css/modules/apartment-marker.css   | 17 ++++++---
 map/app/public/js/external-layers.js          | 38 +++++++++++++++----
 3 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/map/Instuctions.md b/map/Instuctions.md
index fc45763..8c3f7f3 100644
--- a/map/Instuctions.md
+++ b/map/Instuctions.md
@@ -37,6 +37,11 @@ Welcome to the Map project! This application is a canvassing tool for political
 
 ## How to Add a Feature
 
+**First look through the existing codebase to understand where similar logic is implemented.** 
+You can find a full listing of the files in the `files-explainer.md` file.
+
+When adding a new feature, follow these steps:
+
 1. **Plan:** Decide where your logic belongs (backend controller, frontend JS, etc).
 2. **Backend:** Add/modify controllers, services, and routes as needed. Use NocoDB API via the service layer.
 3. **Frontend:** Add/modify JS modules in `/public/js`. Update HTML/CSS as needed.
diff --git a/map/app/public/css/modules/apartment-marker.css b/map/app/public/css/modules/apartment-marker.css
index 503b544..eb48046 100644
--- a/map/app/public/css/modules/apartment-marker.css
+++ b/map/app/public/css/modules/apartment-marker.css
@@ -1,15 +1,22 @@
 /* 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;
+    background: transparent !important;
+    border: none !important;
+    transition: transform 0.1s ease-in-out;
 }
 
 .apartment-marker {
     width: 100%;
     height: 100%;
-    border-radius: 0; /* Square shape */
+    border-radius: 0 !important; /* Square shape */
+    box-sizing: border-box;
+    cursor: pointer;
+    transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
+}
+
+.apartment-marker:hover {
+    transform: scale(1.1);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.4) !important;
 }
 
 /* Style for when a marker is being moved */
diff --git a/map/app/public/js/external-layers.js b/map/app/public/js/external-layers.js
index e5122dc..338211e 100644
--- a/map/app/public/js/external-layers.js
+++ b/map/app/public/js/external-layers.js
@@ -126,14 +126,36 @@ async function loadEdmontonData(force = false) {
             const geoJsonLayer = L.geoJSON(result.data, {
                 pointToLayer: (feature, latlng) => {
                     const isMultiUnit = feature.properties.isMultiUnit;
-                    return L.circleMarker(latlng, {
-                        radius: Math.max(3, Math.min(6, currentZoom - 10)),
-                        fillColor: isMultiUnit ? "#ff6b35" : "#ba001e", // Orange for multi-unit buildings
-                        color: "#ffffff",
-                        weight: isMultiUnit ? 2 : 1,
-                        opacity: 0.9,
-                        fillOpacity: 0.7
-                    });
+                    
+                    if (isMultiUnit) {
+                        // Use a custom HTML marker for multi-unit buildings (square)
+                        const size = Math.max(12, Math.min(24, (currentZoom - 10) * 2));
+                        const icon = L.divIcon({
+                            className: 'multi-unit-marker',
+                            html: `<div class="apartment-marker" style="
+                                width: ${size}px; 
+                                height: ${size}px; 
+                                background-color: #ff6b35; 
+                                border: 2px solid #ffffff;
+                                border-radius: 0;
+                                box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+                            "></div>`,
+                            iconSize: [size, size],
+                            iconAnchor: [size/2, size/2],
+                            popupAnchor: [0, -size/2]
+                        });
+                        return L.marker(latlng, { icon: icon });
+                    } else {
+                        // Use circle marker for single units (round, red)
+                        return L.circleMarker(latlng, {
+                            radius: Math.max(3, Math.min(6, currentZoom - 10)),
+                            fillColor: "#ba001e",
+                            color: "#ffffff",
+                            weight: 1,
+                            opacity: 0.9,
+                            fillOpacity: 0.7
+                        });
+                    }
                 },
                 onEachFeature: (feature, layer) => {
                     const props = feature.properties;