Previous projects combined geotagged Flickr photos with the Google static maps, but the data was presented side-by-side. To truly combine the data, I went from Static Maps API V2 to Google Maps JavaScript API V3. (ShowPix used static maps; see Using “Where on Earth” Codes in Flickr.)

The JavaScript maps are dynamic, multilayered elements that you can manipulate through the document object model (DOM). Of course, that increases their complexity, because now you have server-side code writing JavaScript to be executed on the client side.

Mappr is a small browser app that displays geotagged photos on a map. In order to keep the display free of controls, it has a separate control panel where you configure which photos to display, and how to display the photos. The Mappr Panel is the starting point for the app.

The flickr.photos.search API method does not have a way to return each photo’s latitude and longitude returned in the response. I wish they would add it to the “extras” argument. Instead, once I get the list of photos, I have to make a call to flickr.photos.geo.getLocation for each and every photo. So if you max out and ask for 250 photos (the most Flickr allows for geotagged queries), my poor PHP program will sit on the server while it makes 251 calls to Flickr HQ. This is a noticeable delay.

But Mappr is worth the wait, because seeing your photos on a map is fun. And Google makes it easy (after a few days of pouring over the reference manuals and other forums). Just like the old static maps, all I have to do is build a bounding box by giving it a list of points to be included, and it figures out the required coordinates and zoom level. The map fills the browser’s window. I built the app starting from the “map-simple” file they provide in their examples. Curiously, though they call the main element “map_canvas,” it’s inside a div tag, not the new HTML5 canvas element.

The first thing you might notice about Mappr is the photos will auto-disperse if they overlap. But wait – there’s more!

Just to have fun with the power of the map, I added some keyboard buttons to reposition the photos.

S: spiral     C: circle     D: doughnut     V: vertical line     H: horizontal line     M: all in the middle     P: all in the same random point     R: each in its own random point     B: block     O: original locations

If you press G (go), your next command will take place slowly.

Since the Mappr Panel does nothing more than build the URL to direct the PHP program, you can see the results directly via a configured URL:

More options are available via the Mappr Panel.

A Better Way to Map Photos

Leave a Reply