From 941182ce7b2c61423fbb78e08ca83a3de581018b Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Tue, 7 Apr 2026 17:25:57 -0500
Subject: [PATCH] Render rover grid overlay above coverage using custom pane

---
 assets/js/maidenhead_grid.js | 19 ++++++++++++-------
 assets/js/rover_map_hook.js  | 12 +++++++++---
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/assets/js/maidenhead_grid.js b/assets/js/maidenhead_grid.js
index c7152a6d..c70248eb 100644
--- a/assets/js/maidenhead_grid.js
+++ b/assets/js/maidenhead_grid.js
@@ -46,7 +46,7 @@ export class GridSquare {
   }
 }
 
-function drawGridSquare(grid, precision, bounds, zoom, layerGroup, drawnSet, map) {
+function drawGridSquare(grid, precision, bounds, zoom, layerGroup, drawnSet, map, pane) {
   if (grid.length < 2 || drawnSet.has(grid)) return
   drawnSet.add(grid)
 
@@ -55,10 +55,12 @@ function drawGridSquare(grid, precision, bounds, zoom, layerGroup, drawnSet, map
       c.south > bounds.getNorth() || c.north < bounds.getSouth()) return
 
   const field = precision <= 2
+  const rectOpts = { color: "#E63946", weight: field ? 2.5 : 2, opacity: 0.8, fillOpacity: 0, interactive: false }
+  if (pane) rectOpts.pane = pane
 
   layerGroup.addLayer(L.rectangle(
     [[c.south, c.west], [c.north, c.east]],
-    { color: "#E63946", weight: field ? 2.5 : 2, opacity: 0.8, fillOpacity: 0, interactive: false }
+    rectOpts
   ))
 
   const sw = map.latLngToContainerPoint([c.south, c.west])
@@ -69,7 +71,7 @@ function drawGridSquare(grid, precision, bounds, zoom, layerGroup, drawnSet, map
     const len = field ? 2 : 4
     const text = grid.substring(0, len)
     const fs = Math.max(10, Math.min(14, Math.round(px / (len * 1.2))))
-    layerGroup.addLayer(L.marker([c.center.lat, c.center.lon], {
+    const markerOpts = {
       interactive: false,
       icon: L.divIcon({
         className: "grid-label",
@@ -77,16 +79,19 @@ function drawGridSquare(grid, precision, bounds, zoom, layerGroup, drawnSet, map
         iconSize: [Math.round(len * fs * 0.8), Math.round(fs * 1.5)],
         iconAnchor: [Math.round(len * fs * 0.4), Math.round(fs * 0.75)]
       })
-    }))
+    }
+    if (pane) markerOpts.pane = pane
+    layerGroup.addLayer(L.marker([c.center.lat, c.center.lon], markerOpts))
   }
 }
 
-export function updateGridOverlay(map, gridLayer) {
+export function updateGridOverlay(map, gridLayer, opts) {
   gridLayer.clearLayers()
   const drawn = new Set()
   const bounds = map.getBounds()
   const zoom = map.getZoom()
   const showSquares = zoom >= 7
+  const pane = opts && opts.pane
 
   const south = Math.max(bounds.getSouth(), -90)
   const north = Math.min(bounds.getNorth(), 90)
@@ -100,7 +105,7 @@ export function updateGridOverlay(map, gridLayer) {
       for (let lat = fS; lat < fN; lat += 10) {
         const nLon = ((lon % 360) + 540) % 360 - 180
         const g = new GridSquare(lat + 5, nLon + 10).encode(4).substring(0, 2)
-        drawGridSquare(g, 2, bounds, zoom, gridLayer, drawn, map)
+        drawGridSquare(g, 2, bounds, zoom, gridLayer, drawn, map, pane)
       }
     }
     return
@@ -116,7 +121,7 @@ export function updateGridOverlay(map, gridLayer) {
     for (let lat = sE; lat < nE; lat += 1) {
       const nLon = ((lon % 360) + 540) % 360 - 180
       const g = new GridSquare(lat + 0.5, nLon + 1).encode(4)
-      drawGridSquare(g.substring(0, 4), 4, bounds, zoom, gridLayer, drawn, map)
+      drawGridSquare(g.substring(0, 4), 4, bounds, zoom, gridLayer, drawn, map, pane)
     }
   }
 }
diff --git a/assets/js/rover_map_hook.js b/assets/js/rover_map_hook.js
index dcae3f6a..80f98736 100644
--- a/assets/js/rover_map_hook.js
+++ b/assets/js/rover_map_hook.js
@@ -19,15 +19,20 @@ export const RoverMap = {
       maxZoom: 19
     }).addTo(map)
 
+    // Custom pane so grid lines render above coverage fills
+    map.createPane("gridPane")
+    map.getPane("gridPane").style.zIndex = 450
+    map.getPane("gridPane").style.pointerEvents = "none"
+
     this.map = map
     this.stationMarkers.addTo(map)
     this.coverageLayer.addTo(map)
     this.gridLayer.addTo(map)
 
     // Draw grid and update on pan/zoom
-    updateGridOverlay(map, this.gridLayer)
+    updateGridOverlay(map, this.gridLayer, { pane: "gridPane" })
     map.on("moveend", () => {
-      if (this.gridVisible) updateGridOverlay(map, this.gridLayer)
+      if (this.gridVisible) updateGridOverlay(map, this.gridLayer, { pane: "gridPane" })
     })
 
     this.handleEvent("stations_updated", ({ stations }) => {
@@ -37,13 +42,14 @@ export const RoverMap = {
 
     this.handleEvent("coverage_updated", ({ grids }) => {
       this.renderCoverage(grids)
+      if (this.gridVisible) updateGridOverlay(map, this.gridLayer, { pane: "gridPane" })
     })
 
     this.handleEvent("toggle_grids", ({ show }) => {
       this.gridVisible = show
       if (show) {
         this.gridLayer.addTo(this.map)
-        updateGridOverlay(this.map, this.gridLayer)
+        updateGridOverlay(this.map, this.gridLayer, { pane: "gridPane" })
       } else {
         this.gridLayer.clearLayers()
         this.map.removeLayer(this.gridLayer)