ztimson/weather-station
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed map

Browse Source
This commit is contained in:
Zakary Timson
2026-06-21 22:35:32 -04:00
parent 65184d65c5
commit 4aa9966f17
1 changed files with 10 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
client/src/components/MapView.vue
View File

@@ -61,7 +61,7 @@ const OVERLAYS = [
const activeOverlays = ref<Set<string>>(new Set(['rain'])) const activeOverlays = ref<Set<string>>(new Set(['rain']))
const radarTs = ref(Math.floor(Date.now() / 1000)) const radarTs = ref(Math.floor(Date.now() / 1000))
const overlayLayers = new Map<string, TileLayer<XYZ>>() const overlayLayers: {[key: string]: any} = {}
let map: Map let map: Map
let stationLayer: VectorLayer<VectorSource> let stationLayer: VectorLayer<VectorSource>
@@ -95,7 +95,7 @@ function buildStationLayer(lat: number, lon: number, dark: boolean): VectorLayer
const ringStroke = dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.35)' const ringStroke = dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.35)'
// Rings at 50, 100, 150, 200 nm // Rings at 50, 100, 150, 200 nm
for (const nm of [50, 100, 150, 200]) { for (const nm of [100, 200, 300]) {
const ring = new Feature(new CircleGeom(center, nm * NM)) const ring = new Feature(new CircleGeom(center, nm * NM))
ring.setStyle(new Style({ ring.setStyle(new Style({
stroke: new Stroke({ color: ringStroke, width: 1, lineDash: [6, 4] }), stroke: new Stroke({ color: ringStroke, width: 1, lineDash: [6, 4] }),
@@ -115,29 +115,21 @@ function buildStationLayer(lat: number, lon: number, dark: boolean): VectorLayer
})) }))
source.addFeature(dot) source.addFeature(dot)
// Pulsing outer ring — just a slightly larger static ring for now
const pulse = new Feature(new Point(center))
pulse.setStyle(new Style({
image: new CircleStyle({
radius: 13,
fill: new Fill({ color: 'transparent' }),
stroke: new Stroke({ color: dark ? 'rgba(255,255,255,0.4)' : 'rgba(0,0,0,0.3)', width: 1.5 }),
}),
}))
source.addFeature(pulse)
return new VectorLayer({ source, zIndex: 20 }) return new VectorLayer({ source, zIndex: 20 })
} }
function toggleOverlay(id: string) { function toggleOverlay(id: string) {
if (activeOverlays.value.has(id)) { if (activeOverlays.value.has(id)) {
activeOverlays.value.delete(id) activeOverlays.value.delete(id)
const layer = overlayLayers.get(id) const layer = overlayLayers[id]
if (layer) { map.removeLayer(layer); overlayLayers.delete(id) } if (layer) {
map.removeLayer(layer);
delete overlayLayers[id];
}
} else { } else {
activeOverlays.value.add(id) activeOverlays.value.add(id)
const layer = buildOverlayLayer(id) const layer = buildOverlayLayer(id)
overlayLayers.set(id, layer) overlayLayers[id] = layer
map.addLayer(layer) map.addLayer(layer)
} }
} }
@@ -157,14 +149,14 @@ onMounted(() => {
for (const id of activeOverlays.value) { for (const id of activeOverlays.value) {
const layer = buildOverlayLayer(id) const layer = buildOverlayLayer(id)
overlayLayers.set(id, layer) overlayLayers[id] = layer
map.addLayer(layer) map.addLayer(layer)
} }
// Refresh radar every 5 min // Refresh radar every 5 min
radarInterval = setInterval(() => { radarInterval = setInterval(() => {
radarTs.value = Math.floor(Date.now() / 1000) radarTs.value = Math.floor(Date.now() / 1000)
const layer = overlayLayers.get('rain') const layer = overlayLayers['rain']
if (layer) { if (layer) {
const def = OVERLAYS.find(o => o.id === 'rain')! const def = OVERLAYS.find(o => o.id === 'rain')!
layer.setSource(new XYZ({ url: def.url(radarTs.value) })) layer.setSource(new XYZ({ url: def.url(radarTs.value) }))