rakaz

about standards, webdesign, usability and open source

Having fun with geotagged photos

A couple of months ago I wrote an article about geotagging, a new feature of Picasa 2.5. Thanks to this new feature you are able to store the location where a photograph was taken by finding the location in Google Earth. Today I am going to explain how to extract the geotagging information stored by Picasa and do some fun things with it in PHP.

What are coordinates?

When you geotag a photograph you are basically adding a very specific combination of a latitude and a longitude coordinate to the image file. Every point on earth can be represented by a combination of these two coordinates.

Coordinates

The way these coordinates work take a bit of getting used to because the earth is not a simple flat surface but essentially a sphere. Some basic knowledge about geometry is required to fully understand the reasoning behind the coordinate system.

Latitude

The location of a point on the north – south axis. The latitude is measured in degrees from the equator. The north pole is 90 degrees, the south pole is -90 degrees. Every point on earth is somewhere in between.

Latitude

The angle between the equator and point a is the latitude of Rome (in this case 41.890278°)

Longitude

The location of a point on the east – west axis. The longitude is measured in degrees from the north – south axis called the Prime Meridian. The prime meridian we use nowadays is not a naturally occurring point of reference, but originally used by the British Navy – it intersects Greenwich, England. Almost every seafaring nation used their own prime meridian, but given the need for a universal coordinate system the Greenwich meridian was adopted as the universal prime meridian. The latitude is measured in degrees from the prime meridian, ranging from -180 to 180 degrees. Every point on earth is somewhere in between.

Longitude

The angle between the prime meridian and point ß is the longitude of Rome (in this case 12.492222°)

Different notations

The notation that we are going to use today is by using a single fractional decimal number for each coordinate. This notation is used by most modern computer applications and web services, such as Yahoo Maps, Live Maps, Google Maps and Google Earth.

The traditional notation of the latitude and longitude is in degrees. Every degree is divided into 60 minutes and every minute is divided into 60 seconds. With this method of notation the degrees and minutes are integer numbers. Seconds can be written as a fractional decimal number. Also, instead of using positive and negative numbers this notation always uses a positive number and one of the following letters N, S, E or W as a suffix to indicate. A negative latitude uses the letter S a suffix, a positive number uses the letter N. A negative longitude uses the letter W as suffix, a positive number uses the letter E.

The following coordinates use different notations, but both represent the same location:
41° 53′ 25″ N = 41.890278° and 12° 29′ 32″ E = 12.492222°

Extracting the coordinates from the image file

Picasa stores the coordinates inside a special area inside the image file called Exif, designed to store meta information about the images. It is usually used to store the camera model, the settings of the camera and the date when the picture was taken. Exif is a common standard and also allows us to include geotagging information. Extracting this information with PHP is quite easy because PHP provides us with an easy to use module for reading Exif data.

$exif = exif_read_data($filename, 'EXIF');

var_dump($exif['GPSLatitude']);
-> array(3) { [0]=> string(4) "41/1" [1]=> string(4) "53/1" [2]=> string(8) "25/1" }

var_dump($exif['GPSLatitudeRef']);
-> string(1) "N"

var_dump($exif['GPSLongitude']);
-> array(3) { [0]=> string(4) "12/1" [1]=> string(4) "29/1" [2]=> string(8) "32/1" }

var_dump($exif['GPSLongitudeRef']);
-> string(1) "E"

After obtaining the raw coordinates from the Exif data we need to convert it to something that we can use. I use two helper functions – one to convert the degrees, minutes and seconds to fractional decimal numbers – Exif stores numbers as actual fractions – and one to convert these three to a single fractional decimal degree. This is the format that we can use for all kinds of fun stuff. All of this is wrapped into a single function called getCoordinates(). The result of this function is an array containing the latitude and longitude of the specified file.

if ($c = getCoordinates($filename)) {
    $latitude = $c[0];
    $longitude = $c[1];

    // use the data in fun ways...
}

Download the helper functions

Creating links to a mapping website

The easiest way to use the geotagged information on your website is by creating a link to one of the mapping services such as Google Maps, Yahoo Maps or Live Maps from Microsoft. The only thing you have to do is create a simple link with a couple of parameters that control the location, the level of detail and the type of map. Below you will find examples of the most common mapping services.

