Introducing the world map game

I recently decided that I needed to do something about my abysmal knowledge of geography. For me, the best way to learn anything is to start a programming project about it so… I made a world map quiz website.

Screenshot of the game

Map Game (sorry, I haven’t come up with a good name yet) is written in JavaScript (ES 2015) with Babel to compile it for older browser support. It uses Leaflet for the map component. I found a number of existing map quiz sites but most just showed an image of a particular region and I really wanted the ability to zoom and pan.

The map data is the 1:50m sovereignty data set from Natural Earth Data. I did some cleanup in QGIS to remove unnecessary detail where it would not affect the look of the map. There’s still probably a lot of room for improvement here since the map data even after compression is several megabytes which is way too big.

The game divides the world into 6 regions with North America selected by default and all countries unlabeled. The goal is to name all the countries in the current region in order to move on to the next region and eventually complete the whole world. If you get stuck there are two very basic hint features:

  1. Click “Get a Hint” in the menu to be given the first letter of a country you are missing in the selected region.
  2. Click a country on the map to be given its first letter. Click again (up to 3 times) to receive another letter.

You can switch between regions by clicking them at the top or switch to “World” where you are allowed to name countries from any region.

Also there are some sound effects when you submit a guess :)

Some additional features I’m working on to include soon:

The source code can be found on GitHub. Let me know if you have any suggestions or encounter any bugs.

Comments