February 22, 2007

New callback function in TagMaps

When we released TagMaps / World Explorer last month, we also released an embeddable version that bloggers and developers around the world have put on their blogs and websites. You thought that was cool: but not cool enough. One key thing was missing from the embedded TagMaps - the ability for third party developers to customize interactions that respond to the tags selected by users. So, today, we are releasing an update to the embeddable TagMaps badge. Using the updated module, you can implement a JavaScript callback function on the page where you have embedded TagMaps. On that page, then, you can create any service you can think of that takes advantage of knowing what tag the user is interested in, and where in the world it is located.

To demonstrate how this works, I’ve created a quick mashup of neighborhoods in San Francisco derived from Craigslist. It looks like this:

When the user hovers over a tag, the TagMaps badge calls the JavaScript function on the page which then displays information about that tag from Flickr, Yahoo! Video, Wikipedia, Craiglist and Yahoo! Answers. There’s a lot going on here, but it’s pretty easy for anyone to create.

First, I used the badger page to generate my HTML snippet. By default, the badger will use the World Explorer GeoRSS feed we created of tags derived from over 7M geotagged photos on Flickr. But we also allow you to create your own custom GeoRSS tag feed to display on the map. That is what I did here - I created a GeoRSS feed containing the name of each neighborhood as the tag to display on the map, along with the lat/long coordinates of where to place the tag. On the badger page, I specified my own custom GeoRSS feed rather than using the default World Explorer GeoRSS feed. Finally on the badger page, I also specified that I will be implementing a callback function.

The generated HTML snippet creates a stub JavaScript function for me to include on my page:

function onTagSelected(tag, tagid, tagLat, tagLon,
mapMinLat, mapMinLon, mapMaxLat, mapMaxLon, mapZoom)

This function will be called when the user selects a tag on my TagMaps badge. I know the tag that the user selected, the lat/long of the tag, as well as the bounding box (upper left, lower right) coordinates of the current map view. Read the documentation here.

Next, I implemented my 'onTagSelected" function to fetch and display interesting and useful information for the tag selected. First I grab the most interesting photos from Flickr with that tag, and videos from Yahoo! Video, questions and answers from Y! Answers using the Yahoo! APIs via JSON. I also grab the Wikipedia entry for the selected neighborhood tag and apartment listings from Craigslist, with a little help from our new friend, Yahoo! Pipes. You can see how I built my Wikipedia pipe here. If you haven’t experimented with Pipes, I can’t recommend it highly enough -- it’s an incredibly powerful tool that will let you "rewire the web" with very little effort.

Finally, I put it up on my website. You can play with it live at: http://shaneahern.com/sfexplorer.html.

So hopefully this quick example of the new powerful what-you-asked-for embeddable TagMaps has sparked your imagination. The rest is really up to you. We’re looking forward to what you come up with.

Shane Ahern
Research Engineer
Yahoo! Research Berkeley

Posted at February 22, 2007 3:58 PM | Permalink

Bookmark this on Delicious

Comments

Posted by: David Scott at February 26, 2007 11:16 AM

Posted by: isaac at March 15, 2007 5:28 PM