Test your geography knowledge with a fun game to identify the countries of the world

‍

In honor of Alex Trebek and to celebrate Geography Awareness Week, we created a fun map trivia game for everyone to test their global geography knowledge. 

At Mapbox, we echo Alex Trebek’s passion for geography and believe that when maps are fun and informative, they can transform our perspective of a topic. We hope that our digital reimagination of a country quiz is fun for all. And that the key facts and flags we show for each sovereign state and territory from the open database of human knowledge - Wikidata - can make the world feel smaller and more connected, just like Alex predicted. 

“The world is intertwined, and it’s getting smaller and smaller and smaller. Right now, the world is about the size of a cellular telephone.”

— Alex Trebek

Read on to learn how we built this, try our quiz, and tweet us @Mapbox with your scores!

How we built this

The map trivia game leverages various Mapbox tilesets, Mapbox APIs and open datasets to deliver a highly interactive web map experience.

Mapbox Studio & tilesets

Mapbox Countries for country outlines: The high resolution country polygons from the Mapbox Countries tileset is used to create outlines for every country of interest. During every trivia round, a GL expression using the target ISO 3166-1 code is applied to selectively mask the basemap for the country of interest.

The detected country location of the user is used to automatically set the worldview filters on the Mapbox Countries tileset at runtime to ensure an appropriate depiction of international boundaries for disputed areas.

Mapbox Satellite for basemap: The vibrant Mapbox Satellite basemap is used as the background to emphasize the unique geographic landforms that define every country.

Mapbox Streets for overlay labels: Mapbox Studio style components were used to quickly add overlay labels for places, natural features and points of interest to provide the user with additional context for the selected country from the Mapbox Streets tileset. During every trivia round, a GL expression using the target ISO 3166-1 code is applied at runtime to these layers and the detected user language is used to set the language used for the map labels.

Mapbox GL-JS + open source tools

Map and interface localization: Every visitor is instantly geolocated using their IP address via the FreeGeoIP API to detect their country of origin. This information along with the language settings detected from the user’s browser using the `navigator.language` variable is used to customize disputed boundaries and language used for the quiz and the map.

Frontend: The user interface is coded with Svelte, an open source JavaScript framework to create reactive web applications. Svelte allows us to easily manage the connections between the dynamic Mapbox GL-JS map, various html interface elements of the quiz and backend requests to Wikidata to deliver a highly responsive user experience.

Open data

Country facts

For every country, additional metadata and facts are queried live from the crowdsourced knowledge database of Wikidata using the Wikidata Query Service.

This includes information on the country name, flag, anthem, official languages and the capital which is requested in the user’s detected language to enable a user experience localised to the user. Any missing information can be contributed directly to Wikidata to have it updated in the quiz.

‍

Looking for more ways to celebrate Geography Awareness Week and GIS Day? We can help! For workshop materials, guest speakers, and more connect with our Community team: https://www.mapbox.com/community/