Hack 39. View Your Photo Thumbnails on a Flash Map

Showing the original locations of your photos on a map is a neat trick, but worldKit lets you go one further, by showing the image thumbnails right on the map itself.

worldKit is a web mapping toolkit that runs in Macromedia's ubiquitous Flash Player. With a little bit of XML, you can configure worldKit to plot a geotagged RSS feed on a map of your choice. We'll look at using your favorite blogging tool to record the places where your photos were taken, and then having worldKit show a thumbnail of each photo in the right place on the map. As an example, check out El Oso's photo map at http://www.el-oso.net/travels/. You can download worldKit and find documentation and examples at http://brainoff.com/worldkit/.

We're going to presume you've already set up your RSS feed to include latitude and longitude. If not, start with [Hack #38] . Once that's done, we'll configure the RSS 2.0 feed in both Movable Type and Radio Userland to include a pointer to the thumbnail of the photo you want to map. If you don't use either of these blogging tools, read on anyway; the same principles can be applied to any blogging system that lets you fine-tune its RSS output. Finally, we'll set up worldKit, and point it at your geotagged RSS feed.

4.6.1. Adding Thumbnail Links to Your RSS Feed

For Movable Type, you can specify the URL of the image thumbnail as follows, in either the keywords or text_more fields:

 36.9716 
 -122.0253
 /images/powerkite.jpg

In order for MT to turn this into RSS, you'll need to add following to your RSS 2.0 template, inside the MTMeta tag:

 <$MTMetaValue name="imgurl"$>

Notice that we use a photo:thumbnail element to specify the location of the thumbnail in the RSS feed. This means we'll also have to declare the photo namespace in the RSS root node in the same template, as follows:

 xmlns:photo="http://pheed.com/photo/">

For Radio Userland, the Location tool also provides this facility. Below the post form, there's an input field for the thumbnail URL. When you provide a URL, it's automatically added to the RSS feed.

4.6.2. Configuring worldKit to Display the Thumbnails

With the data feed in place, all that's left to do is to install and configure worldKit. worldKit relies on a file called config.xml for its configuration details. Here's an example:

 500
 250
 daynight
 day.jpg
 night.jpg
 rss.xml
 60
 false

In order to get worldKit to display your photoblog thumbnails, change the values in the dataurl element to match the URL of your photoblog's RSS feed. For the dayimg element, you can use the default Blue Marble world map included with worldKit, or perhaps try MapProxy (http://brainoff.com/worldkit/mapproxy/) to find some aerial photo imagery of your neighborhood.

If possible, you should store your thumbnails on the same server as the map and RSS feed. This will prevent Flash from issuing unnecessary security warnings.

To install worldKit, upload the files from the distribution into a directory on your web site. Next, drop your modified config.xml file in the same directory. Finally, as described in the worldKit documentation, enter the following bit of HTML to embed worldKit in a web page on your site:

When a visitor to your web site loads the page containing the embedded worldKit map, they'll see each of the thumbnails displayed in turn, next to a colored dot marking its location. Figure 4-5 shows a close-up of a worldKit thumbnail map in action. The user can then roll her mouse over the dot to see the thumbnail again, or click on it to be taken to the relevant weblog entry.

Figure 4-5. Close-up of a worldKit thumbnail map

And that's all there is to it. Now, every image with a latitude and longitude that you add to your photoblog will automatically show up as a thumbnail on your Flash map. See [Hack #8] for another method to add photos to a map.

Mikel Maron