GoPano Micro

A few weeks ago we dispatched a student intern to walk through Norton Common near Earthware’s office, holding a pole with an iPhone and GoPano lens attached to it. Short of being on fire, he couldn’t have drawn more attention to himself.

Google Street View is one of the most incredible innovations in mapping in recent years, but has one major flaw; what happens when you leave the route that Google decided to photograph? At Earthware, we want to improve the Street View experience by making it easy to add in your own custom Street View panoramas when Google’s just don’t go far enough.

The ideal end result was perfect continuity between the real Street View and ours – as you followed the arrows, you’d eventually end up in ours without even necessarily noticing. To demonstrate this, we took a path down Norton Common. The entrance to the path is visible from the street, but you’re unable to go down it in Google Street View. This meant there was a jumping off point we could use to link the two together.

Our intern set out with the trusty iPhone-on-a-pole, with two apps running: Endomondo and GoPano. Endomondo is normally used for keeping track of work-outs, but the feature we were really interested in was being able to record a route taken using GPS, with timestamps at regular intervals. GoPano is the companion app to the lens we were using –a lens and app which records 360 degree video at all times, creating a video which the user can watch at any angle. By lining up the timestamps of the route and video, we could get an accurate location for every frame of the video.

Our original prototype displayed this route on a map, and used the raw video from GoPano on pause to act as our Street View – much like the real thing, you could drag it around to see everything. But without linking into to Google Street View, it just wasn’t enough. We set out to find a better way of doing it.

Google’s Maps API allows you to add in custom panoramas to Street View, so this was clearly the right path to take. The first roadblock was getting images to use. Answer; 3 hours spent exporting 16,000 frames from Adobe Premiere Pro, another 2 hours spent on Google, and 5 minutes to write a VBS script to select the frames we had GPS data for. We had our images!

A still frame from the GoPano video looks like this:

[caption id="attachment_764" align="aligncenter" width="512" caption="Original frame taken from the GoPano movie"][/caption]

When wrapped around, it projects quite nicely as one 360 degree frame. Sadly, this isn’t the projection Google’s API works with, resulting in a distorted image. Through guesswork, trial and error, and a tiny bit of maths, we attached black bars to the top and bottom of each image, and hoped that would do the trick – it did.

[caption id="attachment_765" align="aligncenter" width="512" caption="Padding out the GoPano frame to the ratio that Google expects"]<a href="https://earthware-website.azurewebsites.net/Content/images/wp-images/2013/09/ew2walk12690_2.png target="_blank">[/caption]

Next we spent some time getting each individual frame to point in the right direction and to link to each other in the right order in Street View. Once they were all in line and in order we overlaid an arrow on the real Street View panorama outside the common to link to our custom Street View; our mission was complete!

[caption id="attachment_768" align="aligncenter" width="512" caption="Showing where we connected our series of images on to the Google ones"][/caption]

Of course, it wasn't without its issues. Through development we’d only ever seen it in Chrome, where it worked perfectly. Briefly looking at it in other browsers shows we've got some way to go making it compatible with them... In Firefox and Safari, it appears as a flat image:

[caption id="attachment_766" align="aligncenter" width="512" caption="Firefox and Safari show this"][/caption]

This appears to be a known issue with Google’s use of WebGL to render custom panoramas, and indeed is deemed a non-issue by Google engineers, so there’s little to be done about it (https://code.google.com/p/gmaps-api-issues/issues/detail?id=2792).

In Internet Explorer 10 on some computers the pan controls are corrupted:

[caption id="attachment_767" align="aligncenter" width="512" caption="Internet Explorer manages to mess up the pan control (top left)"][/caption]

Again, this is a known issue (https://code.google.com/p/gmaps-api-issues/issues/detail?id=4563).

So, if you'd like to take a look at our custom Street View, and learn about how you can put a student to good use, the demo is available here: https://www.earthware.co.uk/client-stories/StreetView/StreetView.aspx.