Google Maps

http://www.google.com/maps?z=zoom&ll=latitude,longitude&t=mode

zoom
an integer from 0 to 19 – higher is closer, I usually use 16 for photographs
mode
k = satellite, m = map, h = hybrid

http://www.google.com/maps?z=16&ll=41.890278,12.492222&t=k

Yahoo Maps

http://maps.yahoo.com/broadband/#mvt=mode&lon=longitude&lat=latitude&mag=zoom

zoom
an integer from 16 to 1 – smaller is closer, I usually use 2 for photographs
mode
s = satellite, m = map, h = hybrid

http://maps.yahoo.com/broadband/#mvt=s&lon=12.492222&lat=41.890278&mag=2

Live Maps

http://maps.live.com/default.aspx?cp=latitude~longitude&style=mode&lvl=zoom

zoom
an integer from 1 to 17 – higher is closer, I usually use 16 for photographs
mode
a = areal, r = road, h = hybrid

http://maps.live.com/default.aspx?cp=41.890278~12.492222&style=a&lvl=16

View the example or download the source

Embedding a map of the location

Alternatively you could also use the Google Maps API (example, source) or the Yahoo Maps API (example, source) to embed a map of the location directly in your own webpage.
Instead of linking to Google or Yahoo, your visitors are able to view the location of a photograph without even leaving your own website. All you need to do is sign up for use of one of their APIs and follow their examples and use our coordinates. Both APIs are very extensive and we are only scratching the surface of what is possible, but that is far beyond this article.

nielsenwilma.nlOn my own personal photo album I use the Google Maps API and the prototype window class to show the map in a floating window on top of the webpage. Just click on the Toon locatie (translation: Show location) link at the bottom of the page to see the result.

Creating KML files for Google Earth

Thanks to the KML specification it is possible to use Google Earth as your personal photo album. KML are simple XML files that contain a number of placemarks – geographical locations and for each placemark you can show a small thumbnail of the photograph that was taken in that location. If you click on that thumbnail you can show some extra information about that photo including a larger version and perhaps a link back to the website where the original photo can be downloaded.
This is the same technology that is also used by Google Earths new Geographic Web feature – it pulls the information from Wikipedia and photo website Panoramic.com.

I’ve created a similar feature for my personal photo album. Click on Toon in Google Earth (translation: Show in Google Earth) and if you configured your browser to open KML files in Google Earth all my vacation photographs will show up in Google Earth (otherwise you must manually save the KML file and open it in Google Earth).

View the example or download the source

And more…

How about embedding the location of the photograph on the web page that contains the photograph. You can easily embed geographical information in web pages using the GeoURL ICBM meta tag or by using microformats. You can do the same thing with RSS and Atom feeds using the GeoRSS or ICBM RSS module.

4 Responses to “Having fun with geotagged photos”

  1. Soroush wrote on January 4th, 2007 at 3:36 am

    Thanks, I liked your article! Very simple and understandable for something that I thought was too complicated! And I like the fact that there are PHP modules that read Exif files!
    One thing though… how do you get the ‘geo data’ in the first place? I had heard of some cameras with GPS, but aside from that, it seems like something manual to do!

  2. rakaz wrote on January 4th, 2007 at 4:54 am

    Soroush: You could use some sort of GPS device to record the location of all the photographs you take, but personally I do not have one. I do it manually. Picasa and Google Earth make it very easy. I’ve written an article about it: Geotagging with Picasa and Google Earth

  3. Peter wrote on November 19th, 2007 at 3:32 am

    Absolutly beautiful…..the only thing I miss and have been looking for some time now is that when you go to the next photo instead of the map reloads on the new location it should “fly” to the new location just like when you “fly” from one place to another in Google Earth. This would make it very easy for the visitors to follow where you have been traveling.

    I geotag my photos using a Garmin eTrex Vista and RoboGeo and it works perfectly.

  4. peterg22 wrote on January 26th, 2009 at 8:21 pm

    Thank you! I’ve incorporated your code into my blog picture page – I was having problems with the decimal conversion and your code really helped.