HeatmapperI’ve made a few different programs that display Flickr photos, but this is the best one yet. Give Heatmapper a try and see what you think.

The program searches only photos that have been geotagged. You control the boundaries of the search by moving the map before starting the search. You can pan and zoom the map, or just type a description of a place and use the built-in auto-complete geocoder.

You can narrow your search by matching for a word, or limiting the search to a specific user or group. If you leave both fields blank, you’ll see only photos added in the last 12 hours.

Each search returns the 250 “most interesting” geotagged photos.

If you uncheck the “replace” box, conducting a new search will add new pins to the map instead of starting over, and the new heat map will be drawn over the previous one. You can switch to different gradients for the heat map in order to make comparisons easier.

Once the map is created, a ribbon of thumbails is shown below. Hovering over a map will cause the selected photo to scroll to the center. Hovering over a photo will cause the related pin to bounce up and turn red. Click on the photo to view it on the original Flickr site. The ribbon places photos in order of “interestingness”, with the highest-ranked one on the left.

You can partially control the program by using parameters in the URL. For example:

mvjantzen.com/flickr/heatmapper.html?center=38.90,-77.04&zoom=14&search=dc&run

The above link will position the map around 17th & H NW in Washington, DC, then run a search for geotagged photos containing the word “DC”. That may seem redundant, but leaving out the text search would give results from the past 12 hours rather than the all-time most interesting photos.

Here’s another example, that searches for geotagged photos from a specific user:

mvjantzen.com/flickr/heatmapper.html?center=38.90,-77.04&zoom=14&user=glynlowe&run

heatmapper2The Heatmapper makes it fun to explore photos.

Coding the JavaScript

The program uses the Flickr API via a custom proxy service to get back the geotagged photos. The Google Maps JavaScript API was used to draw and control the map. The Visualization library was used to implement the heatmaps, and the Places library was used to implement the Places autocompete. I also used the Google Charts API to create pins in custom colors, and the Google Web Fonts library.

This was originally based on the WordWhere program, which you can read about at Where Do Words Appear?

I hope to add more features, but wanted to make this version available to help shake down bugs and errors. Comments and suggestions welcome!

A Better Way to Map Flickr Photos

Leave a Reply