Graham McIntire
a95d2ada52
- Beacon map defaults to just the marker at zoom 11. A daisyUI toggle switch shows/hides the estimated-coverage cell layer; the coverage info line and tier legend are hidden unless the toggle is on. - Beacon detail list replaced with a compact dl grid (2-4 columns). Lat/lon rounded to 5 decimals, power/height/beamwidth formatted via Beacon.format_mw/1 so no more "2.5e3" scientific notation or "280.0". format_mw/1 hoisted onto the schema so index and show share it. - About page no longer uses prose classes (this project doesn't load @tailwindcss/typography). Headings, lists, and paragraphs now use explicit utility classes so they render as intended.
85 lines
2.4 KiB
JavaScript
85 lines
2.4 KiB
JavaScript
export const BeaconMap = {
|
|
mounted() {
|
|
const lat = parseFloat(this.el.dataset.lat)
|
|
const lon = parseFloat(this.el.dataset.lon)
|
|
const label = this.el.dataset.label || ""
|
|
const onTheAir = this.el.dataset.onTheAir === "true"
|
|
const cells = JSON.parse(this.el.dataset.cells || "[]")
|
|
const step = parseFloat(this.el.dataset.gridStep || "0.125")
|
|
const initialShowCoverage = this.el.dataset.showCoverage === "true"
|
|
|
|
const map = L.map(this.el, {
|
|
zoomControl: true,
|
|
attributionControl: false,
|
|
scrollWheelZoom: false
|
|
}).setView([lat, lon], 11)
|
|
|
|
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
|
maxZoom: 19
|
|
}).addTo(map)
|
|
|
|
// Build the coverage cell layer up-front but keep it off the map until
|
|
// the user toggles it on. Using a single layerGroup keeps pan/zoom fast.
|
|
const cellLayer = L.layerGroup()
|
|
const half = step / 2.0
|
|
const allBounds = []
|
|
|
|
for (const c of cells) {
|
|
const sw = [c.lat - half, c.lon - half]
|
|
const ne = [c.lat + half, c.lon + half]
|
|
const rect = L.rectangle([sw, ne], {
|
|
color: c.color,
|
|
weight: 0,
|
|
fillColor: c.color,
|
|
fillOpacity: 0.55,
|
|
interactive: true
|
|
})
|
|
rect.bindTooltip(
|
|
`${c.label}<br>${c.rx_dbm} dBm<br>${c.distance_km} km · score ${c.score}`,
|
|
{sticky: true}
|
|
)
|
|
rect.addTo(cellLayer)
|
|
allBounds.push(sw, ne)
|
|
}
|
|
|
|
// Beacon marker on top.
|
|
const markerColor = onTheAir ? "#16a34a" : "#94a3b8"
|
|
const markerFill = onTheAir ? "#22c55e" : "#cbd5e1"
|
|
L.circleMarker([lat, lon], {
|
|
radius: 7,
|
|
color: markerColor,
|
|
fillColor: markerFill,
|
|
fillOpacity: 1.0,
|
|
weight: 2
|
|
}).addTo(map).bindTooltip(label, {
|
|
permanent: true,
|
|
direction: "top",
|
|
offset: [0, -10]
|
|
})
|
|
|
|
const showLayer = () => {
|
|
if (!map.hasLayer(cellLayer)) cellLayer.addTo(map)
|
|
if (allBounds.length > 0) {
|
|
map.fitBounds(L.latLngBounds(allBounds), {padding: [20, 20]})
|
|
map.setZoom(map.getZoom() + 2)
|
|
}
|
|
}
|
|
|
|
const hideLayer = () => {
|
|
if (map.hasLayer(cellLayer)) map.removeLayer(cellLayer)
|
|
map.setView([lat, lon], 11)
|
|
}
|
|
|
|
if (initialShowCoverage) showLayer()
|
|
|
|
this.handleEvent("toggle_coverage", ({show}) => {
|
|
if (show) {
|
|
showLayer()
|
|
} else {
|
|
hideLayer()
|
|
}
|
|
})
|
|
|
|
setTimeout(() => map.invalidateSize(), 50)
|
|
}
|
|
}
|