To demonstrate the power of the Google Maps JavaScript API, I wrote a program to manipulate geotagged Flickr photos on a map. The Trackr app makes photos appear in the order they were taken, in sync with an animated timeline.

It’s similar to the Mappr app (see A Better Way to Map Photos). Once Mappr’s photos auto-disperse from each other, its map is static until you hit a key to assign the photos to new positions. Trackr’s photos don’t move; instead, their appearance reflects the set’s timeline.

The program is entered via the Trackr Panel, where you configure it to select which photos to display and how to display the photos. The panel builds parameters for the URL for the PHP program, where the real work takes place.

The map has a new element, a playback timer on the bottom. It’s a progress bar that shows how many photos have been displayed. Above the bar are text displays which show information about the most-recently displayed photo: the photo’s date and time, the name of the location, and the sequence number. The Google Maps Javascript API V3 Controls documentation shows how easy it is to add any element you can think of to the map (via the push method).

The animation begins when called by the tilesloaded event. That event is triggered when the map’s images are all finished. Unfortunately, the Flickr images themselves may not have finished loading by this time, so the first sequence may be incomplete. JavaScript’s setInterval function is used to control the animation.

Take a look at the Trackr Panel and experiment with your own photos.

Visualizing the Chronology of Photos

Leave a Reply