Tag Archives: design

Designing a better map for outdoor activities with MapBox

A few days ago Strava (probably the most famous activity tracking app/site) unexpectedly switched from Google Maps to OpenStreetMap (OSM). The switch was most likely done to save money, and since it was executed completely unprofessionally, basically replacing the Google Map layer with extremely badly styled OSM data using MapBox, many people (including me) got pretty mad about it. The change should have been carried out after a proper test phase, asking feedback from (at least the premium, paying) users, building proper map styles, and communicating it to the community in a detailed, timely manner. Also, the biggest problem is not the switch to OSM, because it is a very welcome option especially for off-road cyclists and trail runners (when the OSM data is presented in a proper way – and this is the main topic of this post), but dropping Google Maps, and especially the removal of Street View. Street View was used by many of us to plan our rides (check road surface, traffic levels, segments, etc.), and to check out rides/runs of our friends on Strava, to see where they went. Google Maps can be replaced by OSM as I will show below, but there is just no alternative to Street View… (And then I did not even mention how much worse the satellite data provided by MapBox than Google Maps.) This is not what I expected from Strava, especially not as a paying customer… Anyway, let’s move on.

What do I want from a map (for planning rides, and viewing activities afterwards):

  1. Road network and environmental data: all the different road types (from highway to path), vegetation (forests, grassy areas, agricultural areas, etc.), water bodies, and so on.
  2. Topographic data: contour lines and shaded relief.
  3. Proper colour coding and style: it should not be too vivid, but no nearly indistinguishable watercolours either. Differentiate between different types with colour and line style (e.g., road hierarchy with colour, paved/unpaved or accessibility with line style). When the GPS track of the activity is plotted over the map, it should not get lost in the details around it (thus don’t use the colour in the map that you later want to use for the track). Colour coding and line styles should be consistent across all zoom levels. Labels should be clear, well readable, not too busy, not too sparse.
  4. Adequate level of detail (LOD) on all zoom levels, with smooth transition between levels (no huge jumps in data content or style between levels, fade in/out data if necessary). Trails should not be visible when looking at the full continent, but as you zoom in, more and more data should appear. Low-resolution data should be properly replaced with more local, high-resolution data where possible.
  5. Useful information: display data that is useful for the intended use of the map: bike lanes, cycle paths, MTB tracks, forest trails, paved/unpaved surface information, etc. Some points of interest are more interesting than others, thus give more weight to the interesting ones.

Where Strava clearly does not meet my expectations right now is point 3. And without proper style, no map can be good, no matter how good the data behind the map is. OSM is a bit like Wikipedia. It’s open, it can be edited by anyone, thus it is very easy to collect immense amounts of very specific geo data thanks to the broad user base, but of course it will have its problems too. While Google might not have some specific hiking trails, etc., it has a full global coverage, with proper quality control. OSM have regions with extremely good coverage, and then other regions where even main roads might be missing. On the other hand, OSM indeed has cycle paths, hiking trails, road surface information, and every tiny possible detail what the users manage to give in. (I just added our building with house numbers, the driveway, and corrected some roads in the Observatory on La Palma, and these changes showed up within a few minutes on the map. That’s cool of course.)

Of course this also means that the OSM data base is huge, so if you need a custom lightweight map (and connected/mobile applications need these), MapBox comes in handy. After creating a free account (which will limit you to one custom map and 50000 monthly map views, which is plenty enough for a single user), and installing the MapBox Studio software, you get easy access to a huge OSM and terrain database in the format of vector tiles. Then with some very basic CSS knowledge (and/or after reading some manuals) you can easily change the stile of the different vector layers and elements. You can customise the line stiles, colours, labels, POIs, icons, the displayed data, and even add your own data if necessary. Starting and learning from the provided examples it is actually very easy to fine-tune a map to your own needs (and taste). There are some serious caveats though. First of all, not all OSM tags are preserved when MapBox creates the tiles, which means that, e.g., a footpath across a park and a sidewalk actually gets the same class and type. This is annoying, because I don’t want to show sidewalks, but I want the trails through parks. Also, if there is a cycle lane and a small road which also holds a cycle path, although bot have the highway=cycleway tag, because the second have other tags too, it is converted as a path (a.k.a. a trail). And since the road surface information is also not transferred from OSM, it is impossible to differentiate between such an actually perfectly good paved cycling surface and a gravel trail. Also, I have found some strange cases where canals are nicely drawn in OSM, but in MapBox, they show up with a line… There are a few similar problems (elevation contour data around our place is like 100 m off, while it seems ok at other places), but the platform is really great.

