prop/assets/js/contact_map_hook.js
Graham McIntire ea96c93e2d
Rename QSO to Contact in UI, add higher bands, improve submit page
- All menus and UI text now say Contacts instead of QSOs
- Add 68, 122, 134, 241 GHz bands to submit form and validation
- Add info box on submit page explaining why contacts matter
- Larger submit button with icon
- Make HRRR partition migration idempotent for partial re-runs
2026-04-01 12:28:24 -05:00

41 lines
1.3 KiB
JavaScript

export const ContactMap = {
mounted() {
const pos1 = JSON.parse(this.el.dataset.pos1)
const pos2 = JSON.parse(this.el.dataset.pos2)
const lat1 = pos1.lat
const lon1 = pos1.lon || pos1.lng
const lat2 = pos2.lat
const lon2 = pos2.lon || pos2.lng
const map = L.map(this.el, {
zoomControl: true,
attributionControl: false,
scrollWheelZoom: false
})
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19
}).addTo(map)
const marker1 = L.circleMarker([lat1, lon1], {
radius: 6, color: "#2563eb", fillColor: "#3b82f6", fillOpacity: 0.9, weight: 2
}).addTo(map)
const marker2 = L.circleMarker([lat2, lon2], {
radius: 6, color: "#dc2626", fillColor: "#ef4444", fillOpacity: 0.9, weight: 2
}).addTo(map)
const station1 = this.el.dataset.station1
const station2 = this.el.dataset.station2
if (station1) marker1.bindTooltip(station1, {permanent: true, direction: "top", offset: [0, -8]})
if (station2) marker2.bindTooltip(station2, {permanent: true, direction: "top", offset: [0, -8]})
L.polyline([[lat1, lon1], [lat2, lon2]], {
color: "#6366f1", weight: 2, dashArray: "6 4", opacity: 0.8
}).addTo(map)
const bounds = L.latLngBounds([[lat1, lon1], [lat2, lon2]])
map.fitBounds(bounds, {padding: [40, 40], maxZoom: 10})
}
}