Geotagging on linux with gps visualizer and gpsPhoto

Is this for you?

If you aren't comfortable hand editing html, editing a perl script to change paths in variables, or applying a unified diff patch, this page isn't for you. If you don't mind giving control of your data to a third party in exchange for a fully integrated service, you will probably like Everytrail, which takes your pictures and GPS track and can display a few pictures for you. The downside however is that it's not very configurable, and you cannot easily include their stuff with your web pages in any way you'd like, and you of course also rely on them remaining around and free.

Now, if you are the do it yourself kind, and like to tweak/configure and get exactly the result you were hoping for, read on...

Quick reminder steps for me

• My bookmark link for direct form access is this link.
• Make sure the input gdb GPS track has at least one waypoint of the converter script won't work
• parse_gps_vizualizer_output output.html > 20110605_Montreal.php (match name to picture album name).

End result

• The javascript google map with your own pictures on it. You can see pictures by hovering over photo pictures, or you can click on them for a picture popup. That picture popup has a link that can take you to the picture library.
  All your included photos are also visible on the right tab if you scroll at the bottom (I used a selection of my photos to only show the better ones, and not have a map littered with little camera icons )
  
• Once you click on a link in a photo, or you are in the picture library like in this page: you can click on the main photo or 'link to google maps' and be brought to a slightly different javascript map. This map is different as it is centered on the photo you just clicked on, zoomed in some more and only shows one photo icon, the photo you were looking at.
  
• If you are browsing the photo album, you get a new '(georef)' link on all the pictures, which also brings you to the map centered on where the picture was taken.
• When you are reading the report page, all the pictures included on the page also have georeferenced links (like the picture below you can click on)

  

Required Software

How you get there

Geotag your pictures

./gpsPhoto --gpsfile 20080702_LostCoastTrail.gpx --overwrite-geotagged --timeoffset 25200 --maxtimediff 7200 --dir /photos/20080702_Lost_Coast_Trail/

Once your pictures are geotagged, you can proceed.

Create your javascript google map with GPS Visualiser

Tweaking the generated javascript

You then have lots of settings you can tweak in the resulted javacript, Adam did a good job documenting the variables, but there are many, and you may not know what's worthwhile to change. I'm going to list a few here:

• you can turn off the waypoint map with gv_options.marker_list_options.list = false.
  
• you can also turn off the tracklist with gv_options.legend_options.list = false.
  
• or can move the tracks box with gv_options.tracklist_options.position = ['G_ANCHOR_TOP_RIGHT',6,40]. Changing this to G_ANCHOR_BOTTOM_RIGHT works better for me since it won't obscure picture thumbnails that get opened.
  
