Swiss Nature Explorer

Der Bund publiziert die Geodaten vollständig: swisstopo benennt in swissNAMES3D jeden Gipfel und Bergsee, das BAFU führt Schutzgebiete und das Bundesinventar BLN, das ASTRA das Wanderwegnetz. Was fehlt, ist die Anwendung, die daraus Orientierung macht. Wir haben sie gebaut: 8'373 benannte Naturorte, geclustert auf einer Vektorkarte, gezeichnet ausschliesslich aus offiziellen Quellen, in vier Sprachen.

Jede Kamerabewegung berechnet das freie Sichtfeld aus der aktuellen Verdeckung durch Blatt oder Seitenleiste und rahmt das Ziel per fitBounds in genau diesem Rest. Das Padding ist auf die Canvas-Grösse geklemmt, eine Anfrage kann also nie mehr Platz verlangen, als der Bildschirm hat. Distanz steuert das Tempo: Ein Ort im Bild bekommt ein 450-ms-Ease, ein Ort jenseits des Rands einen 900-ms-flyTo. Die Berührung folgt eigenen Regeln: Zoom nur über Pinch, die 3D-Neigung auf einem expliziten, umkehrbaren Bedienelement, und eine Treffertoleranz von 22 Pixeln, weil eine Fingerkuppe ungenauer trifft als ein Cursor.

Ein Bedienelement kippt die Karte aus der Aufsicht in ein geneigtes 3D-Terrain. Das Höhenmodell gibt den Bergen ihre Form, der Zustand ist jederzeit umkehrbar, und die Interaktion bleibt an einen bewussten Griff gebunden.

Für Anwendungen der öffentlichen Hand ist Barrierefreiheit rechtlich gefordert (BehiG, orientiert an WCAG). Hier ist sie strukturell gelöst: „Weniger Bewegung" ist ein Schalter in der Oberfläche und komponiert mit der Systemeinstellung, ein zweiter hebt den Kontrast von Nebentext über Satellitenbildern. Bedienelemente erfüllen 44 Pixel Zielgrösse, Listen und Kategorien tragen einen Roving-Tabindex für die Pfeiltasten-Navigation, die Suche ist eine echte ARIA-Combobox mit Live-Ansagen, ein Skip-Link führt an den Ergebnissen vorbei, jedes Kartenobjekt trägt ein gesprochenes Label. Alle Strings liegen in DE, FR, IT und EN vor, eine fehlende Übersetzung bricht den Build, statt still auf eine andere Sprache zu fallen.

Suchen oder nach Typ stöbern, ein Ort, ein Detail. Die Ergebnisse erscheinen in Sequenz, gestaffelt über die ersten sechs Karten, und die Karte behält den Kontext. Im Detail führt das seitliche Ziehen des Fotos durch die Ergebnisse in Listenreihenfolge.

Eine Codebase, zwei Layouts an der 768-Pixel-Grenze: darüber eine Seitenleiste neben der Karte, darunter eine Karte mit gestischem Blatt. Der gesamte Kartenzustand ist in der URL kodiert, jede Ansicht ist damit deep-linkbar, teilbar und als Referenz wiederherstellbar. Gebaut mit Next.js, React, MapLibre GL, Tailwind CSS, Framer Motion und Vaul.