feat(rover): add Maidenhead grid-square overlay (toggle in layers control)

assets/js/rover_map_hook.ts

@@ -1,4 +1,5 @@
 import type { ViewHook } from "phoenix_live_view"
+import { updateGridOverlay } from "./maidenhead_grid"
 
 interface Station {
   callsign: string
@@ -27,6 +28,8 @@ interface RoverMapHook extends ViewHook {
   qualityLayer: L.GridLayer | null
   selectedCandidateMarker: L.CircleMarker | null
   candidatePathLayer: L.LayerGroup
+  gridLayer: L.LayerGroup
+  gridVisible: boolean
   cellLookup: Map<string, Cell>
   homeLat: number
   homeLon: number
@@ -87,6 +90,8 @@ export const RoverMap: Partial<RoverMapHook> = {
     this.qualityLayer = null
     this.selectedCandidateMarker = null
     this.candidatePathLayer = L.layerGroup()
+    this.gridLayer = L.layerGroup()
+    this.gridVisible = false
     this.cellLookup = new Map()
     this.topoLayer = null
 
@@ -119,10 +124,23 @@ export const RoverMap: Partial<RoverMapHook> = {
 
     this.layersControl = L.control.layers(
       { "OSM": this.osmLayer, "Topo": this.topoLayer },
-      { "Hillshade": this.hillshadeLayer },
+      { "Hillshade": this.hillshadeLayer, "Grid squares": this.gridLayer },
       { position: "topright" }
     ).addTo(map)
 
+    map.on("overlayadd", (e: L.LayersControlEvent) => {
+      if (e.layer === this.gridLayer) {
+        this.gridVisible = true
+        updateGridOverlay(this.map, this.gridLayer)
+      }
+    })
+    map.on("overlayremove", (e: L.LayersControlEvent) => {
+      if (e.layer === this.gridLayer) this.gridVisible = false
+    })
+    map.on("moveend", () => {
+      if (this.gridVisible) updateGridOverlay(this.map, this.gridLayer)
+    })
+
     // Silently fall back if OpenTopoMap is unreachable.
     this.topoLayer.on("tileerror", () => {
       if (!this.topoLayer) return