• You can change the width of the waypoint/photo labels width and set the background to white with: <div id="gv_marker_list_static" align="left" class="gv_marker_list" style="width:220px; height:800px; overflow:auto; display:none; background:white">. (the marker_list options are for the floating marker list, not the one on the side, so you'll likely want something like gv_options.marker_list_options.width = 240).
  
• Another thing you'll want to change is to auto resize picture thumbnails to a smaller size that's more appropriate to the size of your map. In my case, my autogenerated thumbnails are 800 pixels wide or high, which is too big for the map, but thumbnail_width:480 mostly takes care of fixing that.
  
• You can also change is which type of map you'd like to default with. Here are the gv_options.map_type values I use are G_HYBRID_MAP (typical google satellite+street), G_PHYSICAL_MAP (google terrain/topo map), and MYTOPO_TILES (mytopo topo/hiking map). On paper, the mytopo option is the best for hiking data and snow resorts.
• A generated map's size can be changed by looking for

  <div style="width:1060px...."
  <div id="gmap_div" style="width:824px; height:480px..."
  gv_options.width = 824;  // width of the map, in pixels
  gv_options.height = 480;  // height of the map, in pixels
  

Making a map fullscreen:
A map can be made full screen by setting gv_options.full_screen = true; but this makes the waypoint list floating on top of the map. This is turns unfortunately makes the map off center since the center code does not take into account the portion of map obscured by the waypoint map. The following code is then recommended at the end to size the waypoint list to the window size (it would be nice to have the 200 in bold auto-resize to the track list height):

// put this after gv_options.tracklist_options
<?php $in = $_REQUEST;
if ($in['fullscreen'] == 0)
{
	echo "gv_options.full_screen = false;";
}
else
{
	// true|false: should the map fill the entire page (or frame)?
	echo "gv_options.full_screen = true;";
	// when full screen, marker list will grow from the bottom, so tracklist should grow from the top
	echo "gv_options.tracklist_options.position = ['G_ANCHOR_TOP_RIGHT',6,40];";
}
?>
(...)
// this is optional to resize the waypoint list height on the first display
$('gv_marker_list').style.height = (gmap.getSize().height-300)+'px';
GEvent.addListener(gmap, "resize", function() {
	// resize accordingly when needed
	$('gv_marker_list').style.height = (gmap.getSize().height-300)+'px';
});

GV_Finish_Map(gv_options);

You can also add these variables to the URL:

• zoom=level
• center=wpts[0] (wpt 1) or center=waypointname or center=trk[3]
• even url?center=4&zoom=12.
• or url?center=1&open_info_window=0 to center on a waypoint without showing its info (otherwise you can turn that off by default with gv_options.centering_options = { 'open_info_window':false.
• maptype=G_HYBRID_MAP, G_PHYSICAL_MAP, MYTOPO_TILES
• showonlytrack=7&center=trk[7]

One thing I did was just to feed my GPX file and I edited the generated map I got from gpsvisualizer to add labels, based on the waypoint types (blue flag vs Cross sign). If you want to go that route, you can use those scripts:

gandalf [mc]$ cat add_label
perl -pi.bak -e "s#/gpsmap/(.*).png'#/gpsmap/\$1.png',folder:'\$1'#g; s#(folder:'[^']*)%2C_#\$1 #g; s#(folder:'[^']*)_#\$1 #g" $1
gandalf [mc]$ cat change_labels
perl -pi -e "s/Pin Blue/Creeks/; s/Flag Blue/Waypoints/; s/(folder:[^']*)Crossing/\$1Tide Crossings/; s/Flag Green/EndPoints/" $1

Add select pictures to your google map

gen_gmaps_gv *.jpg
(...)
Wrote 446_LCT_Day2 / 40.0449581 / -124.0786916
Missing GPS data for 500_The_Counter.jpg
All gv data written to gvoutput, merge those waypoints to your JS html file
tail -1 gvoutput 
GV_Draw_Marker({lat:40.0449581,lon:-124.0786916,name:'446_LCT_Day2',desc:'446_LCT_Day2',url:'/perso/hiking/Pix/20080702_Lost_Coast_Trail/446_LCT_Day2.html',thumbnail:'/perso/hiking/Pix/rig-cache/20080702_Lost_Coast_Trail/prev640_446_LCT_Day2.jpg',color:'magenta',icon:'camera',folder:'photos'});

• marker_link_target from _blank to youralbum (this will cause all pictures opened in a new window to share the same window as opposed to opening a lot of new ones).
• thumbnail_width from 0 to 480 or smaller if you want to force resize big thumbnails to smaller sized ones.

<iframe src="/path/to/20080702_Lost_Coast_Trail.html" marginheight="0" marginwidth="0" frameborder="0" scrolling="no" width="1030" height="800">
</iframe>

Make a php version of your gmap.html with my scripts that do the work

The gmap.html from above does not work as a landing page when you click on photos that you included in a web page, or a photo from your image gallery (Rig or other).
To achieve this, you need to copy gmap.html to gmap.php, configure your web server to parse php files if necessary, and hand apply this patch (sorry, the diff cannot auto apply, but again, use parse_gps_vizualizer_output which actually has a chance of auto applying).
What the diff does is:

• center the map on the lat/lon provided
• change the zoom level to 14, you could even zoom more if you wanted to
• hide the center crosshair as it would conflict with the photo icon
• Create a new GV_Marker entry with the waypoint info being fed via the URL

Note that with the new javascript diff above, there is no real need to use/keep/separately maintain the html file. The php file will autodetect whether it's supposed to show the entire map with all the pictures that were added, or zoom on the point given while showing the picture given.
You probably just want to edit the html title in that file to match what you graphed.

Adding georef links to a static page with existing pictures

cd pictdir
jhead -te /original/dir/'&i' picts*.jpg

Patching Rig or picture gallery program

Now, you simply have to generate this .rig_mapping file, which you do with another symlink to pictprocess, called gen_rig_gps_mapping. If you just run it in the directory you want to generate some georef links for, it'll drop a .rig_mapping that will be automatically used by Rig, like in this page.

End result

Thank the tool authors and make a donation if you can

All the patch files can also be found here

Feedback is appreciated