Christopher Orr

Photo Spheres: Embedding, cropping and the tiny planet

Since my previous post about Photo Spheres, I’ve taken some more photos, some of which I cropped while keeping them compatible with panorama viewers. I also discovered a new Photo Sphere feature, and found an existing open source project to let you embed Photo Spheres on your own website, independent from Google’s services. 

Firstly, I took a panorama from the Mönschberg in Salzburg. However, the initial panorama was too large — there was too much of the ground in it, and too many trees at either side, so I wanted to crop it. But as we saw before, various dimensions hardcoded into the panorama by way of XMP metadata, which is used by Photo Sphere viewers to determine how the image should be displayed.

Possibly there’s a more elegant way of fixing this if you have the correct photo editing software, but I took a basic approach: extract the XMP metadata document from the image, crop the image, do some calculations, alter the XMP document and re-insert it into the image. I used exiv2 to extract and insert the XMP data.

As you can see from image above on Google+, the Photo Sphere is displayed correctly.

Secondly, while I previously bemoaned the apparent inability to view Photo Sphere images outside of Google Maps or Google+, I discovered there is actually an open source JavaScript implementation, which has been available on GitHub since November 2012.

It’s called… photosphere and, using the three.js library, it will automatically read the XMP Photo Sphere metadata from a JPEG and render the sphere on a <canvas> element, or use a WebGL renderer if available.

If you click below, you can see the viewer in action on a Photo Sphere I took of Residenzplatz in Salzburg.

Photo Sphere placeholder

You can drag around with the mouse, and zoom in/out with the mouse wheel. Very impressive. Thanks to kennydude on GitHub for creating it!

Tiny planet icon

Finally, despite having created numerous Photo Spheres with my Nexus 4, it wasn’t until the attempt above that I made a fully-spherical image.

When you do this, and view the image in the Android photo gallery, you get a wee icon which lets you create a “Tiny Planet” image — a stereographic projection of your image to make it look somewhat like a planet.

Tiny planet image of my Salzburg photo sphere. Tiny planet image of St. Maarten

I think you can guess which image is mine. Take a look at more (non-Android) “wee planets” on Flickr.