It’s been a while since I wrote here on DG, but I’ve been busy writing on my own blog in Swedish. However, now it’s time to reveal something I’m pretty pleased with, that you maby can use as well.

A simple (well reasonably so) method to extract geodata from panoramic photographs, by using open javascript libraries, some javascript of my own and a lot of head scratching.

I won’t go into to much detail, but to make a long story short, I have not been able to find a solution (free and simple to use) that lets me extract geographic locations from panoramas, even though the theory is quite simple. Now I got tired of waiting and gave it a try myself.

For more on the background you can try to read my posts on my blog (google translated article).

Create the panoramas

This can be done in a lot of ways. In my demo I’ve used Microsoft Photosynth for iPhone. The panorama should be geo-tagged and it must be 360 degree. The edge must also be oriented to the north (very important!). You fix the edge orientation in a graphics program like Gimp by simply cutting and pasting the panorama so that the left (and right) edge is as close to north as you can.

The more accurate geo-tagging and “north orientation”, the better the result. Better panorama stitching will also help.

Using the application

My demo is on a server (link at the end), but it works fine in a file structure as well. The main html-file should be in the same location as the panoramas (security issue with javascript). The dedicated panorama viewer (“show 360”) uses Pannellum, which normally requires a web server, but seems to work fine in Firefox without one.

To test it “live” you need to download two panoramas to use in the demo (links on the page). When you have the application in your own system you can use any panorama you like.

You simply open one panorama in each of the two top Leaflet containers. The application will sense EXIF GPS data and convert it to UTM, but you can enter coordinates manually. The top panorama will dictate which UTM zone that will be used.

The map will pan to the location of the first panoram automatically (if it is geo tagged).

When you click in the panoramas you will set a bearing for each of them. When you have two bearings a location will be calculated and shown on the map.

You can give it a name and then “Collect” it to a list and as a cross in the map.

You can then copy and paste your list to a csv file and use it in QGIS, or any other GIS.

It isn’t allowed to have access to the file system freely through javascript, so it isn’t possible to save the list to a file automatically, but this method works ok.

You can change panoramas and continue to add objects to your list (and map), but if you refresh your page, you risk loosing your data.

Feel free to download and use the files with your own panoramas. Bear in mind that my javascript knowledge is limited, and I know that the code is messy (a lot of comments in Swedish for instance). If you want to clean it up and make improvements I’m all for it. Just make sure you make your improvements available to the community.

Try it LIVE

Or watch the demo on YouTube (version 0.6):

Download all files (zip)

The application uses: