(tengo por delante 6 horas de bus sin parar y sin comida así que voy a ver si puedo hacerlas más llevaderas escribiendo este post con el móvil)
Hace poco he publicado un nuevo petproject. Viendo la playlist de una amiga donde recogía canciones que hablan de Madrid, la capital de España, se nos ocurrió que sería interesante geoposicionarlas y compartirlo.
Así por ejemplo, hay una canción que menciona a la Puerta de Alcalá, otra a las Cibeles etc y podríamos hacer una aplicación donde se visualizaran en un mapa y así surgió https://tocamelamadriz.netlify.app
Para ello he organizado la idea en dos proyectos separados: uno destinado a que cualquiera pueda sugerir una canción y un sitio, https://github.com/jagedn/madriz-geocancione, y recopilarlas en un csv y otro que crea un mapa con ellas
El primer proyecto es muy simple. Se trata de mantener un solo fichero csv donde ir añadiendo título, autor, latitud, longitud y URL a la canción (Spotify, Deezer, YouTube ...). Lo "interesante" es que usa una plantilla de GitHub para que cualquiera pueda crear una issue como forma de colaborar
El segundo proyecto, aunque código abierto también, es más técnico. Consiste en una aplicación ( https://github.com/jagedn/tocamelamadriz) NuxtJS desplegada en Netlify con una function encargada de hacer de puente entre la aplicación y el CSV de GitHub (ahora explicaré porqué) y un simple componente de Vue que usa Leaflet para el mapa
La razón de la función lambda de Netlify es que el JavaScript que necesita los datos no puede acceder directamente a él por las restricciones CORS de GitHub así que creamos está lambda que simplemente hace de proxy
Una vez que el componente ha descargado el CSV y que tiene un mapa Leaflet creado "simplemente" le queda convertir este CSV en puntos GeoJSON y pasárselos al mapa
GeoJSON es un formato standard donde se pueden definir puntos, líneas, regiones, etc, realmente muy sencillo, así que la conversión no dejan de ser unas pocas líneas de js
Una vez tenemos el mapa con los puntos nos surgió la idea de poder crear áreas, de tal manera que cada área correspondiera a una canción. Esto es realmente fácil con la librería Turf el cual tiene un método que pasándole una lista de puntos te devuelve un geoJSON con las áreas voronoy correspondientes
Por último aprovechando las características de HTML5 de poder conocer la posición de un navegador (si el usuario concede los permisos) podemos buscar el área más cercana a dicha posición y "volar" directamente a ella
En resumen: tocamelamadriz es mi primera aproximación a librerías de mapa y creo que me queda mucho por investigar y aprender pero con proyectos como este es más divertido hacerlo
Top comments (0)