Graham McIntire
0b0718e047
LocationMap hook now adds a togglable grid layer (matching the contact map pattern) so the rover-location detail page shows the standard Maidenhead overlay alongside the marker.
107 lines
3.2 KiB
TypeScript
107 lines
3.2 KiB
TypeScript
import type { ViewHook } from "phoenix_live_view"
|
|
import { updateGridOverlay } from "./maidenhead_grid"
|
|
|
|
interface LocationMapHook extends ViewHook {
|
|
map: L.Map
|
|
marker: L.CircleMarker
|
|
gridLayer: L.LayerGroup
|
|
gridVisible: boolean
|
|
visibilityHandler: (() => void) | null
|
|
}
|
|
|
|
export const LocationMap: Partial<LocationMapHook> = {
|
|
mounted(this: LocationMapHook) {
|
|
const lat = parseFloat(this.el.dataset.lat || "0")
|
|
const lon = parseFloat(this.el.dataset.lon || "0")
|
|
|
|
const osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
|
maxZoom: 19
|
|
})
|
|
const satellite = L.tileLayer(
|
|
"https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
|
|
{ maxZoom: 21, maxNativeZoom: 19 }
|
|
)
|
|
const topo = L.tileLayer("https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png", {
|
|
maxZoom: 17
|
|
})
|
|
|
|
const map = L.map(this.el, {
|
|
center: [lat, lon],
|
|
zoom: 16,
|
|
zoomControl: true,
|
|
attributionControl: false
|
|
})
|
|
this.map = map
|
|
|
|
satellite.addTo(map)
|
|
|
|
L.control.layers(
|
|
{ "Satellite": satellite, "OSM": osm, "Topo": topo },
|
|
{},
|
|
{ position: "topright", collapsed: false }
|
|
).addTo(map)
|
|
|
|
this.marker = L.circleMarker([lat, lon], {
|
|
radius: 8,
|
|
color: "#ffffff",
|
|
weight: 2,
|
|
fillColor: "#ef4444",
|
|
fillOpacity: 0.95,
|
|
pane: "markerPane"
|
|
}).addTo(map)
|
|
this.marker.bindPopup(`${lat.toFixed(6)}, ${lon.toFixed(6)}`)
|
|
|
|
// Maidenhead grid overlay + toggle
|
|
this.gridLayer = L.layerGroup().addTo(map)
|
|
this.gridVisible = true
|
|
updateGridOverlay(map, this.gridLayer)
|
|
map.on("moveend", () => {
|
|
if (this.gridVisible) updateGridOverlay(map, this.gridLayer)
|
|
})
|
|
|
|
const GridToggle = L.Control.extend({
|
|
options: { position: "topright" as const },
|
|
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)
|
|
|
|
// LiveView reconnect / tab visibility — Leaflet needs invalidateSize.
|
|
this.visibilityHandler = () => {
|
|
if (document.visibilityState === "visible") this.map.invalidateSize()
|
|
}
|
|
document.addEventListener("visibilitychange", this.visibilityHandler)
|
|
|
|
setTimeout(() => map.invalidateSize(), 50)
|
|
},
|
|
|
|
reconnected(this: LocationMapHook) {
|
|
this.map?.invalidateSize()
|
|
},
|
|
|
|
destroyed(this: LocationMapHook) {
|
|
if (this.visibilityHandler) {
|
|
document.removeEventListener("visibilitychange", this.visibilityHandler)
|
|
this.visibilityHandler = null
|
|
}
|
|
this.map?.remove()
|
|
}
|
|
}
|