Home / Events / StreetView + Orienteering Map = Cool!

StreetView + Orienteering Map = Cool!

Coupling Google StreetView with an orienteering map in split view turned out pretty cool. You can click any point on the orienteering map for which there is StreetView available, and see how it looks in real life. The other way around, you can use your cursor keys or mouse and wander around in the city using StreetView while your position (and view direction) is constantly updated on the orienteering map.

The city of Bergen just got Google’s StreetView implemented a few days ago – and most of the area used in the chasing start of Bergen Sprint Camp last weekend is covered using Google’s service. I’ll save the technical details for the last part of this article – but pairing Google StreetView with an orienteering map was actually quite easy. The below video shows it in action – using the keyboard to navigate around in StreetView while the position and view direction is constantly updated on the orienteeringmap:


You find the demo of StreetView + Orienteeringmap here. It would be quite straightforward to make this into a game where you would have to navigate around using StreetView only, and would get a notice each time you got to a control.


Is this useful for anything? It may be a good way for beginners to understand the correspondence between map and terrain in an urban environment. It may also be a good way to get to know an area ahead of a race – even better than with using StreetView only. This feels like it is in the ethical gray zone in my opinion, but it is allowed according to the rules. For example, if StreetView would be available for this years WOC sprint area in Trondheim, it would be simple to set up a similar service. For Trondheim there is no StreetView available yet though – Google will continue working in direction Trondheim in May, and will probably not have it ready for the WOC. Instead there is a service similar to Google’s StreetView available from finn.kart.no (click “3D” or “Gatebilder”) – but without an API which is that comprehensive.

Technical details

Technically this is quite easy to achieve – most of the code is available in the demos. I took the StreetView demo from this page, used this demo for the orienteering flag overlay (when seeing a control location), used this demo to show where StreetView is available, used this demo for the “Tour” from control 3 to control 4, added some extra code in order to update the StreetView position when clicking on the orienteering map, got the dynamic beacon from this page (but modified to use 360 predefined jpg’s instead of php-generation on the fly) and used the following technique to make a tile layer for the orienteering map to overlay on Google Maps.

For the orienteering map overlay, a direct overlay without tiles would have been possible if the map did not have to be rotated. Unfortunately, Google Maps can not have overlays which are rotated (if you know a method, please give me a tip in the comments!), and thus the tile layer is the best approach for an accurate overlay. I’ve got an idea for how this can automatically be done directly for all maps in omaps.worldofo.com with QuickRoute data situated in areas with StreetView (without going the way around tiles, but instead using OpenLayers for the map) – more about that later if I get time.

For now – enjoy the demo from Bergen in nice sunny weather!

About Jan Kocbach

Jan Kocbach is the founder of WorldofO.com - taking care of everything from site development to writing articles, photography and analysis.

Check Also

Route to Christmas: Day 10 2010

Todays leg in Route to Christmas is a leg from the United States with several ...