From 0e8bf5f848c1dfe9585b9fb0de2d061781453302 Mon Sep 17 00:00:00 2001
From: Nick Muoh <nickspirit3+github@gmail.com>
Date: Mon, 13 Apr 2026 14:53:10 +0000
Subject: [PATCH 1/2] Add reset zoom button to interactive map

- Implement custom HTML/JS control for resetting map view
- Button positioned top-right, styled to match dark theme
- Resets map to initial center [20, 0] and zoom level 2
- Includes hover effects for better UX
---
 scripts/map.py | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/scripts/map.py b/scripts/map.py
index 4bc704b7..35816332 100644
--- a/scripts/map.py
+++ b/scripts/map.py
@@ -183,8 +183,44 @@ def render(value):
         popup=folium.GeoJsonPopup(fields=["popup_html"], labels=False, parse_html=True),
     ).add_to(m)
 
+    # Add reset zoom button
+    reset_zoom_html = """
+    <div style="position: fixed; 
+                top: 10px; right: 50px; width: 36px; height: 36px; 
+                background-color: #3a3a3a; border: 2px solid #5a5a5a;
+                border-radius: 4px; z-index: 1000; cursor: pointer;
+                display: flex; align-items: center; justify-content: center;
+                font-size: 20px; color: #fff; transition: all 0.2s ease;"
+         id="resetZoomBtn"
+         title="Reset map zoom">↺</div>
+    <script>
+        document.getElementById('resetZoomBtn').addEventListener('click', function() {
+            // Access the Leaflet map instance
+            var mapElement = document.querySelector('.leaflet-container');
+            if (mapElement && mapElement.__map_data) {
+                mapElement.__map_data.setView([20, 0], 2);
+            }
+        });
+        document.getElementById('resetZoomBtn').addEventListener('mouseover', function() {
+            this.style.backgroundColor = '#4a4a4a';
+            this.style.boxShadow = '0 0 5px rgba(255,255,255,0.2)';
+        });
+        document.getElementById('resetZoomBtn').addEventListener('mouseout', function() {
+            this.style.backgroundColor = '#3a3a3a';
+            this.style.boxShadow = 'none';
+        });
+    </script>
+    """
+    
+    m.get_root().html.add_child(folium.Element(reset_zoom_html))
+
     # Save
     map_path = "assets/map.html"
     m.save(map_path)
 
     logging.info(f"Map saved as {map_path}")
+
+
+if __name__ == "__main__":
+    logging.basicConfig(level=logging.INFO)
+    generate_map()

From 6a9d9ab0fa93c4b2c486bdcf109b928ffb002548 Mon Sep 17 00:00:00 2001
From: Nick Muoh <nickspirit3+github@gmail.com>
Date: Fri, 17 Apr 2026 18:00:51 -0700
Subject: [PATCH 2/2] Fix interactive map reset zoom button

Replace non-functional reset button with proper Leaflet control

Previously, the reset button was broken (accessing non-existent properties)
and mispositioned. Now implemented as an L.Control with proper positioning
below zoom controls, consistent Leaflet styling, and working click handler.
Uses IIFE initialization with retry logic to ensure control loads correctly.
---
 scripts/map.py | 110 +++++++++++++++++++++++++++++++++++++------------
 1 file changed, 84 insertions(+), 26 deletions(-)

diff --git a/scripts/map.py b/scripts/map.py
index 35816332..ee472f14 100644
--- a/scripts/map.py
+++ b/scripts/map.py
@@ -183,36 +183,94 @@ def render(value):
         popup=folium.GeoJsonPopup(fields=["popup_html"], labels=False, parse_html=True),
     ).add_to(m)
 
