Nico Bodmer

Back to work

Geo quiz

Find places on an unlabelled aerial map. Scored by distance.

Year
2026
Role
Idea, design and implementation
Type
Web app
Technology
Vite, TypeScript, Leaflet, OpenStreetMap data, swisstopo aerial imagery, GitHub Actions, GitHub Pages
Geo quiz on desktop, an unlabelled aerial map of a village with the question where the church of St. Mauritius is
bodmer7.github.io/segberike, question 1 of 8

Starting point

You know your own region from the bike and the train window. On a blank map you still cannot find it.

Goal

A quiz for my circle of friends that shows how well you really know your own village.

Approach

  1. Data: Places and streets come from OpenStreetMap and are filtered and clipped to the village by script, not maintained by hand.
  2. Map: Leaflet shows swisstopo aerial imagery without labels, plus the outline of the village.
  3. Game: You tap a place, confirm and see the distance and your points.
  4. Publishing: On every push, GitHub Actions builds the app and deploys it to GitHub Pages.

Decisions

  • Aerial imagery instead of a street map. Without labels you have to find your way by roofs, fields and woods.
  • Distance instead of right or wrong. The closer to the right spot, the more points.
  • Eight questions per round. Short enough for a quick break.
  • Data by script. Changes in OpenStreetMap reach the game with a new run.

Result

A live web app with eight questions per round and its own logo. You can play it right here below.

Geo quiz, embedded live

Loads the quiz directly from GitHub Pages. Your IP address is sent to the host.

Open in a new tab (external link)

Technology

Vite, TypeScript, Leaflet, OpenStreetMap data, swisstopo aerial imagery, GitHub Actions, GitHub Pages

What I learned

Working with geodata means handling sources and licences carefully. And automatic deployment via GitHub Actions saves time with every change.