Web App for social city tours

The city as a stage

The walk covers just under two kilometres, from the Surprise office on Münzgasse via Andreasplatz, Marktplatz and the town hall, across the Mittlere Brücke and along the Unterer Rheinweg to the drop-in centre for sans-papiers in Kleinbasel. At every station a chapter of its own tells the story, a good hour in all. Photos appear to the second, around 200 along the whole route. Anyone who cannot be there in person can listen to the audio walk from home.

A map that walks with you

The map shows the city centre as a photorealistic 3D model, the stations as red pins and the route as a dotted blue line, calculated along the footpaths. On site, the view follows your location and turns with your walking direction, while an arrow at the bottom shows how far it is to the next station. If you prefer a flat map, switch to 2D, and on devices with little graphics power the app starts that way straight away.

Arrive, listen, walk on

When you reach a station, it opens by itself with a short chime that you can hear even when the iPhone is on silent. A tap on “Play” starts the chapter, and you can skip ten seconds forwards or back at any time. As you walk on, the audio keeps playing in the mini player above the map, and headphone buttons and the lock screen control it too.

The stations follow a fixed order. Your progress is saved on your phone: if you stop halfway, you are welcomed back at the right station next time. Add the audio walk to your home screen and you will find it there by the Surprise pin. At the end there is a closing page of its own with thanks, further links and a call for donations.

Managed in WordPress

We built the audio walk as a WordPress plugin that runs on surprise.ngo but does without the website’s theme. Surprise manages every station itself: the location with a click on the map, chapters and photos from the media library, and for each picture the second at which it appears. All texts in the app can be changed in the backend, and after every change the plugin recalculates the route.

So that nothing stalls on the way, the app first loads only the picture that is needed right now and gets the next station ready in the background. The plugin converts the photos to WebP by itself: for the whole route that is around 10 megabytes instead of a good 60. Your location stays in the browser, and there are no cookies and no tracking.