feat: add graticule toggle control to all Leaflet maps

Adds a bottomleft grid button (MapUtils.addGraticuleControl) to every
map in the app — Meshtastic, MeshCore, Drone, SSTV/ISS, BT Locate,
WebSDR, and Weather Satellite — defaulting to visible. The weather
satellite map's bespoke addStyledGridOverlay() is removed in favour of
the shared implementation. Also updates map-utils.css with button
styles and map-utils.js with the new addGraticuleControl() method.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

static/js/modes/bt_locate.js

@@ -213,6 +213,7 @@ const BtLocate = (function() {
                 flushPendingHeatSync();
                 scheduleMapStabilization();
             });
+            if (typeof MapUtils !== 'undefined') MapUtils.addGraticuleControl(map);
         }
 
         // Init RSSI chart canvas

static/js/modes/drone.js

@@ -50,6 +50,7 @@ var DroneMode = (function () {
                 maxZoom: 19,
             }).addTo(_map);
         }
+        if (typeof MapUtils !== 'undefined') MapUtils.addGraticuleControl(_map);
     }
 
     function _connectSSE() {

static/js/modes/meshcore.js

@@ -330,6 +330,8 @@ const MeshCore = (function () {
                 Settings.registerMap(_map);
             }).catch(e => console.warn('MeshCore: Settings init failed, using fallback tiles:', e));
         }
+
+        if (typeof MapUtils !== 'undefined') MapUtils.addGraticuleControl(_map);
     }
 
     function _updateMapMarker(node) {

static/js/modes/meshtastic.js

@@ -16,9 +16,9 @@ const Meshtastic = (function() {
 
     // Map state
     let meshMap = null;
-    let meshMarkers = {};  // nodeId -> marker
-    let localNodeId = null;
-    let clickDelegationAttached = false;
+    let meshMarkers = {};  // nodeId -> marker
+    let localNodeId = null;
+    let clickDelegationAttached = false;
 
     /**
      * Initialize the Meshtastic mode
@@ -33,14 +33,14 @@ const Meshtastic = (function() {
     /**
      * Setup event delegation for dynamically created elements
      */
-    function setupEventDelegation() {
-        if (clickDelegationAttached) return;
-        clickDelegationAttached = true;
-
-        // Handle button clicks in Leaflet popups and elsewhere
-        document.addEventListener('click', function(e) {
-            const tracerouteBtn = e.target.closest('.mesh-traceroute-btn');
-            if (tracerouteBtn) {
+    function setupEventDelegation() {
+        if (clickDelegationAttached) return;
+        clickDelegationAttached = true;
+
+        // Handle button clicks in Leaflet popups and elsewhere
+        document.addEventListener('click', function(e) {
+            const tracerouteBtn = e.target.closest('.mesh-traceroute-btn');
+            if (tracerouteBtn) {
                 const nodeId = tracerouteBtn.dataset.nodeId;
                 if (nodeId) {
                     sendTraceroute(nodeId);
@@ -137,6 +137,8 @@ const Meshtastic = (function() {
             }
         }
 
+        if (typeof MapUtils !== 'undefined') MapUtils.addGraticuleControl(meshMap);
+
         // Handle resize
         setTimeout(() => {
             if (meshMap) meshMap.invalidateSize();

static/js/modes/sstv.js

@@ -241,6 +241,8 @@ const SSTV = (function() {
             }
         }
 
+        if (typeof MapUtils !== 'undefined') MapUtils.addGraticuleControl(issMap);
+
         // Create ISS icon
         const issIcon = L.divIcon({
             className: 'sstv-iss-marker',

static/js/modes/weather-satellite.js

@@ -23,7 +23,6 @@ const WeatherSat = (function() {
     let groundMap = null;
     let groundTrackLayer = null;
     let groundOverlayLayer = null;
-    let groundGridLayer = null;
     let satCrosshairMarker = null;
     let observerMarker = null;
     let consoleEntries = [];
@@ -1086,8 +1085,7 @@ const WeatherSat = (function() {
                 }
             }
 
-            groundGridLayer = L.layerGroup().addTo(groundMap);
-            addStyledGridOverlay(groundGridLayer);
+            if (typeof MapUtils !== 'undefined') MapUtils.addGraticuleControl(groundMap);
 
             groundTrackLayer = L.layerGroup().addTo(groundMap);
             groundOverlayLayer = L.layerGroup().addTo(groundMap);
@@ -1145,38 +1143,6 @@ const WeatherSat = (function() {
         return segments;
     }
 
-    /**
-     * Draw a subtle graticule over the base map for a cyber/wireframe look.
-     */
-    function addStyledGridOverlay(layer) {
-        if (!layer || typeof L === 'undefined') return;
-        layer.clearLayers();
-
-        for (let lon = -180; lon <= 180; lon += 30) {
-            const line = [];
-            for (let lat = -85; lat <= 85; lat += 5) line.push([lat, lon]);
-            L.polyline(line, {
-                color: '#4ed2ff',
-                weight: lon % 60 === 0 ? 1.1 : 0.8,
-                opacity: lon % 60 === 0 ? 0.2 : 0.12,
-                interactive: false,
-                lineCap: 'round',
-            }).addTo(layer);
-        }
-
-        for (let lat = -75; lat <= 75; lat += 15) {
-            const line = [];
-            for (let lon = -180; lon <= 180; lon += 5) line.push([lat, lon]);
-            L.polyline(line, {
-                color: '#5be7ff',
-                weight: lat % 30 === 0 ? 1.1 : 0.8,
-                opacity: lat % 30 === 0 ? 0.2 : 0.12,
-                interactive: false,
-                lineCap: 'round',
-            }).addTo(layer);
-        }
-    }
-
     function clearSatelliteCrosshair() {
         if (!groundOverlayLayer || !satCrosshairMarker) return;
         groundOverlayLayer.removeLayer(satCrosshairMarker);

static/js/modes/websdr.js

@@ -343,6 +343,7 @@ async function initWebsdrLeaflet(mapEl) {
         }
     }
 
+    if (typeof MapUtils !== 'undefined') MapUtils.addGraticuleControl(websdrMap);
     mapEl.style.background = '#1a1d29';
     return true;
 }