Map game with leaflet.js

So we just got an introduction to leaflet.js and how to get base maps from CartoDB and Stamen. I wanted to make something quick out of it, I only knew how to change map themes, control zoom and change some details on the map. I thought it will be interesting to make a geography challenge by restricting the zoom level and making people guess where they were.

So here it is, SOTU, more like Guess the SOTU. You can play it here: https://kshivanku.github.io/sotu/. And find the code here: https://github.com/kshivanku/sotu

Here is how it is played:

Here is how it works:

  • This is how the data files look like:

  • The program randomly picks four states and randomly assigns one state as the correct option.
  • The lat-long of the correct option is then fed into leaflet.js to draw the map. The base map is taken from cartoDB.

  • The min and max zoom is controlled on the map so that user cannot zoom out completely
  • The reset, change country and score features are then added on top.

Play the game here: https://kshivanku.github.io/sotu/

Find complete code here: https://github.com/kshivanku/sotu

Design:

The game was designed in browser. I wanted to keep it quick and simple. I feel for such small products designing in browser makes a lot of sense. You quickly see the interaction and see whats working whats not. For example I tried a couple of interactions to take users from one question to the next, like:

  • Way1: Once the user selects an answer, the system tells if it is right or wrong in some sort of transient, snack bar kind of component which automatically goes away and new question loads.
  • Way2: User has to voluntarily click on a “Next” button to load the next question. This gives user an opportunity to absorb the right answer and still play with the map in light of knowing the right answer. This also gives more control to the user but yes, it adds an extra click.

Since I was designing in browser I quickly tested both the approaches with real users to observe their reactions. Way2 was a clear winner. Users don’t like when they are told that their answer was wrong and then automatically move to next question. This was more or less unanimous feedback. I wanted to in fact free the zoom in answer screen but couldn’t due to some technical issues. But anyway, I went with way1.

Visual Design:

Since I didn’t have much control over the fonts and color scheme of the map, I had to make the rest of the interface to work well with it. The color scheme had to be a little on the cooler side, so all the blacks and greens are a little blueish. Here is the color scheme:

Final User testing:

I gave this game to a couple of my friends to play to get some feedback on the design of the game. This is what I gathered:

  • The game is not immediately clear. A new user is treated with a graph, he knows how to navigate a graph but does not immediately get the point of the game. He has to be told that the map is at a particular point and he has to guess which state is that point in. Maybe a map pin would help (has been added since then)
  • Reset function is not all that useful. It was not well understood in the first try. Even after understanding the functionality, it was not used often. While developing I thought this was a must-have, but it seems to be only good to have.
  • The game is engaging. I tested it with 10 people, on average everyone played 12-15 times and spent 25-20 minutes without getting bored until I interrupted.

Leave a Reply