Published by: 0

MapPuzzle.xyz is an experimental website, developed with React and Deck.gl. It is an accessible way to learn cartography, through this project I try to offer an interactive learning experience with maps.

Description of the game

We have a list on the left side of the screen, with the list of puzzle pieces which, depending on the map, could be countries, states, cities, provinces, etc. Each map piece is shown with an illustration of the map. When you click on it, it follows the mouse and you will have to look for its equivalent on the map.

It also has a counter of pieces found, pieces to be searched for and faults committed.

You can play it at http://mappuzzle.xyz/

Idea

Since 2012, if I remember correctly, I was planning to make a map puzzle game, something similar to the interactive puzzle work I did for the Spanish National Geographic Institute in 2006, which until recently they still had on their website.

But those were other times, the web was dominated by Flash interactivity, nowadays a bit obsolete, but at that time it was a great tool to develop interfaces. Today, technology has evolved and the user demands more interactivity, so I looked for mechanisms that would allow translating Flash interactivity into HTML5 and JavaScript. It was precisely in this context that I found the Vis.gl Deck.gl library, a library that allows us to generate interactive maps on the web.

I was considering using Unity 3D to make the game, I did some small tests, but I didn’t want to be conventional either, I wanted something more generalist, so I needed it to be web, not an application that you had to install.

I thought about doing it from 0, with Javascript and Svg, and I did some small tests, but the work to be done was too big, and I also wanted to make the process to incorporate new maps a bit fast.

Code description

The source code is available on Github, it has a basic structure of a React project and Deck.gl, that is, a mappuzzle.js file where the dependencies, code and functions corresponding to the interface are defined and another file that contains the configuration for Deck.gl.

The mappuzzle.js file initializes the application and has a list of dependencies that are installed at the beginning of the application, it is also in charge of connecting Deck.gl, so in this file we find the functions to initialize the library and load the map images. The interface shows the map and a list of puzzle pieces that are extracted from the configuration of the content.json file, this file is in charge of defining the parameters of the application, such as the name of the puzzles and the GeoJson files of the maps.

You can download it at:

https://github.com/alexwing/MapPuzzle.gl

Deck.gl

Deck.gl is a free library, developed by Vis.gl and has an open source API and well explained documentation. It is a geographic data view library, an alternative to Mapbox and other libraries. It is based on WebGL and is in charge of map rendering. It also has a development API that allows for the generation of interactive maps; Deck.gl is in charge of generating the map layers, the user interface and the control of user mobility.

React

React is a web interface development framework, created by Facebook and based on JAVS components. React’s components are modularized, this means that they are functional and independent entities.