Mapping photographs

Volume 11, Issue 33; 26 Mar 2008; last modified 31 Oct 2010

An AJAX/Google Maps hack. [Update 28 Mar 2008: Now with my Flickr contacts' photographs.]

I've suffered an almost total failure of creativity for the past several weeks. I've been spending almost 100% of my time working on an internal project. Technically, I'm only a half-time resource on the project. In actual fact, I'm an “as much time as it takes to meet deadlines” resource. The time spent thus far has been both deeply uninteresting and intensely stressful. What little time I carve out for other things has been spent trying to keep the XProc specification moving fowards (slowly) and covering my commitments to other working groups (badly).

All of which is preamble so that you'll understand why, when I had an actual (marginally) interesting idea, I leapt at the chance to work on it. To my great satisfaction, it required only the space of two or three hours last night to go from inspiration to completion.

My idea was this: you know how Flickr (and other photography sites) will display your pictures on a map? And you know how I have maps in some of my essays? Wouldn't it be cool if I could display my pictures on my own maps? “Yes”, the answer you're looking for is “yes”, even if it's not a particularly inspired or novel sort of mashup.

Extracting the locations of photographs from my Flickr backup was easy. Generating the points on the map was easy. But having to regenerate the maps everytime I add a new photograph was so Web 1.0.

Instead, I coded it up as a simple little AJAX hack. The server side is driven by a small “database” of geolocated photographs. That gets updated when I backup Flickr, Flickr gets backed up everytime I add photographs, so that's close enough to “real time” for me.

[Update 28 Mar 2008: It occurred to me this morning that with the heavy lifting out of the way, it'd be easy to build a database of my Flickr contacts' photographs and stick them on the maps too. They get blue markers instead of red ones. Nifty.]

I spent an extra few minutes figuring out out to setup the “drag” callback so that the displayed photographs are updated as you drag the map around.

The photographs returned are all those within 0.1 decimal degrees of latitude and longitude from the center of the map (10-15 miles, roughly). What that means is, if you zoom way out and scroll around, you don't see many new pictures. Good places to check: Vancouver, Cromer, the Solent between Lymington and Yarmouth, and parts of Egypt along the Nile.

Comments

I don't see any pictures in Vancouver. Maybe the rain clouds are making them invisible?

—Posted by Dave Orchard on 26 Mar 2008 @ 08:29 UTC #

Really? Were you looking in the right place?

Unfortunately, I didn't have the GPS for some of the earlier trips.

—Posted by Norman Walsh on 26 Mar 2008 @ 10:21 UTC #
Error: missing formal parameter
Source File: http://norman.walsh.name/script/gmapfunc.js
Line: 80, Column: 31
Source Code:
function createImageMarker(lat,long,title,date,url,thumb) {
Note, you should not call variables 'long' or other things on the reserved list: http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Reserved_Words
—Posted by anon on 28 Mar 2008 @ 11:29 UTC #

Good catch. That was careless of me. Fixed.

—Posted by Norman Walsh on 29 Mar 2008 @ 12:06 UTC #