Add Maidenhead grid overlay toggle to contact map

assets/js/contact_map_hook.js

@@ -1,3 +1,5 @@
+import { updateGridOverlay } from "./maidenhead_grid"
+
 export const ContactMap = {
   mounted() {
     const pos1 = JSON.parse(this.el.dataset.pos1)
@@ -18,6 +20,39 @@ export const ContactMap = {
       maxZoom: 19
     }).addTo(map)
 
+    // Grid overlay
+    this.gridLayer = L.layerGroup().addTo(map)
+    this.gridVisible = true
+    updateGridOverlay(map, this.gridLayer)
+    map.on("moveend", () => {
+      if (this.gridVisible) updateGridOverlay(map, this.gridLayer)
+    })
+
+    // Grid toggle control
+    const GridToggle = L.Control.extend({
+      options: { position: "topright" },
+      onAdd: () => {
+        const btn = L.DomUtil.create("button", "leaflet-bar leaflet-control")
+        btn.innerHTML = "Grid"
+        btn.title = "Toggle Maidenhead grid"
+        btn.style.cssText = "background:#fff;padding:4px 8px;font-size:12px;cursor:pointer;font-weight:600;"
+        L.DomEvent.disableClickPropagation(btn)
+        btn.onclick = () => {
+          this.gridVisible = !this.gridVisible
+          if (this.gridVisible) {
+            this.gridLayer.addTo(map)
+            updateGridOverlay(map, this.gridLayer)
+            btn.style.opacity = "1"
+          } else {
+            this.gridLayer.remove()
+            btn.style.opacity = "0.5"
+          }
+        }
+        return btn
+      }
+    })
+    new GridToggle().addTo(map)
+
     const marker1 = L.circleMarker([lat1, lon1], {
       radius: 6, color: "#2563eb", fillColor: "#3b82f6", fillOpacity: 0.9, weight: 2
     }).addTo(map)