/ maps

Stepping up my web mapping game - Mapbox GL and D3

Ever since I started doing web maps I used to rely on tile based web mapping libraries, the two most commonly known being OpenLayers and Leaflet. That was around 2012, and the very first web mapping project involved custom tiles of an old video game. Recently I did a rather big project that involved displaying large amounts of data on a Leaflet map, and I started to feel the sluggishness that involves loading a map with hundreds or thousands of dots.

A lot has changed over time, but a lot also stayed the same. Vector maps have started to emerge and are currently coexisting along side tile based maps. I always was kind of afraid to switch to another web mapping library because I grew so accustomed to Leaflet.js, but here I am, sitting on the verge of a (now already not so) new technology: Mapbox GL JS!

Vector maps

From now on I want to start using the vector maps based web mapping library Mapbox GL JS. It is really fast, it looks pretty fancy and the basic usage and code implementation seems not that tough. Although, I have to say the API lacks some stuff that I know from Leaflet.js, but I'm willing to invest a little bit of time to get to know all the differences and fine nuances.

Based on an awesome tutorial by Jordi Tost that he presented at Maptime Berlin I was able to create a small visualization of the Berlin transport network using Mapbox GL and geojson data, that is projected and used as an D3 overlay. You can switch between a geographic and a topologic view.

Berlin transport

It's not one hundred percent perfect, I have to admit, but for starters, I think it's pretty cool. I also created my first Block ever! Go check it out! Now!