MapPuzzle.xyz

MapPuzzle.xyz is a map puzzle game. You drag a piece — a province, a state, a county — to where it belongs, and learn where that was along the way. It started as an experiment with React and Deck.gl and it is now 70 maps, more than 2,300 pieces, and a flags quiz on 49 of them.

You can play at mappuzzle.xyz.

Where it comes from

In 2006 I built a set of interactive puzzles for Spain's National Geographic Institute. They were made in Flash, which is what there was, and they sat on their website working perfectly well for years. Then Flash died, and that work went with it: there is no way to open it today, and no way to get it back.

That, underneath everything, is why this project exists. Around 2012 I started thinking about rebuilding it, with a condition I could not have put into words then and can now: it should not depend on anything that could disappear. No browser plugin, no installer, no app store. A web page, and that is all.

I considered Unity and got as far as some tests, but it wanted me to install something, and I wanted the opposite: something that opens anywhere. I also tried writing it from scratch in JavaScript and SVG, and that is where I ran into the thing that really decides a project like this — the game is built once, but the maps are built seventy times. If adding a new one meant an afternoon of manual work, the project would die on its own. Looking for a way to draw interactive maps in the browser I found Deck.gl, and with it the missing piece.

The same loss is behind the other thing I care about here: the game is free, asks for no account, and keeps nothing about whoever plays it. No sign-ups, no personal data, no scoreboards on a server. What it knows about you lives in your browser. That is deliberate, and not only for privacy: the less a thing needs in order to run, the longer it will keep running.

How it plays

On one side, the list of pieces with their silhouettes; on the other, the map. You pick up a piece, it follows the cursor, and you drop it where you think it goes. The scoreboard keeps count of what you have found, what is left and what you got wrong. Maps can be filtered by continent and region, so you can go from the borders of the world to the districts of Seville.

Two things make it more than a dragging game. First: when you place a piece you can open its Wikipedia article without leaving the game, and read about the place you have just found. Second: the piece names are translated into dozens of languages, so you can play the map of Japan with the names in Japanese, or in Greek, and pick up how those places are called elsewhere.

Maps whose regions have flags of their own also get a Flags Quiz: a waving flag and six options to work out whose it is.

How it is built

The game is React with Deck.gl, which draws the maps over WebGL, and it installs from the browser itself if you want to play offline.

What gets published is static files and a small read-only PHP gateway over a SQLite file: no Node.js on the server, nothing to administer. Ordinary hosting, and that modesty is on purpose, for the reason above.

The map editor lives apart, which is where the real work happens and which only runs on my own machine. It reads the new map's shapefiles, pulls the links, flags and translations from Wikipedia, and works out what the game needs to know about each piece. Because of that, adding a map is a matter of minutes — which was the condition everything else depended on.

The code is at github.com/alexwing/MapPuzzle.gl, under an MIT licence.

Where it stands

Seventy maps, 2,371 pieces, 1,871 of them linked to their Wikipedia article, and more than 73,000 names translated into 40 languages. The interface is in seven, each with an address of its own, so the Spanish or the German version can be linked to directly.

It keeps growing slowly, a map at a time, which is the pace something made for the pleasure of it deserves.

Support the project

Seventy maps are a lot of evenings, and the game charges for none of them: no ads, no accounts, nothing stored about whoever plays. If it has been useful to you —or to someone you handed it to while they were learning geography— you can support it through GitHub Sponsors. What that funds is time, which is exactly what the next map takes.