Cybernavi

v0.1 — Isometrische Navigations-PWA. Die Karte entsteht live aus OpenStreetMap-Daten (Overpass API) und wird als neonfarbenes Wireframe in echter Isometrie gerendert.

Start

npm install
npm run dev

Die App läuft unter der von Vite ausgegebenen lokalen URL (inkl. LAN-Adresse fürs Handy).

Produktion:

npm run build
npm run preview

Bedienung

• SEARCH — Suchleiste ein- oder ausblenden (/); nach „Als Ziel setzen“ blendet die Leiste aus
• SEEK — Ort, Adresse oder lat, lon suchen (Photon/Nominatim)
• Nach einer Suche unter der Markierung: Als Start setzen oder Als Ziel setzen (Ziel blendet die Suche aus und schwenkt zur Startposition)
• / — Suchfeld fokussieren
• ORTUNG — Geolocation anfordern und Kamera auf die Position setzen
• FOLGEN — Karte klebt an der Position (Pan schaltet den Modus aus)
• HDG — Kartendrehung folgt dem GPS-Kurs (Bewegungsrichtung; im Stillstand letzte Richtung)
• DIAG — Diagnosefenster (Lat/Lon/…) ein- oder ausblenden (D)
• Zahnrad (oben rechts) — Einstellungen, Größe des Kartencaches, Cache löschen
• ↺ / ↻ — Ansicht 90° drehen (Isometrie bleibt erhalten, Kompass-Follow aus)
• Maus ziehen / Touch: Karte verschieben
• Rechte Maustaste, Mittelklick oder Alt+Ziehen: frei drehen
• Zwei Finger drehen: Yaw; Pinch / Mausrad: Zoom; Shift+Mausrad: drehen
• Tasten: Q E 90° drehen, R Reset, H GPS-Kurs folgen, + - Zoom, Pfeile pan, Leertaste zentrieren, F Follow

Ohne GPS (oder bei verweigertem Zugriff) startet die Karte auf der Domplatte in Köln (50.94055, 6.95735).

Beliebigen Ort laden:

http://localhost:5173/?lat=52.5200&lon=13.4050

Stack

• Vite + TypeScript + PWA-Manifest
• Three.js (orthografische Isometrie, Bloom)
• OSM-Wege via Overpass (building, highway, railway, Gewässer)
• Ortssuche via Photon (Komoot) mit Nominatim-Fallback

Offline-Caching der Kartendaten und Routing folgen in späteren Versionen.