Skip to content
malte9799Public

About

Vom Wetter vor der Haustür über die Live-Weltkarte bis ins Sonnensystem – in einer App und nahtlos per Zoom verbunden.

Topics

Resources

Stars

2 stars

Watchers

0 watching

Forks

Repository files navigation

Orbis – Wetter · Erde · All

Live-Demo Datenquellen

Deploy Daten-Snapshots Letzter Commit Repo-Größe Quellen Anmeldung

TypeScript Vite MapLibre three.js GitHub Pages

Vom Wetter vor der Haustür über die Live-Weltkarte bis ins Sonnensystem – in einer App und nahtlos per Zoom verbunden.

Features · Ansichten · Ebenen · Weltall · Datenquellen · Entwicklung · Deployment


🖼️ Vorschau

Erde
🌍 Erde
Wetter, Live-Karte, Globus
Mond
🌕 Mond
LRO-Mosaik, Apollo-Landestellen
Mars
🔴 Mars
Rover-Spuren, HiRISE, CTX
Jupiter
🪐 Sonnensystem
Planeten, Monde, Raumsonden

Texturen: Solar System Scope (CC BY 4.0) · Details in den Datenquellen.

✨ Features

☁️ Wetter Aktuell, 48-h-Diagramm, 14-Tage-Vorhersage, Wind, UV, Luftqualität, Pollen, Sonnenzeiten, amtliche Warnungen (DWD, NWS)
🗺️ Live-Karte 2D oder Globus, Radar, Satellit, Vorhersage bis +3 Tage mit Zeitleiste, Windströmung, Isobaren
🌋 Ereignisse Erdbeben, Vulkane, Waldbrände, Stürme, Tsunamis, Blitze live, Polarlicht, Radioaktivität
🗳️ Wahlen Historische Wahlergebnisse je Bundesland (ab 1990), Zeitstrahl je Wahltermin, Parteien-Legende
🌊 Meeresplastik Plastikdichte weltweit und im Großen Pazifikmüllstrudel mit Zeitregler der Netzfänge seit 1972 (auch weltweit, NOAA NCEI und weitere offene Datensätze), Plastik aus Flüssen, Herkunftsländer des Strudelmülls, echte Treibbojen-Bahnen (NOAA), Treibgut-Modell (Partikel in der mittleren Strömung sammeln sich in den Müllstrudeln)
🚗 Verkehr Straßen, Staus, Blitzer & Rotlicht, Flugzeuge, Schiffe, Züge & Busse live, Raketenstarts mit Live-Tracking, Stream & Erinnerung
📷 Kameras & Radio Tausende Webcams, über 50.000 Radiosender im eingebauten Player
🧭 Route & Navigation Routenplanung für Auto, Rad und Fuß mit Alternativen und Zwischenstopps; Dienst wählbar (OSM/OSRM, Valhalla, Google Routes, Mapbox, TomTom, OpenRouteService, GraphHopper – mit automatischem Fallback). Navigation mit gefiltertem GPS, Kompass-/Kursrotation der Karte, Abbiegehinweisen, Sprachansage und automatischer Neuberechnung
🏗️ Infrastruktur Dritte Standardkarte: Kraftwerke nach Energieträger (Wind, Solar, Wasser, Kern, Kohle, Gas, Öl, Biomasse), Rohstoffvorkommen, Seekabel & Pipelines, Radio, Kameras
🗳️ Wahlen Historische Wahlergebnisse seit 1990 – gebietsfärbend nach Wahlsieger (Bundestags- und Landtagswahlen, Zeitstrahl Wahltermin für Wahltermin, Klick zeigt alle Parteien mit Stimmen und Beteiligung)
🚀 Weltall 3D-Sonnensystem, Raumsonden mit Flugbahnen, ISS & Satelliten live, Mond- und Mars-Karte mit Rovern
🔌 Ohne Anmeldung Alle Kernquellen sind kostenlos; optionale Schlüssel nur für Extras

📚 Woher kommen die Daten? Die vollständige Liste aller Quellen mit Links, Lizenzen und Verwendung: docs/DATENQUELLEN.md

🧭 Die drei Ansichten

🌦️ Vorhersage

Aktuelles Wetter, 48-Stunden-Diagramm, 14-Tage-Vorhersage, Wind, UV, Luftqualität, Pollen, Sonnenauf-/-untergang und amtliche Unwetterwarnungen (DWD für Deutschland, NWS für die USA). Ortssuche, eigener Standort und Favoriten.

🗺️ Karte

Interaktive Wetterkarte nach dem Vorbild von zoom.earth – standardmäßig 2D, per Schalter 2D / 3D auch als Globus.

  • Live-Ebenen und Vorhersage-Ebenen mit Zeitleiste (bis +3 Tage, abspielbar)
  • Animierte Windströmung, Isobaren und Naturereignisse
  • Wert unter dem Mauszeiger, Klick zeigt das Wetter an dieser Stelle

🚀 Weltall

