From f73221e5cc38524ec30973f9d24f5dadcc50f7f1 Mon Sep 17 00:00:00 2001
From: Deco Vander <deco@deco.sh>
Date: Thu, 3 Jul 2025 01:34:39 -0400
Subject: [PATCH] Add custom map icons for persistent vs. temporary reports
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Created custom map markers with distinct colors and symbols:
  - 🔒 Green circles with lock icon for persistent reports
  - ⚠️ Red circles with warning icon for temporary reports
- Updated popup text to indicate persistent status
- Applied consistent styling to both MapBox and Nominatim versions
- Enhanced visual distinction between report types on the map
---
 public/app-mapbox.js | 39 ++++++++++++++++++++++++++++++++++++---
 public/app.js        | 39 ++++++++++++++++++++++++++++++++++++---
 2 files changed, 72 insertions(+), 6 deletions(-)

diff --git a/public/app-mapbox.js b/public/app-mapbox.js
index db9a451..7e36150 100644
--- a/public/app-mapbox.js
+++ b/public/app-mapbox.js
@@ -46,15 +46,48 @@ document.addEventListener('DOMContentLoaded', async () => {
         currentMarkers = [];
     };
 
+    // Create custom icons for different report types
+    const createCustomIcon = (isPersistent = false) => {
+        const iconColor = isPersistent ? '#28a745' : '#dc3545'; // Green for persistent, red for temporary
+        const iconSymbol = isPersistent ? '🔒' : '⚠️'; // Lock for persistent, warning for temporary
+        
+        return L.divIcon({
+            className: 'custom-marker',
+            html: `
+                <div style="
+                    background-color: ${iconColor};
+                    width: 30px;
+                    height: 30px;
+                    border-radius: 50%;
+                    border: 3px solid white;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 14px;
+                    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+                    cursor: pointer;
+                ">${iconSymbol}</div>
+            `,
+            iconSize: [30, 30],
+            iconAnchor: [15, 15],
+            popupAnchor: [0, -15]
+        });
+    };
+
     const showMarkers = locations => {
         clearMarkers();
         
-        locations.forEach(({ latitude, longitude, address, description, created_at }) => {
+        locations.forEach(({ latitude, longitude, address, description, created_at, persistent }) => {
             if (latitude && longitude) {
                 const timeAgo = getTimeAgo(created_at);
-                const marker = L.marker([latitude, longitude])
+                const isPersistent = !!persistent;
+                const persistentText = isPersistent ? '<br><small><strong>📌 Persistent Report</strong></small>' : '';
+                
+                const marker = L.marker([latitude, longitude], {
+                    icon: createCustomIcon(isPersistent)
+                })
                     .addTo(map)
-                    .bindPopup(`<strong>${address}</strong><br>${description || 'No additional details'}<br><small>Reported ${timeAgo}</small>`);
+                    .bindPopup(`<strong>${address}</strong><br>${description || 'No additional details'}<br><small>Reported ${timeAgo}</small>${persistentText}`);
                 currentMarkers.push(marker);
             }
         });
diff --git a/public/app.js b/public/app.js
index 8e4f13d..421bfdb 100644
--- a/public/app.js
+++ b/public/app.js
@@ -26,16 +26,49 @@ document.addEventListener('DOMContentLoaded', () => {
         currentMarkers = [];
     };
 
+    // Create custom icons for different report types
+    const createCustomIcon = (isPersistent = false) => {
+        const iconColor = isPersistent ? '#28a745' : '#dc3545'; // Green for persistent, red for temporary
+        const iconSymbol = isPersistent ? '🔒' : '⚠️'; // Lock for persistent, warning for temporary
+        
+        return L.divIcon({
+            className: 'custom-marker',
+            html: `
+                <div style="
+                    background-color: ${iconColor};
+                    width: 30px;
+                    height: 30px;
+                    border-radius: 50%;
+                    border: 3px solid white;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 14px;
+                    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+                    cursor: pointer;
+                ">${iconSymbol}</div>
+            `,
+            iconSize: [30, 30],
+            iconAnchor: [15, 15],
+            popupAnchor: [0, -15]
+        });
+    };
+
     const showMarkers = locations => {
         // Clear existing markers first
         clearMarkers();
         
-        locations.forEach(({ latitude, longitude, address, description, created_at }) => {
+        locations.forEach(({ latitude, longitude, address, description, created_at, persistent }) => {
             if (latitude && longitude) {
                 const timeAgo = getTimeAgo(created_at);
-                const marker = L.marker([latitude, longitude])
+                const isPersistent = !!persistent;
+                const persistentText = isPersistent ? '<br><small><strong>📌 Persistent Report</strong></small>' : '';
+                
+                const marker = L.marker([latitude, longitude], {
+                    icon: createCustomIcon(isPersistent)
+                })
                     .addTo(map)
-                    .bindPopup(`<strong>${address}</strong><br>${description || 'No additional details'}<br><small>Reported ${timeAgo}</small>`);
+                    .bindPopup(`<strong>${address}</strong><br>${description || 'No additional details'}<br><small>Reported ${timeAgo}</small>${persistentText}`);
                 currentMarkers.push(marker);
             }
         });