Country Recall - How Well Do You Know the World?
How to Play
If you enjoy geography quizzes, map challenges, or just perusing a map of the world, then you need to play Country Recall. This brand new interactive geography game asks a deceptively simple question: How many of the world’s countries can you identify on an unlabelled map?
Type a country into Country Recall and - if you’re right - it will instantly light up on the world map. The goal is to name every country on Earth, watching the map fill piece by piece as your map of the world grows.
To keep you motivated, Country Recall tracks your progress in real time. A counter at the top shows how many countries you’ve identified and what percentage of the world you’ve successfully named. A panel of doughnut charts breaks down your performance continent by continent, so you can see how well you're doing in Europe compared to Africa, or whether Asia is holding you back. All your progress is automatically saved in your browser, so you can close the page and return later without losing your score.
There’s also a reset option if you ever want to start again with a black map.
How the Map Works
Under the hood, Country Recall is powered by MapLibre GL JS, which renders a world map and highlights each country as the player names it. The map itself is an OpenFreeMap base layer that has been styled in Maputnik (mainly to remove the country place-name labels).
1. Loading the Data
When the map initializes, the game loads two GeoJSON datasets:
- A world polygon dataset containing the borders of 177 countries.
- A label point dataset with precomputed centroids for placing country names cleanly on the map.
These two datasets are added as MapLibre sources and layers, including a transparent base layer for all countries and a special “selected countries” layer used to color in the correct answers.
2. Matching Country Names
Players type a country into the input bar. When they press Enter, the game:
- Converts the input to lowercase
- Compares it (case-insensitively) to each feature’s `name`, `name_en`, `name_de`, and `admin` fields
- If a match is found, that country is added to the list of “clicked” countries
If no match is found, the input briefly flashes red.
3. Highlighting the Country on the Map
Once a country is correctly named, the script updates the “selected-countries” GeoJSON source. The matching polygon is added to this layer, causing it to appear in orange on the map.
Labels are placed by pulling the corresponding point from the label-point file. If none exists, a Turf.js centroid is used as a fallback.
4. Tracking Progress by Continent
The game stores progress in `clickedCountriesByContinent`, a dictionary of Sets. Each Set contains the country names the player has correctly entered.
Every time a new country is added:
- The appropriate continent’s Set grows
- A continent doughnut chart updates to show the new percentage
- A number in the center of the chart displays the precise progress
5. Global Progress Counter
A counter at the top shows:
- Total named countries
- Percentage of the world completed
These values update instantly after each correct guess.
6. Saving and Restoring Progress
To make the game persistent, it uses `localStorage`:
- Every correct guess triggers a save of the current state
- On page reload, the game restores:
- All guessed countries
- All continent progress
- The highlighted map features
- All labels and chart values
This means players can leave and come back without losing their progress in the game.



Comments