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>
This commit is contained in:
James Smith
2026-05-21 11:09:39 +01:00
parent 30a0085f1d
commit 592d11aae2
10 changed files with 137 additions and 85 deletions
+30
View File
@@ -106,6 +106,36 @@
white-space: nowrap;
}
/* --- Graticule toggle button ---
Rendered as a Leaflet control (bottomleft by default). */
.map-graticule-btn {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: rgba(7, 9, 14, 0.82);
border: 1px solid rgba(var(--accent-cyan-rgb, 74 163 255), 0.2);
border-radius: 4px;
color: rgba(var(--accent-cyan-rgb, 74 163 255), 0.45);
cursor: pointer;
padding: 0;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.map-graticule-btn:hover {
background: rgba(7, 9, 14, 0.95);
border-color: rgba(var(--accent-cyan-rgb, 74 163 255), 0.5);
color: rgba(var(--accent-cyan-rgb, 74 163 255), 0.8);
}
.map-graticule-btn.active {
background: rgba(var(--accent-cyan-rgb, 74 163 255), 0.12);
border-color: rgba(var(--accent-cyan-rgb, 74 163 255), 0.55);
color: var(--accent-cyan, #4aa3ff);
}
/* --- Dark glass popup ---
Applied via MapUtils.glassPopupOptions() className. */