[OpenLayers-Users] Display geotagged photos in OpenLayers

Franz Buchinger fbuchinger at gmail.com
Tue Aug 16 06:17:11 EDT 2011


Hi Hendrik,

some hints to get you started:

first of all, you probably want to generate thumbnails of your photos and
load these into the map instead of the large-size images you are using now.
This gives you a much better performance. The popup can then contain a link
to the full-res version of the photo.

Extracting EXIF/GPS metadata from JPEG images in Javascript is possible, but
quite hacky and out of OpenLayers' scope. There is a Javascript library of
Jacob Seidelin that does that (
http://blog.nihilogic.dk/2008/05/reading-exif-data-with-javascript.html),
but it comes with the downside that you have to download all hi-res versions
of the photos to the browser in order to get the gps coordinates contained
in the exif metadata.

A better approach would be to dump out the GPS coordinates of the photos
into a JSON file, and load that file into OpenLayers with an AJAX request.
You can then specify an Openlayers.Format that parses this information and
creates a feature for each of your photo.

You can use the exiftool command line utility (
http://www.sno.phy.queensu.ca/~phil/exiftool/) to quickly dump out all GPS
coordinates into a JSON structure, see the reading examples page (
http://www.sno.phy.queensu.ca/~phil/exiftool/exiftool_pod.html#reading_examples)
for more information.

regards,

Franz


2011/8/16 Hendrik Oesterlin <hendrikmail2002 at yahoo.de>

> Hello,
>
> I am trying to display geotegged photos in an OpenLayers overlay in an
> easy way.
>
> I there a function that reads all jpg from an folder (or from a .txt
> list of individual paths) and puts them on the right spot depending on
> GPS position stored in EXIF data?
>
> Please find a sample photo here:
>
> www.oesterlin.ile.nc/div/DSC01090.JPG
>
> I'm avare that I could achieve this using some code like this:
>
> var Photos = new
> OpenLayers.Layer.Text("Photos",{location:"data/photos.txt", projection:
> epsg4326});
> map.addLayer(Photos);
>
> and the photos.txt file like
> lon     lat     title   description     icon    iconSize
> 166.859902      -22.231191      Chutes de la Madeleine  <html><img
> src="data/DSC01090.jpg" width="480" height="640" border="1"/><br>photo
> DSC01090.jpg</html>   data/DSC01090.jpg       18,15
>
> but was unable to figure out how to make the pop up bigger to fit to
> the photo, and how to make a little X in the pop up to close it in an
> intuitive manner.
> Additionnaly, it is not convenient to add the lat lon by hand to the
> text file for each photo.
>
> Find an test version here:
> http://www.oesterlin.ile.nc/test/20110816test-carte.html
>
> Thank you for every hint!
>
> Regard
> Hendrik
>
> _______________________________________________
> Users mailing list
> Users at lists.osgeo.org
> http://lists.osgeo.org/mailman/listinfo/openlayers-users
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20110816/62b4d34c/attachment.html


More information about the Users mailing list