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 if (grid.length < 2 || drawnSet.has(grid)) return
drawnSet.add(grid) 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 c.south > bounds.getNorth() || c.north < bounds.getSouth()) return
const field = precision <= 2 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( layerGroup.addLayer(L.rectangle(
[[c.south, c.west], [c.north, c.east]], [[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]) 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 len = field ? 2 : 4
const text = grid.substring(0, len) const text = grid.substring(0, len)
const fs = Math.max(10, Math.min(14, Math.round(px / (len * 1.2)))) 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, interactive: false,
icon: L.divIcon({ icon: L.divIcon({
className: "grid-label", 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)], iconSize: [Math.round(len * fs * 0.8), Math.round(fs * 1.5)],
iconAnchor: [Math.round(len * fs * 0.4), Math.round(fs * 0.75)] 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() gridLayer.clearLayers()
const drawn = new Set() const drawn = new Set()
const bounds = map.getBounds() const bounds = map.getBounds()
const zoom = map.getZoom() const zoom = map.getZoom()
const showSquares = zoom >= 7 const showSquares = zoom >= 7
const pane = opts && opts.pane
const south = Math.max(bounds.getSouth(), -90) const south = Math.max(bounds.getSouth(), -90)
const north = Math.min(bounds.getNorth(), 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) { for (let lat = fS; lat < fN; lat += 10) {
const nLon = ((lon % 360) + 540) % 360 - 180 const nLon = ((lon % 360) + 540) % 360 - 180
const g = new GridSquare(lat + 5, nLon + 10).encode(4).substring(0, 2) 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 return
@ -116,7 +121,7 @@ export function updateGridOverlay(map, gridLayer) {
for (let lat = sE; lat < nE; lat += 1) { for (let lat = sE; lat < nE; lat += 1) {
const nLon = ((lon % 360) + 540) % 360 - 180 const nLon = ((lon % 360) + 540) % 360 - 180
const g = new GridSquare(lat + 0.5, nLon + 1).encode(4) 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 maxZoom: 19
}).addTo(map) }).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.map = map
this.stationMarkers.addTo(map) this.stationMarkers.addTo(map)
this.coverageLayer.addTo(map) this.coverageLayer.addTo(map)
this.gridLayer.addTo(map) this.gridLayer.addTo(map)
// Draw grid and update on pan/zoom // Draw grid and update on pan/zoom
updateGridOverlay(map, this.gridLayer) updateGridOverlay(map, this.gridLayer, { pane: "gridPane" })
map.on("moveend", () => { map.on("moveend", () => {
if (this.gridVisible) updateGridOverlay(map, this.gridLayer) if (this.gridVisible) updateGridOverlay(map, this.gridLayer, { pane: "gridPane" })
}) })
this.handleEvent("stations_updated", ({ stations }) => { this.handleEvent("stations_updated", ({ stations }) => {
@ -37,13 +42,14 @@ export const RoverMap = {
this.handleEvent("coverage_updated", ({ grids }) => { this.handleEvent("coverage_updated", ({ grids }) => {
this.renderCoverage(grids) this.renderCoverage(grids)
if (this.gridVisible) updateGridOverlay(map, this.gridLayer, { pane: "gridPane" })
}) })
this.handleEvent("toggle_grids", ({ show }) => { this.handleEvent("toggle_grids", ({ show }) => {
this.gridVisible = show this.gridVisible = show
if (show) { if (show) {
this.gridLayer.addTo(this.map) this.gridLayer.addTo(this.map)
updateGridOverlay(this.map, this.gridLayer) updateGridOverlay(this.map, this.gridLayer, { pane: "gridPane" })
} else { } else {
this.gridLayer.clearLayers() this.gridLayer.clearLayers()
this.map.removeLayer(this.gridLayer) this.map.removeLayer(this.gridLayer)