-    # Add reset zoom button
-    reset_zoom_html = """
-    <div style="position: fixed; 
-                top: 10px; right: 50px; width: 36px; height: 36px; 
-                background-color: #3a3a3a; border: 2px solid #5a5a5a;
-                border-radius: 4px; z-index: 1000; cursor: pointer;
-                display: flex; align-items: center; justify-content: center;
-                font-size: 20px; color: #fff; transition: all 0.2s ease;"
-         id="resetZoomBtn"
-         title="Reset map zoom">↺</div>
+    # Add reset zoom control using a direct approach
+    # This script will be added at the end and executed immediately
+    reset_control_script = folium.Element("""
     <script>
-        document.getElementById('resetZoomBtn').addEventListener('click', function() {
-            // Access the Leaflet map instance
-            var mapElement = document.querySelector('.leaflet-container');
-            if (mapElement && mapElement.__map_data) {
-                mapElement.__map_data.setView([20, 0], 2);
+    (function() {
+        var attempts = 0;
+        var maxAttempts = 50;
+        
+        function addResetControl() {
+            attempts++;
+            
+            // Check if Leaflet is loaded
+            if (typeof L === 'undefined' || !L.Control) {
+                if (attempts < maxAttempts) {
+                    setTimeout(addResetControl, 100);
+                }
+                return;
             }
-        });
-        document.getElementById('resetZoomBtn').addEventListener('mouseover', function() {
-            this.style.backgroundColor = '#4a4a4a';
-            this.style.boxShadow = '0 0 5px rgba(255,255,255,0.2)';
-        });
-        document.getElementById('resetZoomBtn').addEventListener('mouseout', function() {
-            this.style.backgroundColor = '#3a3a3a';
-            this.style.boxShadow = 'none';
-        });
+            
+            // Define the control if not already defined
+            if (!L.Control.ResetZoom) {
+                L.Control.ResetZoom = L.Control.extend({
+                    options: { position: 'topleft' },
+                    onAdd: function(map) {
+                        var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
+                        var link = L.DomUtil.create('a', '', container);
+                        link.href = '#';
+                        link.title = 'Reset map zoom';
+                        link.innerHTML = '↺';
+                        link.style.width = '30px';
+                        link.style.height = '30px';
+                        link.style.lineHeight = '30px';
+                        link.style.textAlign = 'center';
+                        link.style.fontSize = '18px';
+                        link.style.cursor = 'pointer';
+                        
+                        L.DomEvent.on(link, 'click', function(e) {
+                            L.DomEvent.preventDefault(e);
+                            map.setView([20, 0], 2);
+                        });
+                        L.DomEvent.on(link, 'mouseover', function() {
+                            link.style.backgroundColor = '#f4f4f4';
+                        });
+                        L.DomEvent.on(link, 'mouseout', function() {
+                            link.style.backgroundColor = '';
+                        });
+                        L.DomEvent.disableClickPropagation(link);
+                        return container;
+                    }
+                });
+                L.control.resetZoom = function(opts) {
+                    return new L.Control.ResetZoom(opts);
+                };
+            }
+            
+            // Find all map divs and add the control
+            var mapDivs = document.querySelectorAll('[id^="map_"]');
+            var added = false;
+            mapDivs.forEach(function(mapDiv) {
+                var mapId = mapDiv.id;
+                if (window[mapId] && typeof window[mapId].addControl === 'function') {
+                    try {
+                        window[mapId].addControl(L.control.resetZoom());
+                        added = true;
+                    } catch(e) {
+                        // Control might already be added
+                    }
+                }
+            });
+            
+            // If we couldn't add and still have attempts, try again
+            if (!added && attempts < maxAttempts) {
+                setTimeout(addResetControl, 100);
+            }
+        }
+        
+        // Start the process
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', addResetControl);
+        } else {
+            // DOM already loaded
+            setTimeout(addResetControl, 50);
+        }
+    })();
     </script>
-    """
+    """)
     
-    m.get_root().html.add_child(folium.Element(reset_zoom_html))
+    m.get_root().html.add_child(reset_control_script)
 
     # Save
     map_path = "assets/map.html"