Google Map Lightroom Web Gallery

Now that Lightroom 4 is here geocoding is suddenly centre stage and images don't feel properly filed unless they have a set of co-ordinates attached to them.  Whilst LR4 offers many features that are needed to handle geocoding and maps, it is noticeable that the web module does not offer the facility to export these pictures in a map format.

As part of the redesign of my site I decide that it might be nice to create a photo gallery driven entirely from a Google map and produced from Lightroom.
For those who just want the goodies

• Click here for an example of a site generated using this plug-in
• Click here to download the web gallery as a zip file

`To install the web gallery

1. Extract the downloaded zip file.
   
2. Copy the archive contents to one of the following destinations, depending upon your system. If you have not already done so, you will must create the Web Galleries folder manually.
   
   Mac
   Users/username/Library/Application Support/Adobe/Lightroom/Web Galleries/
   Windows XP
   C:\Documents and Settings\username\Application Data\Adobe\Lightroom\Web Galleries\
   Windows Vista/7
   C:\Users\username\AppData\Roaming\Adobe\Lightroom\Web Galleries\
   In Windows XP, the “Application Data” directory is usually hidden. The same may apply to the AppData folder in Vista.
   
3. Open Adobe Lightroom and access the Web module. In the upper right, under “Engine”, you should seea new gallery called Shepherdpics Map.
   

For those who want to know how it works

To borrow some text from Joe Colson:
This information is intended for plug-in developers and those intrepid souls who want to understand what lies beneath the surface of a Lightroom gallery engine. It isn’t my intention to make this series of posts a definitive guide to Lightroom gallery engine design or anatomy. Instead, I’d recommend starting with the Lightroom SDK 2.0 Programmers Guide and Lightroom 2 SDK available from Adobe. The Adobe guide is a good starting point, but you can learn even more by dissecting an actual gallery engine, including those that are included in the SDK.

As per usual I am standing on the shoulders of giants here and in this case the whole thing is based on this article from Sitepoint and some code from Joe Colson's article on a geocoding plug-in.
The first problem to solve was how to generate an xml file of co-ordinates.  To do this I added the following code to the manifest.lrweb file.

AddGridPages {
filetype="xml",
template="markers.xml",
rows=1000,
columns=1
}
this uses the index page markers.xml to generate the xml doc
<markers>
<lr:ThumbnailGrid>
<lr:GridPhotoCell>
<marker>
<name><% =image.metadata.title%></name>
<thumb>content/bin/images/thumb/<%= image.exportFilename %>.jpg</thumb>
<desc><% =image.metadata.description%></desc>
<largePage>source/<%= image.exportFilename %>_large.html</largePage>
<lat><% =lat%></lat>
<lng><% =lon%></lng>
</marker>
<% end %>
</lr:GridPhotoCell>
</lr:ThumbnailGrid>
</markers>

Which just builds up the xml file from the details of each image. The only tricky bit is converiting the coordinates to decimal degrees which is achieved by this bit of code
<%
local gpsData = image.metadata.GPS
local lat
local lon
if gpsData ~= "" then
local iter = string.gmatch(image.metadata.GPS, "%d+")
lat = iter() + (iter() * 60 + iter()) / 3600
lon = iter() + (iter() * 60 + iter()) / 3600
if string.find(gpsData, "S") then
lat = -lat
end
if string.find(gpsData, "W") then
lon = -lon
end
%>

Then it was just a question of modifying the javascript to pickup the values from the generate xml file. Using JQuery this is easily achieved like this:
var name = $(this).find('name').text();
var desc = $(this).find('desc').text();
var largePage = $(this).find('largePage').text();
The rest of the code is pretty standard stuff from the SDK.
I hope you found this of use and please leave a comment if you use the code anywhere, I love to know who reads this stuff