First stop: a coffee

This notebook describes a GIS novice's first hands-on exercise with geospatial data.

My journey in the worlds of GIS and open data has only just started. I wrote about my first discoveries over at datalets.ch. It's a huge field and naturally exploring it takes a lot of time. In a software engineer like me, such exploration inevitably evokes a strong desire for coffee. So I made it the subject of my first exercise to find a good place to drink a coffee โ˜•๐Ÿ˜

After browsing available data for a while I decided to consult the traffic noise maps and overlay them with the pedestrian zones in the city of Zurich. Another goal of this exercise was to get to know Mapbox as a tool to publish maps online.

Preparing the noise map data

The noise maps are published by the Swiss Federal Office for Environment at https://www.bafu.admin.ch/bafu/en/home/topics/noise/state/maps/geodata.html. The data comes in two different formats: an ArcGIS gdb and a GeoTIFF with accompanying files. Since the gdb seems to be a proprietary format that can only be manipulated by ArcGIS, I focused on the GeoTIFF. That comes in two Swiss coordinate reference systems: LV03 and LV95.

The GeoTIFF format cannot be displayed directly with Mapbox, we need to convert it to PNG or JPEG. In addition the file size of more than 100 MB would be way more than is acceptable for a website (and apparently also for some image viewer software ๐Ÿ˜…). Since we are only interested in the city of Zurich, we can mitigate the size problem by cropping the image to that area.

So I installed the open source software QGIS (using their own software repository for Ubuntu). I found that it can import and display the GeoTIFFs just fine. The imported file is added as a layer to a (fresh) QGIS project and the coordinate reference system is automatically recognized.

Opening the file in QGIS Freshly imported GeoTIFF

After initially importing the GeoTIFF, QGIS displays its values as grayscale. With earlier versions of QGIS, the background color would initially be black and would have to be changed to white first (you can to that in the project properties). A white background is important so we can easily add transparency later. I also found a setting in the layer properties to display the data in pretty colors. I chose a discrete palette that ranges from a bright yellow to a dark red. Note that the gradient in saturation will result in a gradient of opacity when we add transparency later.

Heads up! You must click Classify or your data will not be displayed at all.

Set pretty colors

Since Mapbox does not account for different coordinate reference systems, we need to use WGS84. We can set that in the project properties. (The layer can keep its Swiss settings in the layer properties, no need to fiddle with that.)

Set CRS to WGS84

Then we can export the map as an image from the Project menu.

Export currently displayed view to PNG

At first I exported the whole map (all of Switzerland). But the resolution of the exported image by default corresponds to your screen resolution when you display the map in QGIS. That causes the file size to shrink considerably and that's good, but it also means that when you add that image to an online map and then zoom in on the city of Zurich, the noise data is so heavily pixelated that it's completely useless. So I resorted to only exporting a fraction of the whole image, which results in better resolution and an even smaller file size. This can be achieved by zooming to the desired fraction of the map in QGIS before exporting. In QGIS 3 you can then choose "Map Canvas Extent" in the export dialog (it's the default behaviour for both QGIS 2 and 3).

Here's a comparison of viewing Zurich from my first export vs the optimized export.

Zurich on the first export Zurich on the final export

Finally we need some transparency so we can still see the underlying topological map when we overlay the noise data. My favourite software for this is the GIMP. It has a handy tool in the Color menu that allows us to convert a given color to alpha. We use it to make white transparent. We can also make the whole noise map even more transparent by reducing the layer's opacity level from the GIMP's Layers sidebar.

Make white transparent using the GIMP Make all noise data transparent

That was quite a journey! Setting up a Web Map Service or even a tile server suddenly doesn't seem that much more complicated than "just ovelaying an image" ๐Ÿ˜

Preparing the pedestrian zones data

The pedestrian zones are published by the city of Zurich itself at https://data.stadt-zuerich.ch/dataset/fussgaengerzone. They provide a WMS/WFS, too, but again I decided to get the raw data because I was interested in the format they use: the data comes as a GeoJSON.

Done. ๐ŸŽ‰

Mapbox

Now for displaying both data sets on an interactive online map.

When I first used Mapbox, it was with JavaScript. I considered using its Jupyter library for this notebook, but it does not yet support multiple layers and I need that to display both the noise map and the pedestrian zones. There's a PR pending for multiple layers, so that might improve in the future. However, for now it's back to JavaScript. It turns out that publishing nontrivial JavaScript on nbviewer can cause trouble; I could resolve that by wrapping the whole thing in an iframe.

For the map itself I first followed the quickstart instructions for Mapbox-GL-JS (the "Mapbox CDN" variant). That was easy enough, just two notes on the setup:

  • Be sure to defer the map setup to its onload event handler or you'll see an empty map.
  • Set a height for the map container or it will have zero height and be invisible.

From there I added an image layer for the noise data below the streets. For the pedestrian zones I added a fill layer. The map navigation controls followed next. And finally I added an icon to mark the sweet spot where I'm getting a coffee ๐Ÿ˜‹

You should see the final map below this line. Otherwise you can find it on https://kreba.github.io/smartuse/mapbox-example/. Take a look at the source code, too!

That's all folks! Please share your thoughts and coffee pics back in the blog post that I mentioned at the top ๐Ÿงก