Posted by & filed under Maps.

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

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).

Share

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

  1. Jason

    Great feature, but unfortunately this has stopped working for me, I followed the instructions again and tried re-adding the bookmark for OS map flipping but still no joy 🙁

  2. Daniel Piñeiro Santos

    I have a suggestion: make the bookmarklet aware if the changes are already applied. So you can turn back to the default map. This is: one click = apply the new mapping, second click = undo changes. I sometimes want to see the aerial/relief map after consulting stuff in the Cycle maps.

    • Daniel Piñeiro Santos

      I have done the trick with:
      javascript:(function(){if(typeof(vv_flipMap)===’undefined’){var s=document.createElement(‘script’);s.src=’http://veloviewer_com/js/vv.mapFlipper.js?v=’+Math.floor(Math.random()*1000);document.getElementsByTagName(‘head’)[0].appendChild(s);s.onload=function(){vv_flipMap(‘cycle’)}}else{if(vv_t){clearInterval(vv_t);vv_t=null}else vv_flipMap(‘cycle’)}})();

      But I need to zoom out and zoom in for getting rid of the Openstreetmap tiles.

    • Ben

      I’d love to get that to work but it is a fair bit more involved as the way you get the OS map tiles (via Bing) is different to Google and OSM. This is unfinished business so when I get chance I’ll look into it some more.

  3. fitz

    It also works on runkeeper like a charm! I’ll take a look and see what would it take to make it work on Endomondo too – this is just great.

    Now if the routebuilder on Strava could take into account the OSM/OCM data, this would be brilliant.

  4. Thomas

    I have coded a chrome extension working with.
    I give the link of the ext soon here…

  5. Chris Van Der Grift

    Brilliant stuff! Nice side effect is that the same bookmarklets also work on Raceshape.com.

    • Ben

      So it does! I’ve just made some tweaks so it works with all the raceshape pages (you’ll need to re-add the bookmarks).
      Also made a tweak so that it can work on maps.google.com as well (works on Chrome after allowing insecure scripts).