3D-Sonnensystem (ähnlich NASA „Eyes on the Solar System“). Wer im 3D-Globus weiter herauszoomt, landet automatisch hier; Hineinzoomen auf die Erde führt zurück zur Wetterkarte.

🪐 Körper Sonne, alle Planeten, Pluto, wichtige Monde und Asteroiden mit Steckbrief, Abstand zu Sonne/Erde, Lichtlaufzeit
🛰️ Raumsonden Voyager 1/2, New Horizons, Pioneer 10/11, Parker Solar Probe, JWST, SOHO, Juno, Perseverance, Curiosity, Europa Clipper, JUICE, BepiColombo – mit Flugbahnen
🌍 Erdnähe ISS, Hubble, Wetter-, GPS-, Galileo-Satelliten live aus CelesTrak-Bahndaten
⏱️ Zeitstrahl Datum wählen, abspielen von Echtzeit bis 1 Jahr pro Sekunde (auch rückwärts)
🚩 Landestellen Flaggen an allen Mond- und Mars-Landestellen, erst ab dem Landedatum sichtbar
🗺️ Planetenkarten Mond (#/planet?body=moon) und Mars (#/planet?body=mars) wie die Erdkarte bedienbar
🔭 Weltall im Detail (Mond, Mars, Planetenkarte, 3D-Modelle, Genauigkeit)

🌕 Mond

  • Hohe Auflösung: LRO-Farbmosaik (4k/8k) mit Relief aus dem LOLA-Höhenmodell (NASA CGI Moon Kit, wird beim Deploy geladen) und beim Heranzoomen nachgeladene Kacheln des LRO-WAC-Mosaiks (≈ 100 m/Pixel, NASA Moon Trek) – Zoom bis ≈ 20 km über die Oberfläche.
  • Flaggen an allen Landestellen (Apollo 11–17, Luna, Surveyor, Chang’e, Chandrayaan-3, SLIM, Odysseus, Blue Ghost, Athena) mit Steckbrief. Direktlink z. B. #/weltall?focus=moon&site=apollo11.
  • Mondkarte (#/planet?body=moon): LRO-WAC-Mosaik, optional die farbige Reliefkarte aus LOLA/Kaguya, ~70 benannte Formationen (Meere, Becken, Krater, Gebirge, Täler – src/space/moon-features.ts, schaltbar) und alle Landestellen.
  • 3D-Modelle von Lander, Flagge und Fahrzeugen (Apollo-Landefähre und Mondauto, Surveyor, Luna/Lunochod, Chang’e/Yutu, Vikram/Pragyan, SLIM, Odysseus, Blue Ghost …) – prozedural erzeugt (src/space/surface-models.ts) und per Klick anwählbar.
  • Regionale Detailkarten (LROC-NAC-Mosaike der Landestellen, Kaguya, Geologie, Mineralien …) liest scripts/moon-products.mjs aus dem Moon-Trek-Index nach src/space/moon-products.ts; der Deploy-Workflow führt das Skript aus (optional, bei Fehlern bleibt die eingecheckte Liste). Die Mosaike liegen in „Automatisch“ über dem WAC-Mosaik.

🔴 Mars

  • Landestellen (Viking, Pathfinder, Spirit, Opportunity, Phoenix, Curiosity, InSight, Perseverance, Zhurong) mit Steckbrief.
  • Beim Heranzoomen nachgeladene Kacheln: Farbmosaik (NASA Mars Trek) und das 5-m-CTX-Mosaik (NASA/JPL/MSSS/Caltech Murray Lab, via Esri). Darüber automatisch die regionalen HiRISE-Mosaike (Jezero, Gale, Landestellen, Rover-Gebiete – bis 25 cm/px).
  • Perseverance, Curiosity und Ingenuity stehen auf der Oberfläche (aufrecht, mit dem Planeten mitdrehend); ihre Fahrspuren und die 72 Ingenuity-Flüge aus den NASA-MMGIS-Daten sind eingezeichnet und folgen der Zeitleiste (Sol, gefahrene Strecke im Steckbrief). Fahrspuren: scripts/mars-traverse.mjs (Daten-Branch, Rückfall public/data/mars-traverse.json).

🗺️ Planetenkarte

#/planet?body=mars bzw. moon – bedient sich wie die Erdkarte (MapLibre):

  • 2D-Karte oder 3D-Globus, Ziehen verschiebt, Zoom zum Mauszeiger, Ebenen-Panel, Suche und Maßstab.
  • Kartentyp-Wechsler nur mit echten Basiskarten (Automatisch, Farbmosaik, CTX ≈ 5 m, Höhe & Tiefe MOLA/HRSC, Infrarot THEMIS, HRSC-Farbmosaike am Kartenmittelpunkt). Überlagerungen (Geologie, Täler, Mineralien) und Markierungen schaltet das Ebenen-Panel; eine Leiste unten zeigt, was gerade dargestellt wird.
  • Weitere Körper aus den NASA-Trek-Portalen: Merkur (MESSENGER), Venus (Magellan), Titan, Phobos, die Galileischen Monde Io, Europa, Ganymed und Callisto sowie die Saturnmonde Mimas, Enceladus, Tethys, Dione, Rhea und Iapetus (Cassini/Voyager) und die Kleinkörper Vesta, Ceres und Ryugu (Dawn, Hayabusa2) – im Panel unter „Himmelskörper“, in der Weltall-Leiste auch als Dropdowns.
  • Relief: Mond und Enceladus erhalten im 3D-Globus ein echtes Höhenmodell (LOLA bzw. Cassini-DEM, schaltbar) statt der perfekten Kugel; die 2D-Karte schattiert es. Regionale Höhenmodelle legen sich beim Hineinzoomen automatisch darüber (Mond: Apollo-/NAC-DEMs, Mars: HRSC-, CTX- und HiRISE-DEMs). Die Meter-Werte sind angenähert (Trek liefert die Höhen als gestrecktes Graustufenbild).
  • Herauszoomen aus dem Globus bzw. das Weltall-Symbol führt ins Sonnensystem, Hineinzoomen auf den Mars von dort auf die Karte. Aus der Weltall-Ansicht öffnet sich die Mondkarte beim Heranzoomen bis dicht über die Oberfläche (openAt).
  • Rover erscheinen beim Heranzoomen als 3D-Modell, mit der Zoomstufe mitskalierend (ab ca. Zoom 7 in 2D bzw. 12 im Globus, bei sehr hoher Zoomstufe in Originalgröße; modelPx in views/planetmap.ts).
  • In der Weltall-Ansicht haben die Planeten nur ihre feste Textur; Detailkacheln gibt es nur auf der Karte (src/space/planets.ts: enabled – derzeit Erde, Mars, Mond, Merkur, Titan, Saturnmonde, Vesta und Ceres).
  • Die Trek-Produktliste stammt aus Trek selbst (scripts/mars-products.mjs → src/space/mars-products.ts) und ist kuratiert (Duplikate, sehr grobe TES-Karten und regionale CTX-/Hillshade-Fragmente entfallen). Die Quellen sind Äquirektangular-Kacheln und werden per planet://-Protokoll in Mercator-Kacheln umgerechnet.

🧊 3D-Modelle

NASA (NASA 3D Resources, frei verwendbar) und ESA für JUICE und BepiColombo (Cosmographia-Modelle aus den ESA SPICE-Daten, © ESA) für James-Webb-Teleskop, Hubble, ISS, Voyager, Pioneer, Parker Solar Probe, Juno, Perseverance/Curiosity und LRO.

  • Sie werden erst geladen, wenn man ein Objekt anwählt oder nah genug heranzoomt.
  • Die ISS erscheint zunächst klein, dann als detailliertes NASA-Modell (≈ 96 MB, beim Deploy geladen).
  • Große Modelle (Rover, JWST, Europa Clipper …) haben eine Schnellvariante (*-lite.glb), die vom Original abgelöst wird.
  • Hubble und ISS mit Live-Position.

🎯 Genauigkeit

Planetenpositionen stammen aus den JPL-Näherungsformeln (Standish, ±wenige Bogenminuten 1800–2050), der Mond aus der Näherung des Astronomical Almanac. Bahnen der Raumsonden sind vereinfacht und als „angenähert“ gekennzeichnet, da es keine kostenlose, browsertaugliche Bahndaten-API gibt. Asteroiden nutzen Bahnelemente der JPL Small-Body Database in Zweikörper-Näherung.

🗂️ Ebenen der Karte

Alle Quellen sind kostenlos und ohne Anmeldung nutzbar. Jede Quelle mit Link, Lizenz und Zweck steht in der detaillierten Datenquellen-Liste – hier die Kurzfassung:

Bereich Ebenen Quellen
🗺️ Karte Dunkel/Hell, Satellit, Sentinel-2, Topografie, NASA-Tagesbild, Tag/Nacht, 3D-Geländehöhen (nur Höhenanpassung, keine eigene Ebene) OpenFreeMap, Esri, EOX, OpenTopoMap, NASA GIBS, AWS Terrain
☁️ Wetter Wind, Böen, Temperatur, Feuchte, Niederschlag, Bewölkung, Luftdruck, Schnee, CAPE – bis +3 Tage, Windpartikel, Isobaren Open-Meteo
📡 Radar & Satellit Regenradar weltweit, DE, USA (inkl. Alaska, Hawaii, Karibik, Guam), Kanada, Finnland, Japan; Satellit Infrarot; Niederschlag RainViewer, DWD, IEM/NOAA, Environment Canada, FMI, NOAA MRMS, JMA, EUMETSAT, NASA GPM
🚨 Warnungen Unwetter DE, Bevölkerungswarnungen, Tsunami, Katastrophen DWD, NINA/BBK, NOAA, GDACS
🌋 Ereignisse Waldbrände, Hotspots, Stürme, Tornados, Vulkane, Fluten, Erdbeben (EU ab M 1,5, weltweit ab M 2,5) NASA EONET/FIRMS, USGS, EMSC, Smithsonian GVP, NIFC
🗳️ Wahlen Ergebnisse je Bundesland seit 1990, gebietsfärbend, Zeitstrahl GERDA (CC BY 4.0), deutschlandGeoJSON (BKG)
⚡ Blitze & Strahlung Blitze live (15 min), Radioaktivität (ODL, STUK Finnland, Health Canada, SSM Schweden, NUSC Taiwan, Safecast), Polarlicht/Kp, Sonnenwind Blitzortung, BfS, STUK/FMI, Health Canada, SSM, NUSC/RMC, Safecast, NOAA SWPC
🌱 Erde & Umwelt Geologie, Plattengrenzen, Rohstoffe, Landbedeckung, Vegetation, Schnee, Aerosole, Nachtlichter Macrostrat, USGS MRDS, BGR, Wikidata, ESA WorldCover, NASA GIBS
🌊 Meer & Gewässer Seegang, Strömung, Flussabfluss, Pegel, Bojen, Gezeiten, Meerestiefe, Algenblüte, Meerestemperatur, Meereis, Meeresplastik (Dichte, Müllstrudel, Flusseinträge, Herkunft), Treibbojen-Bahnen Open-Meteo Marine/Flood, PEGELONLINE, NOAA NDBC, CO-OPS, GEBCO, EMODnet, Lebreton et al. u. a. (CC BY 4.0)
✈️ Luftraum Flugzeuge, Hubschrauber, Ballone, Drohnen live; Flughäfen; Wetterballons in 3D mit Detailpanel; Raketenstarts; Satelliten adsb.lol, adsb.fi, OpenSky, SondeHub, Launch Library 2, CelesTrak
🚆 Verkehr Schiffe (AIS), Züge, Busse, Trams, U-Bahnen live; Autobahn-Staus; Blitzer & Rotlicht (ab Zoom 9); Schiffsrouten Digitraffic, Transitous, Amtraker, Entur, MBTA, SEPTA, Autobahn GmbH, OpenStreetMap
🛤️ Verkehrsnetze Straßen, Bahn (Tempo, Elektrifizierung), ÖPNV-Linien, Rad- und Wandernetz OpenStreetMap, OpenRailwayMap, Waymarked Trails
📷 Kameras Webcams weltweit (u. a. London, New York, Kalifornien, Kanada, Hongkong, Singapur, Finnland, Island, Estland, Neuseeland, NSW, Calgary), ALPR-Kameras Digitraffic, TfL, Caltrans, ALERTCalifornia, DeFlock
📻 Radio Über 50.000 Sender im Player Radio Browser
🏗️ Infrastruktur Seekabel, Internetknoten, Kraftwerke (Wind, Solar, Wasser, Kern, Kohle, Gas, Öl, Biomasse), Windräder, Pipelines Seekabel aus OpenStreetMap, PeeringDB, WRI GPPD, OSM

🔑 Optional mit kostenlosem Schlüssel

Im Ebenen-Panel unter „Erweitert“; Schlüssel werden nur im localStorage des Browsers gespeichert.

  • OpenWeatherMap → zusätzliche hochauflösende Wetterkarten
  • NASA FIRMS MAP_KEY → einzelne Feuer-Hotspots als anklickbare Punkte
  • aisstream.io → Schiffe weltweit · Windy Webcams → weltweite Webcams · Transport Victoria / CTA / Trafiklab → Melbourne, Chicago, Schweden

Der kostenlose RainViewer-Zugang ist seit 2026 auf Zoom 7 beschränkt. Unter „Erweitert“ kann ein eigener RainViewer-kompatibler Radar-Server (z. B. selbst gehostetes LibreWXR) eingetragen werden.

🛠️ Entwicklung

pnpm install
pnpm dev       # Entwicklungsserver
pnpm build     # Typecheck + Produktions-Build nach dist/
pnpm preview   # Build lokal ansehen

Technik: Vite, TypeScript (ohne Framework), MapLibre GL JS 6 mit Globus-Projektion, three.js für das Sonnensystem (wird erst beim Öffnen geladen). Die Modellfelder werden über ein eigenes Kachel-Protokoll (wxfield://) im Browser gerendert, der Wind als Partikelanimation auf einem Canvas über der Karte gezeichnet, Isobaren per Marching Squares.

Ordner Inhalt
src/views/ Ansichten: Vorhersage, Karte, Planetenkarte
src/api/ Datenabrufe (Wetter, Ereignisse, Verkehr, Kameras …)
src/globe/ Karten-Ebenen, Stil, Popups, Zeitleiste
src/space/ Sonnensystem, Ephemeriden, Mond/Mars, Raumsonden
scripts/ Daten-Snapshots, Trek-Produktlisten, Bahn- und Modell-Skripte
proxy/ Cloudflare-Worker (Daten-Proxy, Kamera-Richtungen)
docs/ Banner und Datenquellen-Liste

🚢 Deployment

Alles läuft über GitHub Actions und den Branch gh-pages (Repo-Einstellungen → Pages → Source: „Deploy from a branch“ → gh-pages / root):

Workflow Auslöser Aufgabe
deploy.yml Push auf jeden Branch baut die App; main → Seite, andere Branches → preview/<branch>/, mit Status-Kommentar im PR
pr-preview.yml PR geöffnet Status-Kommentar, falls die Vorschau schon fertig war
preview-cleanup.yml PR geschlossen, Branch gelöscht, wöchentlich entfernt nicht mehr benötigte Vorschauen
data.yml alle 15 min Daten-Snapshots im Branch data

Alle Änderungen an gh-pages laufen über scripts/gh-pages.sh, das gleichzeitige Läufe sicher zusammenführt.

☁️ Daten-Proxy (Cloudflare Worker, empfohlen)

adsb.fi und OpenSky erlauben keine Abrufe direkt aus dem Browser (CORS), adsb.lol drosselt schnell, und die öffentlichen Overpass-Server (OpenStreetMap-Ebenen) lassen pro Nutzer nur wenige Anfragen zu. Orbismap/data: workers/proxy löst das: Er ergänzt die CORS-Header und speichert Antworten zwischen (Flugdaten ~8 s, Overpass 15 min), sodass viele Besucher am selben Ort nur eine Anfrage auslösen. Auch NOAA NDBC (Messbojen) und NOAA CO-OPS (Gezeitenpegel) laufen über den Proxy; nach einem Update des Proxy-Codes muss der Worker neu deployt werden. Der kostenlose Cloudflare-Tarif erlaubt 100.000 Anfragen pro Tag.

  1. Auf dash.cloudflare.com kostenlos registrieren.
  2. Compute (Workers) → Workers & Pages → Create → Worker („Start with Hello World“), Namen vergeben (z. B. orbis-proxy) → Deploy.
  3. Edit code: den Inhalt komplett durch Orbismap/data: workers/proxy ersetzen → Deploy. Die Adresse lautet dann https://orbis-proxy.<dein-konto>.workers.dev/.
  4. Test im Browser: https://orbis-proxy.<dein-konto>.workers.dev/?url=https%3A%2F%2Fapi.adsb.lol%2Fv2%2Fpoint%2F53.55%2F10%2F25 sollte JSON mit Flugzeugen zeigen.
  5. Absichern (empfohlen): Worker → Settings → Variables and Secrets → Add → Typ Text, Name ALLOWED_ORIGINS, Wert https://malte9799.github.io,http://localhost:5173 → Deploy.
  6. Schiffe weltweit (optional): kostenlosen Schlüssel auf aisstream.io holen, im Worker unter Settings → Variables and Secrets als Secret AISSTREAM_KEY anlegen → Deploy. Der Pfad /ais leitet dann den AIS-Livestream weiter, Besucher brauchen keinen eigenen Schlüssel.
  7. Fest einbauen: im GitHub-Repo Settings → Secrets and variables → Actions → Variables → New repository variable, Name PROXY_URL, Wert = Worker-Adresse aus Schritt 3. Danach Actions → Deploy to GitHub Pages → Run workflow.

Alternativ kann jeder Nutzer eine eigene Worker-Adresse unter Einstellungen → Daten-Proxy eintragen; sie hat Vorrang vor der eingebauten. Fällt der Proxy aus, greift die App wieder direkt auf die Quellen zu.

🧭 Kamera-Richtungen (eigener Cloudflare-Worker)

Im Kamera-Panel rechts startet Auf Karte bearbeiten das Bearbeiten direkt auf der Hauptkarte: die Kamera (großer Punkt) lässt sich per Drag & Drop verschieben, der weiße Griff am Sichtkegel dreht die Blickrichtung. Im Panel stehen Richtung, Höhe, Neigung, Rollen, Sichtfeld und die Reichweite des projizierten Bildes (dahinter blendet die „Wand“ nach oben aus) als Regler und Zahlenfelder. Speichern schickt den Wert an einen eigenen Worker, den alle Besucher beim Laden der Webcams mitlesen.

  1. Cloudflare → Workers & Pages → KV → Namespace anlegen.
  2. Neuen Worker mit dem Inhalt von Orbismap/data: workers/camdir erstellen, unter Bindings den Namespace als CAMDIR einbinden.
  3. Settings → Variables and Secrets: Secret ADMIN_TOKEN (lange Zufallszeichenfolge), optional ALLOWED_ORIGINS (wie beim Daten-Proxy).
  4. Repository-Variable CAMDIR_URL = Worker-Adresse (damit alle Besucher die Korrekturen sehen), danach den Deploy neu starten.
  5. In den Einstellungen unter Webcams den Token bei „Kamera-Richtungen: Token“ eintragen – erst dann erscheint der Editor im Panel.

Mit gesetzter Pose (Neigung, Höhe, Rollen, Sichtfeld) und verschobener Position speichert der Worker sie mit; die 3D-Ansicht legt das Kamerabild dann so auf den Boden, wie die Kamera ihn sieht. Ein älterer Worker-Code speichert nur die Richtung – für Pose und Position den Worker neu deployen.

Schreiben darf nur, wer den Token kennt. Vorschläge von allen Besuchern (Moderation, Ratenbegrenzung) sind im Worker vorbereitet, aber noch nicht eingebaut.

🔔 Fahrplan: Bahn-Verspätungen & Benachrichtigungen (eigener Cloudflare-Worker)

Ein kleiner Worker (Orbismap/data: workers/push) macht für den Fahrplan zwei Dinge:

  • Verspätungen der Bahn: Die Verbindungen kommen sofort von Transitous (nur Plan-Zeiten, wo der Betreiber nichts meldet). Der Worker holt danach die genauen Verspätungen, Gleisänderungen und Ausfälle der Bahn von der offiziellen DB-Fahrplan-Schnittstelle (DB API Marketplace, „Timetables“) und die App mischt sie nachträglich in die Anzeige. Der Schlüssel liegt nur im Worker und gilt für alle Nutzer. Abgedeckt ist Schienenverkehr, den die DB-Daten kennen (Fern-, Regional-, S-Bahn); Busse und Straßenbahnen behalten die Werte von Transitous. Daten: Deutsche Bahn AG, CC BY 4.0.
  • Benachrichtigungen: Unter Fahrplan → Gemerkt → Verbindungen lässt sich pro Pendler-Verbindung „Vor der Abfahrt benachrichtigen“ einschalten (30 / 20 / 10 / 5 Minuten vorher, optional nur bei Verspätung oder Ausfall), z. B. „Dein Zug hat 14 min Verspätung (Abfahrt: 07:26 Uhr)“ – auch bei geschlossener App. Eine PWA kann im Hintergrund nicht minutengenau nachsehen, deshalb schaut der Worker per Cron in den Fahrplan und schickt eine verschlüsselte Web-Push-Nachricht (VAPID). Er fragt die Schnittstellen nur ab, wenn gerade ein Zeitpunkt fällig ist; ohne angemeldete Geräte liest er nur seinen Speicher.

Einrichtung (alles im kostenlosen Tarif):

  1. DB-Schlüssel: Auf developers.deutschebahn.com kostenlos registrieren, eine Anwendung anlegen und die API „Timetables“ (Fahrplan) abonnieren. Das ergibt Client-ID und API-Key. Die Nutzungsbedingungen und das Abfragelimit (nach meinem Stand 60 Aufrufe pro Minute für alle Nutzer zusammen, der Worker speichert Antworten zwischen) bitte dort prüfen.
  2. Push-Schlüssel erzeugen: node scripts/vapid-keys.mjs – gibt VAPID_PUBLIC und VAPID_PRIVATE aus.
  3. Cloudflare → Workers & Pages → KV → Namespace anlegen (z. B. orbis-push).
  4. Neuen Worker mit dem Inhalt von Orbismap/data: workers/push erstellen. Unter Bindings den Namespace als PUSH_KV einbinden.
  5. Settings → Variables and Secrets: Secrets DB_CLIENT_ID und DB_API_KEY (aus Schritt 1), VAPID_PUBLIC und VAPID_PRIVATE (aus Schritt 2), Text VAPID_SUBJECT (z. B. mailto:du@example.org), optional ALLOWED_ORIGINS (wie beim Daten-Proxy).
  6. Settings → Trigger Events → Cron Triggers: * * * * * (jede Minute) hinzufügen. Nur für die Benachrichtigungen nötig.
  7. Repository-Variable PUSH_URL = Worker-Adresse, danach den Deploy neu starten. Alternativ trägt jeder Nutzer die Adresse unter Einstellungen → Verkehr & Nahverkehr → Fahrplan-Worker selbst ein.
  8. In der App eine Verbindung merken, die Benachrichtigung einschalten, die Erlaubnis bestätigen und mit „Test-Nachricht senden“ prüfen.

Hinweise: Ohne die DB-Schlüssel antwortet der Worker bei den Verspätungen mit „nicht eingerichtet“, der Fahrplan zeigt dann nur Transitous. Auf dem iPhone funktioniert Web-Push nur, wenn Orbis zum Home-Bildschirm hinzugefügt wurde (iOS 16.4+). Der Worker speichert pro Gerät nur die Push-Adresse, die Verbindungen und die Zeitzone. Die Grenzen des Gratis-Tarifs (Cron jede Minute, ein KV-Eintrag, höchstens 500 Geräte und 10 Verbindungen pro Gerät) reichen für den privaten Gebrauch.

📷 Mapillary-Token für den Straßen-Rater einbauen

Ohne Token muss jeder Spieler selbst einen eintragen. Mit eingebautem Token läuft das Spiel sofort; ein im Spiel eingetragener eigener Token hat Vorrang.

  1. Auf mapillary.com/dashboard/developers eine Anwendung registrieren und den Client-Token (MLY|…) kopieren.
  2. Im GitHub-Repo Settings → Secrets and variables → Actions → Variables → New repository variable, Name MAPILLARY_TOKEN, Wert = Token. Danach Actions → Deploy to GitHub Pages → Run workflow.

Dieselbe Variable nutzt die Data-Action einmal im Monat, um die Orte mit 360°-Fotos für den Panorama-Rater zu sammeln (street/panos.json im data-Branch). Nach dem ersten Eintragen die Action Update data snapshots einmal manuell starten.

Der Token landet im ausgelieferten Code und ist damit öffentlich sichtbar. Alle Spieler teilen sich das Kontingent der Anwendung (laut Mapillary-Forum ca. 10.000 Suchanfragen/Minute, 60.000 Abrufe/Minute); die Nutzungsbedingungen von Mapillary bitte vorher prüfen.

📦 Daten-Snapshots (data-Branch)

Einige Quellen erlauben keine Abrufe direkt aus dem Browser (fehlende CORS-Header) oder sind für jeden Browser zu groß: Seekabel (weltweite OpenStreetMap-Abfrage), Vulkane (Smithsonian), Tsunami-Meldungen (NOAA), Safecast, Radio Browser und mehrere Webcam-Listen. .github/workflows/data.yml lädt sie deshalb serverseitig – live alle 15 Minuten, den Rest täglich – mit scripts/fetch-data.ts in den Branch data. Die App liest sie über raw.githubusercontent.com und fällt sonst auf die Originalquelle zurück. Der erste Lauf startet automatisch beim Push, danach per Zeitplan (oder manuell unter Actions).

Schlüssel für alle Nutzer teilen (optional): Dienste mit kostenlosem Schlüssel, deren Daten sich als Datei abbilden lassen, kann die Action mit deinem Schlüssel abrufen – er liegt dann nur als GitHub-Secret vor, nie im Browser. Unterstützt: FIRMS_MAP_KEY (weltweite, anklickbare Feuer-Hotspots) und NPS_API_KEY (Nationalpark-Webcams) TRAFIKVERKET_KEY (Straßenkameras Schweden) sowie OHGO_API_KEY, QLDTRAFFIC_KEY und die 511-Keys einzelner US-Staaten (UTAH_511_API_KEY, ARIZONA_511_API_KEY, IDAHO_511_API_KEY, NEVADA_511_API_KEY, ALASKA_511_API_KEY, GEORGIA_511_API_KEY, LOUISIANA_511_API_KEY, PENNSYLVANIA_511_API_KEY). Secret anlegen unter Settings → Secrets and variables → Actions. Ohne Secret wird die Ebene ohne Schlüssel bzw. mit dem alten Rasterbild angezeigt. Nicht für alle teilbar sind ortsabhängige oder Dauerverbindungs-Dienste (OpenWeatherMap, aisstream, Windy, Fahrzeug-Feeds) – die bleiben pro Nutzer unter Einstellungen.

🌐 Eigene Hosts für Daten, OSM-Kacheln, Wetter und Assets (optional)

Alle Basisadressen sind per Build-Variable umschaltbar (deploy.yml reicht die Repository-Variablen durch, leer = bisheriges Verhalten). Lokal gehören sie in .env.local.

Repository-Variable Build-Variable Wirkung (Standard, wenn leer)
DATA_BASE VITE_DATA_BASE Basis der Daten-Snapshots (raw.githubusercontent.com/…/data/)
LIVE_BASE VITE_LIVE_BASE schnell wechselnde Snapshots (Tsunami, Safecast, BfS-ODL, STUK-FI, Health-Canada, FIRMS, Demos); Standard: wie DATA_BASE
OSM_BASE VITE_OSM_BASE OSM-Kacheln (CCTV-Dichte, Blitzer, ALPR …); Standard: Branch data-osm
WETTER_BASE VITE_WETTER_BASE ICON-Wetterfelder (/v1/latest.json, *.owx); Standard: der bisherige Worker
ASSETS_BASE VITE_ASSETS_BASE models/, textures/, data/airports, data/incidents, data/games, data/plastik, data/drifters, data/currents; Standard: Dateien aus public/

Die Wetter-Action liest die Worker-Adresse aus WETTER_PUBLIC_URL (bisher WX_PUBLIC_URL, wird als Fallback noch gelesen).

Assets auslagern: Ist die Repository-Variable ASSETS_BUCKET gesetzt (plus die Secrets R2_ACCOUNT_ID, R2_ACCESS_KEY_ID, R2_SECRET_ACCESS_KEY), lädt der Deploy auf main diese Ordner nach R2 und entfernt sie aus dist/, bevor gh-pages geschrieben wird – auch bei Vorschauen, die dann die Assets von main nutzen. Der Bucket braucht eine CORS-Regel (GET/HEAD) für die Pages-Domain. Ohne ASSETS_BUCKET bleibt alles wie bisher in gh-pages.

Inhaltsgehashte Asset-URLs: scripts/assets-manifest.mjs (läuft als erster Schritt von pnpm build) hasht (sha256, 12 Hex) alle Dateien unter public/{models,textures,data/airports,data/incidents,data/games,data/plastik,data/drifters,data/currents} und schreibt src/generated/assets-manifest.json (models/iss.glb → models/iss.<hash>.glb; gitignored, wird bei jedem Build neu erzeugt). Nur mit VITE_ASSETS_BASE ist das Manifest gefüllt; ohne bleibt es {} und assetUrl() liefert wie bisher die Klartext-Pfade (lokales pnpm dev unverändert). Der Deploy lädt die gehashten Schlüssel auf jedem Branch hoch (nur fehlende, Cache-Control: public, max-age=31536000, immutable), die Klartext-Schlüssel (1 Tag Cache) vorerst zusätzlich auf main, damit ältere Builds/Vorschauen weiterlaufen. Später entfernen, sobald nichts Klartext-Pfade nutzt. Aufräumen (noch nicht umgesetzt): Eine R2-Lifecycle-Regel kann nur nach Alter/Präfix löschen, nicht „nicht mehr referenziert“. Sinnvoll wäre ein geplantes Skript, das die Manifeste der letzten N main-Deploys (z. B. als Release-Artefakt oder in gh-pages) vereinigt und gehashte Schlüssel löscht, die in keinem davon vorkommen und älter als einige Wochen sind.

☁️ Hosting maltee.dev/orbis (Cloudflare, parallel zu GitHub Pages)

Die App läuft zusätzlich als assets-only Worker orbis-site (wrangler.jsonc) unter https://maltee.dev/orbis/ (Route maltee.dev/orbis*); GitHub Pages bleibt unverändert, es gibt keine Weiterleitung. Statische Requests auf Workers Assets sind kostenlos; Limits: 25 MiB pro Datei, 20.000 Dateien pro Version – größere Dateien (aktuell models/europaclipper.glb) müssen über ASSETS_BUCKET/ASSETS_BASE nach R2 (siehe oben).

  • Deploy: deploy.yml führt nach dem Build und nach „Remove assets from dist“ scripts/cf-stage.sh aus (dist/ → dist-cf/orbis/, bricht bei Dateien > 25 MiB ab). Auf main folgt wrangler deploy, auf jedem anderen Branch wrangler versions upload --preview-alias <branch>.
  • Vorschauen: https://<branch>-orbis-site.malte9799.workers.dev/orbis/ (Link steht in der Job-Zusammenfassung; Alias = Branch-Name, klein, max. 52 Zeichen).
  • Secrets in malte9799/orbis: CLOUDFLARE_API_TOKEN (Berechtigung „Workers Scripts: Edit“, Zone „Workers Routes: Edit“ für maltee.dev) und CLOUDFLARE_ACCOUNT_ID. Fehlen sie, wird der Cloudflare-Schritt mit Warnung übersprungen; ein Fehler dort blockiert GitHub Pages nicht.
  • Lokal: pnpm build && bash scripts/cf-stage.sh && pnpm exec wrangler dev (dann http://localhost:8787/orbis/).
  • CORS: ALLOWED_ORIGINS (Dashboard-Variable) von Proxy-, Camdir- und Push-Worker muss https://maltee.dev enthalten (exakte Origin, kommagetrennt); für Vorschauen zusätzlich die jeweilige https://<alias>-orbis-site.malte9799.workers.dev-Origin (kein Wildcard-Matching).

ℹ️ Hinweise

  • Raster: Die Vorhersage-Ebenen basieren auf einem globalen Raster von 15° × 10° (408 Punkte, alle 3 Stunden für 3 Tage). Beim Hineinzoomen wird automatisch ein feineres Raster (bis 0,25°) für den sichtbaren Ausschnitt geladen und nahtlos eingeblendet; die Werte werden bilinear interpoliert. Taupunkt und gefühlte Temperatur werden im Browser berechnet.
  • Limits: Die kostenlosen APIs haben Nutzungslimits (Open-Meteo: 10 000 Aufrufe/Tag für nicht-kommerzielle Nutzung, jeder Rasterpunkt zählt). Alle Open-Meteo-Abrufe laufen über eine Drossel; das globale Raster wird eine Stunde im Browser zwischengespeichert.
  • Tornados: Daten gibt es nur für die USA – dort werden sie offiziell gewarnt und gemeldet.
  • Lizenzen: Einige Datensätze sind nur für nicht-kommerzielle Nutzung frei (u. a. Esri-Satellitenbild, Blitzortung.org, EOX Sentinel-2). Für eine kommerzielle Nutzung müssten diese ersetzt oder lizenziert werden.
  • Warnungen: Die Rohdaten stammen von den jeweiligen Anbietern; für Warnungen gelten immer die amtlichen Stellen.
  • Nicht zur Navigation: Meerestiefe und Schiffsdaten dienen der Information, nicht der Navigation.

Gemacht mit ☕ und viel offenen Daten · 📚 Alle Datenquellen · ▶ Live-Demo

About

Vom Wetter vor der Haustür über die Live-Weltkarte bis ins Sonnensystem – in einer App und nahtlos per Zoom verbunden.

Topics

Resources

Stars

2 stars

Watchers

0 watching

Forks

Used by

Contributors

Languages