Publicado por: 0

MapPuzzle.xyz es una web experimento, desarrollada con React y Deck.gl. Es una forma accesible de aprender cartografía, a través de este proyecto trato de ofrecer una experiencia interactiva de aprendizaje con mapas.

Descripción del juego

Contamos con una lista en el lateral izquierdo de la pantalla, con la lista de piezas del puzzle que dependiendo del mapa, podrán ser países, estados, ciudades, provincias, etc. Cada pieza cartográfica se muestra con una ilustración del mapa, al hacer click sobre ella, esta sigue el ratón y habrá que buscar su equivalencia en el mapa.

También cuenta con un contador de piezas encontradas, piezas a buscar y de fallos cometidos.

Puedes jugarlo en http://mappuzzle.xyz/

Idea

Desde el 2012, si no recuerdo mal, tenia pensado hacer un juego de puzzles mapas, algo parecido al trabajo de puzzles interactivos que hice para el Instituto Geográfico Nacional de España en 2006, que hasta hace poco mantenían en su web aún.

Pero aquellos eran otros tiempos, en la web dominaba la interactividad en Flash, actualmente algo obsoleto, pero que en su momento era una gran herramienta para desarrollar interfaces. Hoy en día, la tecnología ha evolucionado y el usuario demanda más interactividad, por lo que busque mecanismos que permitieran traducir la interactividad de Flash a HTML5 y JavaScript, precisamente en este contexto encontré la librería Deck.gl de Vis.gl, una librería que nos permite generar mapas interactivos en web.

Estuve barajando usar Unity 3D para hacer el juego, hice algunas pequeñas pruebas, pero tampoco me convención, quería algo más generalista, por lo que necesitaba que fuera web, no una aplicación que tuvieras que instalar.

Pensé hacerlo desde 0, con Javascript y Svg e hice algunas pequeñas pruebas, pero el trabajo por hacer era demasiado grande, además quería conseguir que el proceso para incorporar nuevos mapas fuera algo rápido.

Descripción del código

El código fuente está disponible en Github, tiene una estructura básica de un proyecto React y Deck.gl, es decir, un archivo mappuzzle.js donde se definen las dependencias, el código y las funciones correspondientes a la interfaz y otro archivo que contiene la configuración para Deck.gl.

El archivo mappuzzle.js inicializa la aplicación y tiene una lista de dependencias que se instalan al inicio de la aplicación, también es el encargado de conectar Deck.gl, por lo que en este archivo encontramos las funciones para inicializar la librería y cargar las imágenes de los mapas. La interfaz en muestro el mapa y una lista de piezas del puzzle que se extraen de la configuración del archivo content.json, este archivo es el encargado de definir los parámetros de la aplicación, como el nombre de los puzzles y los ficheros GeoJson de los mapas.

Puedes descargarlo en:

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

Deck.gl

Deck.gl es una librería gratuita, desarrollada por Vis.gl y cuenta con una API de código abierto y una documentación bien explicada. Se trata de una librería de visión de datos geográficos, una alternativa a la de Mapbox y otras librerías. Se basa en WebGL y se encarga de la renderización de mapas, además cuenta con una API de desarrollo que permite generar mapas interactivos, Deck.gl se encarga de generar las capas de mapas, la interfaz de usuario y el control de la movilidad del usuario.

React

React es un framework de desarrollo de interfaces web, creado por Facebook y que se basa en componentes JAVS. Los componentes de React son modularizados, esto quiere decir que son entidades funcionales e independientes.