Making a simple, better weather and traffic conditions map for Spain's roads
TL;DR
I made a map displaying weather and traffic road conditions for Spain that is easier to use, nicer and faster than the official Spanish Government map.
As usual (1, 2), I keep being disappointed with the Spanish Government Open Data policies.
You can check out the map here. I also shared the required code on Github.
An introduction, and a bit of ranting.
It was January 2021, and I was spending the holidays with my family in my awesome hometown of Murcia, Spain.
For you future travelers, this year was the COVID pandemic year, so things were a bit weird and traveling wasnt as easy as you whipersnappers are used to. Me and my family (two kids at the moment of writing this) would be driving back from Murcia to Lisbon, Portugal where I reside.
Additionally, this year saw record breaking snowstorms in Spain thanks to (Storm Filomena).
These two reasons meant that going back home to Lisbon from my hometown required planning, since there was a real risk of getting stuck in the car with 2 crying babies (omg Im shivering just thinking about it).
So a couple days before the travel day, I checked online to see any information on the roads.
The best resource I could find (and if there is a better resource, the fact that it cant be easily found defeats its purpose) was the official Spain Traffic Authority (DGT, Direccion General de Trafico) Map. You can check it here
Here is a screenshot of how the map looks like:
There are a few things that trigger me when I see this map:
- Slow, this map seems to be an embedded map from an internal GIS system or something, plus it has a ton of features that makes it pretty slow.
- Confusing no legend regarding event types
- Overall Ugliness, you can tell icons just jam up next to each other, and they are mostly gray, with a tiny hint of color indicating the road circulation level.
But the worst thing of all, there is no navigation search!. This means the official traffic map forces you to know the actual code of the road you are planning to drive on in order to see if there are any weather events affecting the road's state. Im not a truck driver! I don't know these names!
What I needed at that uncertain time was to be able to find out if driving from point A to Point B would go through any road that was blocked for any reason. The only way to do so with the official map was to search in google maps for driving directions and then check the DGT map for any road event.
Building a better map
Here is my version (link)
You may notice a few differences between my map and DGT map:
- fast, my map consist of a simple map, so the only loading consists of the map tiles themselves
- easy to read , my map has an actual legend that indicates what each icon means. This is Dataviz 101
- pretty, this is more of a personal opinion, but using brighter colors for the event icons makes the map more appealing, and visual appeal increases user engagement.
And most important of all, you can get see the road conditions for the trip you are planning!. Just type the origin and destination and click the button, and the map will plot the route.
Application Details
You can see the code powering the map on Github.
My initial idea was to implement the map as a 100% frontend solution, since that would keep the site from exploding if it becomes too popular, but due to CORS limitations I had to implement a simple backend to fetch the DGT road condition events.
The backend app is a FastAPI web application in charge of rendering the index page, fetching the road condition events, and geocoding the navigation search terms. It is the first time I use FastAPI, and its super easy to use and faster than other similar microframeworks (like Flask)
The map itself is a simple Leaflet map with overlaid events, when the user loads the map, an HTTP GET request fetches the official DGT road conditions data from this url , the same one the official map uses (you can check using the developer network tools on your browser).
I used httpx to perform the GET request, for no reason besides testing it, its supposed to be the next Requests.
Leaflet provides basic icons out of the box, but since I wanted to display a few different event types, I used erikflower's awesome Weather icons. These icons not only are beautiful (particularly compared to DGT's ugly ones), but also render very fast since they are not bitmaps.
I found it a bit complicated how to add custom icons, but this doc explains it nicely.
Finally, I used OpenRouteService as a geocoding package to translate the Navigation search terms into geocoordinates. It doesnt work as well as Google Maps, but its open source and Google Maps has turned a bit evil in recent times. OpenRouteService has a nice python package.
Notes
- Leaflet keeps getting better and better!, now its super easy to add custom tile providers. there are even a ton of tile providers now thanks to the awesome leaflet-providers project. For example, here is how the map looks like with a different tile provider (Stadia)
- Again and again, I come up with a nice frontend project idea that I have to implement with a backend just because of CORS. There should be a way to disable CORS for well spirited applications. Maybe prompting the user to disable CORS for a site?