Simple map showing the petrol stations of Spain (using the data provided by kbsali/gasolineras-espana-data)
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
img
js
.gitignore
README.md
about.html
index.html

README.md

Spain's petrol stations prices map

Demo

See it in action : http://gasolineras.saliou.name/

What is it?

Simply shows a full screen map with a few buttons :

  • 1 to geolocate your position
  • 4 to display the petrol stations available in the area your map is centered on.
  • When clicking on any of the icons an information popup shows the name of the petrol station and the price of the selected petrol

This is to show case how to use the data generated by https://github.com/kbsali/gasolineras-espana and publicly stored in this repository : https://github.com/kbsali/gasolineras-espana-data.

There are numbers of pages and apps doing this already, but my idea was :

  • there is no need for having to install an app for doing this : it should work for any device having an internet connection and a web browser,
  • as explained here the original data provided by the ministery is, to me, not usable :
  • Zipped CSV files without any logical naming strategy is not helpful,
  • GeoJson seemed to be a raising standard!
  • to learn :
  • python https://github.com/kbsali/gasolineras-espana
  • more about JS in general and Leaflet in particular! :)

Third parties

The page uses :

  • leaflet-vector-layers for loading and plotting the data (and therefore Leaflet too),
  • Bootstrap for the css (it is reponsive and should be seen correctly on mobile devices),
  • MapQuest for the map tiles and routes,
  • and because the amount of data that needs to be downloaded can be pretty big, I use GitSpatial to only retrieve the data of the area shown on the screen.

Todo

  • add a link to the popups to show the route from your current location to the selected station
  • right now opening a popup directly loads the route
  • dynamically group the stations in 3 price groups (cheap, normal, expensive)
  • see servicios.elpais.com/gasolineras/index.html