Skigebiete auf der Karte
Ein Projektkatalog mit 95 Gebieten in mehreren Ländern und Informationen zu Pisten und Höhenlage.
Web-Prototyp · Reise & Karten
Skifoan
Das nächste Skigebiet. Auf einer gemeinsamen Karte.
Eine interaktive Web-App zum Entdecken und Vergleichen von Skigebieten. React und Leaflet verbinden eine Karte mit Gebietsdetails, Anreise und Unterkunftssuche. Der Projektstand enthält einen vorbereiteten Katalog mit 95 Skigebieten und Unterkunftsdaten aus einem zwischengespeicherten Snapshot.
- Plattformen
- Web
01 · Die Idee
Wofür die App
entstanden ist.
Die Aufgabe
Ein Skigebiet lässt sich nicht nur nach einem Namen auswählen. Karte, Pisten, Höhenlage, Anreise und passende Unterkunft müssen zusammen betrachtet werden, ohne zwischen mehreren Listen wechseln zu müssen.
Die Umsetzung
Die React-Oberfläche legt Gebietsdaten und Unterkünfte auf eine gemeinsame Leaflet-Karte. Bei näherem Zoom werden konkrete Unterkunftsstandorte sichtbar. Ein eigener Datenabgleich bereitet veröffentlichte Unterkunftskoordinaten und Preisoptionen als lokal verwendbaren Snapshot auf.
02 · Funktionen
Was die App
möglich macht.
Unterkunftsebene
Konkrete Unterkünfte werden bei näherem Zoom an ihren gespeicherten Koordinaten eingeblendet.
Flexible Reiseplanung
Reisezeitraum, Aufenthaltsdauer und Gruppengröße grenzen passende gespeicherte Angebote ein.
Anreise
Startortsuche, Fahrtdistanzen und Fahrzeiten über Geocoding und Routing.
Pisten & Lifte
OpenSnowMap-Kartenebene auf Basis von OpenStreetMap.
Nachvollziehbare Angebote
Treffer beziehen sich auf belegte Preisoptionen und verlinken das zugehörige Angebot.
03 · Einblicke
Direkt
aus der App.
Browser-Aufnahmen der lokal gestarteten React-App mit dem im Projekt vorhandenen Daten-Snapshot.
04 · Technik
Die Technik
dahinter.
- Programmiersprachen
- JavaScript
- Plattformen
- Web
- Technologien
- React · Vite · Leaflet · OpenStreetMap · OSRM · SnowTrex-Snapshot
So ist die Anwendung aufgebaut
- 01React UI und Planungszustand
- 02Leaflet Karte · Marker · Ebenen
- 03Lokaler Gebiets- und Unterkunfts-Snapshot
- 04Geocoding · Routing · Angebotslinks
Daten vorab zusammenführen
Ein Synchronisierungsskript bereitet Unterkunftskoordinaten und Preisoptionen für die App auf.
Zoom als Informationshierarchie
Gebiete und Unterkünfte erscheinen in der passenden räumlichen Detailstufe.
Zeitfenster exakt abgleichen
Gespeicherte Angebote müssen mit konkreten An- und Abreisedaten in das gewählte Fenster passen.
05 · Entwicklung
Von der Oberfläche
bis zum System.
Kartenoberfläche
React-Komponenten und Leaflet-Ebenen für Gebiete, Unterkunftsmarker und Auswahl.
Datensnapshot
Ein separater Import bereitet Unterkunftsdaten und Wochenpreise vor.
Vergleich
Reiseparameter und Routing ergänzen die räumliche Auswahl.