graham/prop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Render rover grid overlay above coverage using custom pane

Browse source
This commit is contained in:
Graham McIntire 2026-04-07 17:25:57 -05:00
parent 286910752f
commit 941182ce7b
2 changed files with 21 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
assets/js/maidenhead_grid.js
View file

@ -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)
}
}
}

12
assets/js/rover_map_hook.js
View file

@ -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)