Following 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).
Chris Van Der Grift says:
Brilliant stuff! Nice side effect is that the same bookmarklets also work on Raceshape.com.
Ben says:
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).
Thomas says:
I have coded a chrome extension working with.
I give the link of the ext soon here…
fitz says:
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.
Ben says:
I’ve got an update for it to work with Endomondo as well. I’ll apply it later.
Mark Sheffield says:
Love this Ben. Any way you can add an OS Maps option?
Ben says:
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.
Ben says:
Woohoo! Got them working. Go get the new OS bookmaklet from the map flipper page.
Chris Barrett says:
OS Maps option is great but the gridlines are out of orientation?
Ben says:
Can you give me an example of the grid lines?
Chris Barrett says:
OS grid lines (the light blue lines @ 1km grid spacing overlaying the map) are not aligned vertically (i.e. North – South). I think this is because of differences in projection:
Google Maps/Earth use Latitude and Longitude – http://en.wikipedia.org/wiki/Google_Maps#Map_projection
Ordnance Survey use the NATIONAL GRID (Transverse Mercator Projections with a False Origin [UK ONLY] –
http://en.wikipedia.org/wiki/Ordnance_Survey_National_Grid
??
Ben says:
Like you say, I think that is just down to the projections being used. If you look at http://www.bing.com/maps and pick the OS option you’l see it is the same there.
Daniel Piñeiro Santos says:
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 says:
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.
Jason says:
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 🙁
Andy says:
Same here 🙁
David says:
Not working in any of IE, Firefox and Chrome. Please fix ASAP, missing it loads.
David says:
Advice is to change the Google map view to Satellite and then apply the mapflipper. That seems to work.
Jason says:
indeed it does, cheers 🙂