Yohan Chalier Blog RSS

Urban Wanderings

Content

Lately, I've been busy working on a music video for friends and a homemade short film, Ensemble, ils dérivèrent. The end of the year is approaching and I wanted to try something I encountered some (long) time ago.

On a boring day, I was exploring random personal websites indexed at BUKMARK.CLUB, and landed on sixey.es, more precisely, on the locations page. I was very impressed and inspired by its look and feel, and wanted to try doing something similar. So here we are: I chose a city I know quite well (Clermont-Ferrand) where I shot and recorded multiple images, and tried to create a map of it for saving and displaying some memories.

Direct access at chalier.fr/clf

Technical Considerations

The map is displayed using the amazing Leaflet JavaScript library. The challenging part was to generate the raster tiles.

I first downloaded the raw OSM data around the location from BBBike. This actually is XML, so it can easily be parsed manually. There are three main object types: nodes, ways and relations. Each way is composed of multiple nodes, localized with GPS coordinates. Ways also have tags for understanding what type of thing they represent (a road, a house, a waterway, etc.). I can convert each way to a line by projecting its nodes to XY coordinates using the Mercator projection, then draw those lines onto a canvas using the drawing utilities of the Pillow library. Depending on the type of way, I can tune the styling: for instance, draw black lines for roads, grey lines for buildings, and blue lines for waterways.

This way, one may draw a big map at once, but Leaflet (and others) uses 256×256 tiles with various zoom levels to actually render the map in full detail without having to load very heavy raster data. At zoom level 0, the whole map fits into a 256×256 tile. Each additionnal zoom level divides the previous one into two, both horizontally and vertically. Given a zoom level, I generate a giant image with all the required tiles in it (I compute the minimum and maximum coordinates, and round the result to the next tile size), and then chop it up into pieces.

Artistic Considerations

The current version of the map is a draft, where I only plotted images and short videos. I also wanted to integrate texts and audio, which I might do later, though I fear sharing too much would dox myself. I like the crisp feel of the pixelated images.

My interest in parsing and processing OSM data is not new. I started a "street poetry" project many years ago, but never got to publish a thing since I've never managed to actually create anything of interest with it. The basic idea was to generate short poems from street names, with some NLP techniques. I also implemented some ideas from the Oulipo, such as Georges Perec who wanted to know if you could cross Paris only through streets whose name start with the letter C. But I never got to the point where I had something really clean and finished to show off. The future will tell.