Swiss Nature Explorer

The federal government publishes the geodata in full: swisstopo names every peak and mountain lake in swissNAMES3D, BAFU maintains protected areas and the BLN federal inventory, ASTRA the hiking network. What is missing is the application that turns it into orientation. We built it: 8,373 named natural places, clustered on a vector map, drawn entirely from official sources, in four languages.

Every camera move computes the free viewport from the current occlusion by sheet or sidebar and frames the target in what remains, via fitBounds. The padding is clamped to the canvas, so a request can never ask for more room than the screen has. Distance sets the pace: a place already on screen gets a 450 ms ease, a place beyond the edge a 900 ms flyTo. Touch has its own rules: zoom by pinch only, 3D pitch on an explicit, reversible control, and a 22-pixel hit tolerance, because a fingertip is blunter than a cursor.

One control tilts the map from the flat overhead view into pitched 3D terrain. The elevation model gives the mountains their shape, the state is reversible at any time, and the interaction stays bound to a deliberate action.

For public-sector applications, accessibility is a legal requirement (BehiG, aligned with WCAG). Here it is solved structurally: reduced motion is a switch in the interface that composes with the operating-system setting; a second switch raises the contrast of secondary text over satellite imagery. Controls meet a 44-pixel target size, lists and categories carry a roving tabindex for arrow-key navigation, search is a true ARIA combobox with live announcements, a skip link leads past the results, and every map feature carries a spoken label. All strings ship in DE, FR, IT and EN; a missing translation fails the build rather than falling back in silence.

Search or browse by type, one place, one detail. Results arrive in sequence, staggered across the first six cards, and the map keeps its context. In the detail view, dragging the photograph sideways walks through the results in list order.

One codebase, two layouts at the 768-pixel line: above it a sidebar beside the map, below it a map with a gestural sheet. The full map state is encoded in the URL, so any view is deep-linkable, shareable and reproducible as a reference. Built with Next.js, React, MapLibre GL, Tailwind CSS, Framer Motion and Vaul.