I started from the Mapbox Outdoors layer, and modified that to end up with my custom style. In short, I have changed most of the colours, the contour lines and the topographic shading, made the road hierarchy more clear, cleaned up some zoom level transition issues, road constructions, added in glaciers, mountain peaks (with custom icons from another style), extra agricultural land use data, one way street signs, refined how water lands are displayed, and separated the island names from the common POIs. Here is an interactive version, feel free to zoom in and out and check out other places (especially some mountains, because we don’t have those here) too!

To make things even better, the creator of Veloviewer has added the option of having such a custom MapBox style on the site, so now I can actually see my cycling/running/hiking routes on this map! Awesome. That’s what I call great customer service. I use Strava for its social aspects, that I can see what my cyclist/runner friends are doing (which also helps me to discover new routes), and because I can compare my efforts on different road sections to others and to myself (which is always a nice motivation to train more), but when I want to track my yearly progress, I always go to Velowiever. It is a great extension to Strava. Now I am doing that more often to just look at my activities too, since it hurts my eyes to look at the dull maps on Strava. I hope the situation will improve, because one of the first reasons why I started using it was the nice, clean design of the site, and that it had everything I needed, but with ugly maps, I am not sure I should pay for the premium membership anymore. It is not giving me much extra anyway, as for the detailed analysis, I use Golden Cheetah anyway. For the yearly subscription fee I would expect innovation and new features, not loosing features like Street View. So they better start doing something besides optimising their profit…

Keep calm and bike more!

The last three weeks with no cycling had a quite nasty effect on my condition, now I am ~2 km/h slower on average compared to the beginning of June (when – I have to admit – I was in a very good shape). This is not good. But what can I do, I will just ‘Keep calm, and bike more’ – or how was that exactly… (Matching music comes here.)


Mint azt az előző bejegyzésben már tudattam, a blog kisebb vérfrissítésen esett át, megnöveltem a sorközt és a betűméretet, valamint az eddig használt Lucida Grande (Windows-os olvasóimnak Verdana) typeface-ről Helvetica-ra (Windows-on sajnos simán Arial) tértünk át. A változás nem nagy, de jelentős – remélem kedves olvasóim szerint is könnyebben emészthető a szöveg ilyen beállítások mellett. (Apró extra: a fejlécként szolgáló képben lévő címfelirat mostantól Futura a korábbi vegyesfelvágott helyett.)


Ilyen lett (balra), ilyen volt (a jobb oldalon cseles a Helvetica cím Lucida Grande type-val szedve). Igazából már kezdetben éreztem, hogy túl kicsi a sorköz, de akkor valahogy jobban tetszett, hogy egy-egy bejegyzés kisebb helyet foglalt el a képernyőn…


Sajnos a blog kinézetét meghatározó style.css file távolról sem nevezhető letisztultnak, ha lesz időm, majd szórakozom vele még egy kicsit (illetve a stílust valószínűleg újra kéne építeni egy friss K2 verzióból – mivel ez a téma alapja, de még az RC3, most meg már RC8 is van…), már így is egy délelőttöt eltöltöttem vele, és még nem ebédeltem… Nem teljesen ide tartozik, de ráadáként a WordPress admin felületén, a bejegyzések szerkesztésénéál sem tökéletes minden, szóval kéne egyet archiválni, aztán frissíteni a 2.7-ről 2.8.4-re…