Strava Bookmarklets – Map Flipper for Open Cycle/Street Map and Ordnance Survey

Map Flipper BookmarkletsFollowing on from my last post about my bookmarklet to view any Strava route, activity or segment in 3D, here is the follow-up post about a far more simple bookmarklet that will swap out the default Google Maps found in the Strava website for a choice of Open Cycle, Landscape and Street Maps or the Ordnance Survey maps in the UK.  At least here in the UK the Google Maps can be rather limiting from a cycling or running perspective due to a distinct lack of detail, particularly around off-road routes.  Fortunately the Open Maps (and even more so the Ordnance Survey maps) have detail in spades and with a bit of JavaScript magic we can swap out the Google Maps for the alternative map of our choosing.

The map options

  • Open Cycle Map – For detailed planning and reviewing then this is my favourite. Public footpaths and bridleways (for MTB in UK) are clearly marked along with regional and national cycle routes. When planning a route (like the one in the image above) the cycle map showed me that there was a national cycle route coming into Holmsfirth (Sustrans route 68) from the south so I was able to plan my ride using the the best cycling roads of the area rather than the more “popular” main roads. Without using the Open Cycle Map I would not have known it was there. 
  • Open Landscape Map – A variation of the Open Cycle Map but without the specific cycle routes marked.
  • Open Outdoors Map – I’ve not really used this one but it was easy to add in. Similar to Landscape with a few style tweaks as far as I can tell.
  • Open Street Map – The original Open map. Similar to the above but without the terrain detail.
  • Ordnance Survey – The de facto, outdoor map here in the UK.  Only available on the higher zoom levels so the normal Google map will only be swapped at the lower zoom levels.

The tech-savy amongst you can easily edit the JavaScript being use another map that follows a similar pattern.  Let me know in the comments if you know of other useful maps that could be used using this same method.

Strava Route map flipped to Ordnance Survey Strava Route map flipped to Ordnance Survey

How to do it

Just visit the Map Flipper page and follow the instructions. It now works with Chrome, Safari (Mac and iOS), Firefox, Opera and IE.  Once you’ve got the bookmarks set up it is as simple as navigating to the Strava page of your choice and clicking your bookmark.

How it works

Basically the JavaScript looks for images that are from Google Maps on the Stava page and swaps them for the appropriate Open Map images. There is a timer running so it will check every half second just in case you’ve moved the map view or zoomed in or out.  It uses a JavaScript library called d3 which, handly enough is used on all of the newer Strava pages but for the odd page that doesn’t use it I need to load that in myself.  The VeloViewer site is completely underpinned by the d3 library and if you’ve not checked it out then I encourage you to do so.

Just edit one of the bookmarks to have a more detailed look at the code.

Bonus features!

The map flipper will also work on all of RaceShape‘s maps (segment comparison, heatmap and SNAP) and it even works on Google maps (the “classic” version, not the “new” version) if you allow for insecure scripts to run (only tested on Chrome).

19 thoughts on “Strava Bookmarklets – Map Flipper for Open Cycle/Street Map and Ordnance Survey”

Comments are closed.