Vue, mapbox y precios de la gasolina

Vue, mapbox y precios de la gasolina

Buscando por internet entre los cientos de api rest y datos abiertos que existen, encontré uno muy interesante y que debido a la situación actual creo que puede ser de gran utilidad.

Se trata de un servicio que te ofrece el precio de todos los combustibles de las mas de 10.000 gasolineras que se encuentran ubicadas en España.

En principio iba a realizar una pequeña aplicación usando Vue 2 junto algún junto algún framework CSS para mostrar los datos en una tabla.

Finalmente descarte el uso de un framework CSS, ya que mi intención era probar la librería mapbox y ver que se puede hacer.

Que es mapbox y nuestra aplicación

Mapbox es una librería de mapas similar a leaflet  openlayers, pero esta además te permite usarla con unity, que es un impresionante motor 3d para crear videojuegos.

La aplicación es bastante sencilla ya que nos permite tener un listado completo de todas las gasolineras de España y su ubicación en el mapa.

Algunas de las funcionalidades que he añadido son:

  • Un pequeño filtro que te permite indicar la provincia sobre la cual quieres filtrar los datos.
  • Mostrar información sobre el icono del mapa cuando pulsamos sobre el.
  • La clásica paginación sobre todos los resultados, para hacer mas ligero el contenido.
  • Rotación del mapa en 3D usando el botón secundario del ratón.

gasolineras España

Para finalizar, si quieres probar la aplicación puedes pulsar aquí y acceder a ella directamente.