Pequeño juego usando Vue.js y Leaflet

Aprendiendo las provincias españolas con Vue.js

Mientras preparaba una nueva entrada sobre ml5js, me llamaron para realizarme una consulta técnica sobre mapas y Javascript.

La consulta era para saber como integrar «alguna librería» de mapas en una aplicación web y si podía hacer un pequeño ejemplo.

Ahora que sabía lo que necesitaban, me puse manos a la obra y comencé a buscar información sobre diferentes librerías de mapas para Javascript y sus características.

A continuación dejo un listado con las que estuve probando:

  • Leaflet: Es la librería elegida para la POC, ya que me resulto muy completa y fácil de usar.
  • OpenLayers: Por lo que he leído es la mas antigua y creo que una de las mas potentes.
  • Mapbox.js: Muy interesante y además la están usando algunas grandes empresas como Pinterest.
  • Google Maps: Muy sencilla y fácil de integrar, pero al final toca pasar por caja.

Como había comentado, me decidí por Leaflet y solo puedo decir que es una maravilla, fácil de integrar, la documentación es bastante clara y muy completa, tiene muchos ejemplos de código y además un listado bastante extenso de plugins para extender su funcionalidad.

La POC la iba a crear usando Javascript sin usar frameworks pero me indicaron si era posible usar Vue.js, así que realice la POC usando Vue.js.

Al final decidí que esa POC fuera un pequeño juego, ya que de esta forma podía probar gran parte de las característica que me pedían y el resultado es mas entretenido que un montón de botones.

Para terminar os dejo en enlace del juego el cual podéis probar.

leafletapp

UPDATE (30/08/2022): Si alguien está interesado en el código fuente, desde aquí puede acceder al repositorio en Github.