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

ADSB

Browse Source
This commit is contained in:
Zakary Timson
2026-06-22 00:02:16 -04:00
parent 2c8666db56
commit 2e5227f679
9 changed files with 635 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,5 @@
<script setup lang="ts">
import type {AirTrafficLayer} from '@/services/airtraffic.ts';
import { onMounted, onUnmounted, ref, watch } from 'vue'
import Map from 'ol/Map'
import View from 'ol/View'
@@ -17,55 +18,32 @@ import 'ol/ol.css'
const props = defineProps<{ dark: boolean }>()
const mapEl = ref<HTMLDivElement>()
const OWM_KEY = import.meta.env.VITE_OWM_API_KEY || ''
const showOverlays = ref(false)
const atActive = ref(true)
// Nautical miles to meters
const NM = 1852
const OVERLAYS = [
{
id: 'rain',
label: 'Rain',
icon: '🌧️',
url: (ts: number) => `https://tilecache.rainviewer.com/v2/radar/${ts}/256/{z}/{x}/{y}/4/1_1.png`,
needsTs: true,
},
{
id: 'clouds',
label: 'Clouds',
icon: '☁️',
url: () => `https://tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?appid=${OWM_KEY}`,
needsTs: false,
},
{
id: 'wind',
label: 'Wind',
icon: '💨',
url: () => `https://tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?appid=${OWM_KEY}`,
needsTs: false,
},
{
id: 'temp',
label: 'Temp',
icon: '🌡️',
url: () => `https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=${OWM_KEY}`,
needsTs: false,
},
{
id: 'pressure',
label: 'Pressure',
icon: '📊',
url: () => `https://tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png?appid=${OWM_KEY}`,
needsTs: false,
},
{ id: 'rain', label: 'Rain', icon: '🌧️', url: (ts: number) => `https://tilecache.rainviewer.com/v2/radar/${ts}/256/{z}/{x}/{y}/4/1_1.png`, needsTs: false },
{ id: 'clouds', label: 'Clouds', icon: '☁️', url: () => `https://tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?appid=${OWM_KEY}`, needsTs: false },
{ id: 'wind', label: 'Wind', icon: '💨', url: () => `https://tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?appid=${OWM_KEY}`, needsTs: false },
{ id: 'temp', label: 'Temp', icon: '🌡️', url: () => `https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=${OWM_KEY}`, needsTs: false },
{ id: 'pressure', label: 'Pressure', icon: '📊', url: () => `https://tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png?appid=${OWM_KEY}`, needsTs: false },
]
const activeOverlays = ref<Set<string>>(new Set(['rain']))
const activeOverlays = ref<Set<string>>(new Set([]))
const radarTs = ref(Math.floor(Date.now() / 1000))
const overlayLayers: {[key: string]: any} = {}
let map: Map
let stationLayer: VectorLayer<VectorSource>
let radarInterval: ReturnType<typeof setInterval>
let airTraffic: AirTrafficLayer
function toggleAT() {
atActive.value ? airTraffic.hide() : airTraffic.show()
atActive.value = !atActive.value
}
function buildBaseLayer(dark: boolean) {
return new TileLayer({
@@ -90,12 +68,11 @@ function buildOverlayLayer(id: string): TileLayer<XYZ> {
}
function buildStationLayer(lat: number, lon: number, dark: boolean): VectorLayer<VectorSource> {
const center = fromLonLat([lon, lat])
const source = new VectorSource()
const ringColor = dark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.18)'
const ringStroke = dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.35)'
const center = fromLonLat([lon, lat])
const source = new VectorSource()
const ringColor = dark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.18)'
const ringStroke = dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.35)'
// Rings at 50, 100, 150, 200 nm
for (const nm of [50, 100, 150, 200]) {
const ring = new Feature(new CircleGeom(center, nm * NM))
ring.setStyle(new Style({
@@ -105,7 +82,6 @@ function buildStationLayer(lat: number, lon: number, dark: boolean): VectorLayer
source.addFeature(ring)
}
// Station dot
const dot = new Feature(new Point(center))
dot.setStyle(new Style({
image: new CircleStyle({
@@ -123,10 +99,7 @@ function toggleOverlay(id: string) {
if (activeOverlays.value.has(id)) {
activeOverlays.value.delete(id)
const layer = overlayLayers[id]
if (layer) {
map.removeLayer(layer);
delete overlayLayers[id];
}
if (layer) { map.removeLayer(layer); delete overlayLayers[id] }
} else {
activeOverlays.value.add(id)
const layer = buildOverlayLayer(id)
@@ -148,13 +121,15 @@ onMounted(() => {
controls: [],
})
airTraffic = new AirTrafficLayer(map)
airTraffic.show()
for (const id of activeOverlays.value) {
const layer = buildOverlayLayer(id)
overlayLayers[id] = layer
map.addLayer(layer)
}
// Refresh radar every 5 min
radarInterval = setInterval(() => {
radarTs.value = Math.floor(Date.now() / 1000)
const layer = overlayLayers['rain']
@@ -165,17 +140,30 @@ onMounted(() => {
}, 5 * 60 * 1000)
})
onUnmounted(() => clearInterval(radarInterval))
onUnmounted(() => {
clearInterval(radarInterval)
airTraffic.hide()
})
watch(() => props.dark, dark => {
map.getLayers().setAt(0, buildBaseLayer(dark))
// Rebuild station layer with correct colors
map.removeLayer(stationLayer)
const lat = (current.value.gps_lat as number) || 0
const lon = (current.value.gps_lon as number) || 0
stationLayer = buildStationLayer(lat, lon, dark)
map.addLayer(stationLayer)
})
watch(() => current.value, () => {
const lat = (current.value.gps_lat as number) || 0
const lon = (current.value.gps_lon as number) || 0
map.getView().animate({ center: fromLonLat([lon, lat]), duration: 500 })
map.removeLayer(stationLayer)
stationLayer = buildStationLayer(lat, lon, props.dark)
map.addLayer(stationLayer)
})
</script>
<style scoped lang="scss">
@@ -192,21 +180,7 @@ watch(() => props.dark, dark => {
height: 100%;
}
.overlay-toggles {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 100;
background: var(--surface);
border-radius: 99px;
padding: 6px 10px;
box-shadow: 0 2px 12px rgba(0,0,0,0.2);
backdrop-filter: blur(8px);
}
// Shared button style
.overlay-btn {
display: flex;
align-items: center;
@@ -229,15 +203,76 @@ watch(() => props.dark, dark => {
&:hover:not(.active) { background: var(--hover); }
}
// Desktop bar
.overlay-toggles {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 100;
background: var(--surface);
border-radius: 99px;
padding: 6px 10px;
box-shadow: 0 2px 12px rgba(0,0,0,0.2);
backdrop-filter: blur(8px);
}
// Mobile layers menu
.layers-menu {
position: absolute;
bottom: 16px;
right: 16px;
z-index: 100;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.layers-btn {
padding: 8px 14px;
border-radius: 99px;
border: 1.5px solid var(--border);
background: var(--surface);
color: var(--text);
font-size: 13px;
cursor: pointer;
backdrop-filter: blur(8px);
box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
.layers-dropdown {
display: flex;
flex-direction: column;
gap: 6px;
background: var(--surface);
border-radius: 12px;
padding: 8px;
box-shadow: 0 2px 12px rgba(0,0,0,0.2);
backdrop-filter: blur(8px);
}
// Visibility switching
.desktop { display: flex; }
.mobile { display: none; }
@media (max-width: 768px) {
.desktop { display: none; }
.mobile { display: flex; }
}
</style>
<template>
<div class="map-wrap">
<div ref="mapEl" class="map-el" />
<div class="overlay-toggles">
<!-- Desktop toggles -->
<div class="overlay-toggles desktop">
<button
v-for="o in OVERLAYS"
:key="o.id"
v-for="o in OVERLAYS" :key="o.id"
class="overlay-btn"
:class="{ active: activeOverlays.has(o.id) }"
@click="toggleOverlay(o.id)"
@@ -245,5 +280,25 @@ watch(() => props.dark, dark => {
{{ o.icon }} {{ o.label }}
</button>
</div>
<!-- Mobile layers button + dropdown -->
<div class="layers-menu mobile">
<button class="layers-btn" @click="showOverlays = !showOverlays">
⚙️ Layers
</button>
<div v-if="showOverlays" class="layers-dropdown">
<button
v-for="o in OVERLAYS" :key="o.id"
class="overlay-btn"
:class="{ active: activeOverlays.has(o.id) }"
@click="toggleOverlay(o.id)"
>
{{ o.icon }} {{ o.label }}
</button>
<button class="overlay-btn" :class="{ active: atActive }" @click="toggleAT">
✈️ Traffic
</button>
</div>
</div>
</div>
</template>