GeoHearo [Updated]
A rebuilt audio-based geography guessing game with a modern mapping stack.
Over winter break, I rebuilt GeoHearo, my radio-based geo-guessing game. It’s rebuilt from the ground up to be more beautiful, more feature-rich, and more mobile friendly.
The core concept of the game remains unchanged: a mystery country is chosen at random, you pan through five radio stations, and the game provides hints to steer you in the right direction.
The new version introduces a Wordle-like daily challenge. This relies on some clever tricks. I have a jumbo JSON file with 30,000 stations linked to their countries. A function picks a random country and five random stations from that country, using today’s date as a seed to ensure the same country and stations are used for everyone on a given day. Then, the data for just those specific stations is pulled from the jumbo JSON using ranged fetch requests.
The new version also makes use of sliding panels to compactly show all necessary data and controls on mobile devices.
It also swaps out the old D3/DataMaps approach for MapLibre GL JS, which provides smooth WebGL-rendered maps, better interactivity, and a much more polished experience on mobile devices.
- Tools and technologies: VueJS, MapLibre GL, GeoJSON, HTML/CSS/TypeScript, Netlify, SupaBase, Go.
- Skills showcase: Web app development, interactive web mapping, spatial data manipulation, API design, and database management.