From 91c651da48a59273a9ec579360bc982694981a11 Mon Sep 17 00:00:00 2001
From: admin <admin@thebunkerops.ca>
Date: Sun, 22 Jun 2025 19:31:44 -0600
Subject: [PATCH] removed the color legend; seemed not needed and cluttered
 view

---
 nocodb-map-viewer/app/public/css/style.css | 55 ++++++++--------------
 nocodb-map-viewer/app/public/index.html    |  6 +--
 nocodb-map-viewer/app/public/js/map.js     | 46 ++----------------
 3 files changed, 26 insertions(+), 81 deletions(-)

diff --git a/nocodb-map-viewer/app/public/css/style.css b/nocodb-map-viewer/app/public/css/style.css
index 50dca5c..0e6c77b 100644
--- a/nocodb-map-viewer/app/public/css/style.css
+++ b/nocodb-map-viewer/app/public/css/style.css
@@ -534,42 +534,6 @@ body {
     border-top: 1px solid #eee;
 }
 
-/* Map legend */
-.map-legend {
-    background-color: white;
-    padding: 10px 15px;
-    border-radius: var(--border-radius);
-    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-    font-size: 13px;
-}
-
-.map-legend h4 {
-    margin: 0 0 10px 0;
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--dark-color);
-}
-
-.legend-item {
-    display: flex;
-    align-items: center;
-    margin-bottom: 5px;
-}
-
-.legend-item:last-child {
-    margin-bottom: 0;
-}
-
-.legend-color {
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    margin-right: 8px;
-    border: 1px solid #fff;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
-}
-
 /* Responsive design */
 @media (max-width: 768px) {
     .header h1 {
@@ -586,6 +550,18 @@ body {
         font-size: 13px;
     }
     
+    /* Hide button text on mobile, show only icons */
+    .btn span.btn-text {
+        display: none;
+    }
+    
+    .btn {
+        padding: 10px;
+        min-width: 40px;
+        min-height: 40px;
+        justify-content: center;
+    }
+    
     .modal-content {
         width: 95%;
         margin: 10px;
@@ -596,6 +572,13 @@ body {
     }
 }
 
+/* Add text spans for desktop that can be hidden on mobile */
+@media (min-width: 769px) {
+    .btn span.btn-icon {
+        margin-right: 5px;
+    }
+}
+
 /* Fullscreen styles */
 .fullscreen #map-container {
     position: fixed;
diff --git a/nocodb-map-viewer/app/public/index.html b/nocodb-map-viewer/app/public/index.html
index 435bcca..5f58530 100644
--- a/nocodb-map-viewer/app/public/index.html
+++ b/nocodb-map-viewer/app/public/index.html
@@ -34,13 +34,13 @@
             <!-- Map Controls -->
             <div class="map-controls">
                 <button id="geolocate-btn" class="btn btn-primary" title="Find my location">
-                    📍 My Location
+                    <span class="btn-icon">📍</span><span class="btn-text">My Location</span>
                 </button>
                 <button id="add-location-btn" class="btn btn-success" title="Add location at map center">
-                    ➕ Add Location Here
+                    <span class="btn-icon">➕</span><span class="btn-text">Add Location Here</span>
                 </button>
                 <button id="fullscreen-btn" class="btn btn-secondary" title="Toggle fullscreen">
-                    ⛶ Fullscreen
+                    <span class="btn-icon">⛶</span><span class="btn-text">Fullscreen</span>
                 </button>
             </div>
             
diff --git a/nocodb-map-viewer/app/public/js/map.js b/nocodb-map-viewer/app/public/js/map.js
index fd825c7..7ed4912 100644
--- a/nocodb-map-viewer/app/public/js/map.js
+++ b/nocodb-map-viewer/app/public/js/map.js
@@ -59,9 +59,6 @@ function initializeMap() {
         imperial: false
     }).addTo(map);
     
-    // Add legend
-    addLegend();
-    
     // Hide loading overlay
     document.getElementById('loading').classList.add('hidden');
 }
@@ -128,41 +125,6 @@ function getSupportLevelText(level) {
     }
 }
 
-// Add legend to the map
-function addLegend() {
-    const legend = L.control({ position: 'bottomright' });
-    
-    legend.onAdd = function(map) {
-        const div = L.DomUtil.create('div', 'map-legend');
-        div.innerHTML = `
-            <h4>Support Levels</h4>
-            <div class="legend-item">
-                <span class="legend-color" style="background-color: #27ae60;"></span>
-                <span>1 - Strong Support</span>
-            </div>
-            <div class="legend-item">
-                <span class="legend-color" style="background-color: #f1c40f;"></span>
-                <span>2 - Moderate Support</span>
-            </div>
-            <div class="legend-item">
-                <span class="legend-color" style="background-color: #e67e22;"></span>
-                <span>3 - Low Support</span>
-            </div>
-            <div class="legend-item">
-                <span class="legend-color" style="background-color: #e74c3c;"></span>
-                <span>4 - No Support</span>
-            </div>
-            <div class="legend-item">
-                <span class="legend-color" style="background-color: #95a5a6;"></span>
-                <span>Not Specified</span>
-            </div>
-        `;
-        return div;
-    };
-    
-    legend.addTo(map);
-}
-
 // Set up geo field synchronization
 function setupGeoFieldSync() {
     const latInput = document.getElementById('location-lat');
@@ -516,13 +478,13 @@ function toggleAddLocation() {
     const crosshair = document.getElementById('crosshair');
     
     if (isAddingLocation) {
-        btn.textContent = '✕ Cancel';
+        btn.innerHTML = '<span class="btn-icon">✕</span><span class="btn-text">Cancel</span>';
         btn.classList.remove('btn-success');
         btn.classList.add('btn-secondary');
         crosshair.classList.remove('hidden');
         map.getContainer().style.cursor = 'crosshair';
     } else {
-        btn.textContent = '➕ Add Location Here';
+        btn.innerHTML = '<span class="btn-icon">➕</span><span class="btn-text">Add Location Here</span>';
         btn.classList.remove('btn-secondary');
         btn.classList.add('btn-success');
         crosshair.classList.add('hidden');
@@ -866,7 +828,7 @@ function toggleFullscreen() {
     if (!document.fullscreenElement) {
         app.requestFullscreen().then(() => {
             app.classList.add('fullscreen');
-            btn.textContent = '✕ Exit Fullscreen';
+            btn.innerHTML = '<span class="btn-icon">✕</span><span class="btn-text">Exit Fullscreen</span>';
             
             // Invalidate map size after transition
             setTimeout(() => map.invalidateSize(), 300);
@@ -876,7 +838,7 @@ function toggleFullscreen() {
     } else {
         document.exitFullscreen().then(() => {
             app.classList.remove('fullscreen');
-            btn.textContent = '⛶ Fullscreen';
+            btn.innerHTML = '<span class="btn-icon">⛶</span><span class="btn-text">Fullscreen</span>';
             
             // Invalidate map size after transition
             setTimeout(() => map.invalidateSize(), 300);