Gotta Catch 'Em All: gamify your city discovery📍
The famous gnomes of Wrocław are making a special appearance in Prague with an exciting online treasure hunt game! In this adventure, players need to physically visit the locations on the map to win. Are you up for the challenge?
TECH-NO-LO-GIC
Our goal when we embarked on this case study was to explore how technology could enhance the experience of young travellers as they discover new cities. We really wanted to incorporate as many different formats as possible—video, sound, text, and stories—the more, the merrier! We wanted to offer our tech-savvy travellers a rich yet authentic way to uncover the city's hidden gems, all while giving them the freedom to explore based on their own interests and preferences.
Our solution? A digital treasure hunt game! In our special version, users must visit each real world location to earn rewards. This gamified experience features the famous gnomes of Wrocław as the precious collectible tokens, a modest tribute to the city where we first began developing our app (read all about it here). The actual game, however, takes place in Prague—where we hosted our latest annual USE-IT meeting.
It's not a bug, it's a feature
Our project is packed with unique features. Users can spot gnomes scattered across the city—but here's the twist: only when they're within 15 metres of each location (thanks to real-time mobile tracking) does a carefully curated piece of content unlock, earning them a point. Our app is clever, too—even if users switch between tabs in the browser or hop into different apps on their mobile device, the score stays safe in the browser's memory. These special touches led us to go for a custom-coded approach for our case study, given all the personalisation we needed to build.
What's in your toolbox?
To bring our online game to life, we had to weave together a few different tools. First up, we used Mapotic, a no-code web mapping solution, as our back-end—essentially, the home for all the data that powers our app. It’s where we store the points of interest that pop up on the map. For us, it’s a fantastic tool that allows us to create a customisable and flexible database, storing everything from location details to links for images and videos featured in the front end.
Speaking of the front end, our app’s user interface heavily relies on Leaflet.js, an open-source JavaScript library and one of the most popular web-mapping tools around. With Leaflet, we’ve got markers, information popups, icons, and even customisable buttons—all wrapped up neatly, making development a breeze! We also sweet-talked team Křižík, who developed the interactive map for the Prague USE-IT meeting, into letting us use the custom basemap they created with MapTiler, a tile server that allows for beautifully customised basemaps.
To connect the back end with the front end, we used a nifty JavaScript feature called AJAX, along with a bit of “vanilla” JavaScript (that’s just plain JS, no fancy libraries) to tweak the app’s behaviour and grab users’ real-world locations from the browser. And, of course, we used CSS to style the various web components.
USE-IT, DIG-IT, TEST IT!
We’re almost there! But before our exciting launch, we need to make sure our shiny new web app works perfectly across different web browsers, operating systems, and devices. We check that the app’s appearance is spot on, that there are no performance hiccups, and that everything behaves just as it should.
Have you tested it? Did it run smoothly? Brilliant! It’s time for deployment! We used GitHub Pages as our deployment environment. GitHub is a popular collaborative tool that allows team members to work together on code and track changes using a version control technology called Git. It’s a fantastic platform to showcase and share your open-source projects with the world, and the best part—it lets you host your website for free!