Friday, September 3, 2010

Putting Europopped on the Map

After spending 3 years of my life making Maps API mashups, I now have a bit of an addiction. Whenever I see geographic information, I have this uncontrollable urge to visualize that information on a map. So when I started reading, a blog that chronicles awesome and awful music videos from European countries, I also started imagining how I could show those blog posts on a map. Last night, between episodes of Arrested development and True Blood (a balanced TV diet), I realized my fantasies: Europopped: On the Map.

Here's a step-by-step of how the mashup works:

  • It uses the JavaScript Maps API v3 to create a map centered on Europe.
  • It queries the Posterous API to retrieve all the tags and tag counts for the blog.
  • It creates markers for each of the tags, using latitude/longitude coordinates stored in the JS, and showing the tag count on top of each marker.
  • When you click on a particular country marker, it queries the Posterous API for all the posts for that tag.
  • It creates a sidebar of links for each post, and setting a click listener that embeds the video for each post in the infowindow.

Here are some tips for how I made it quickly:

  • I used my Spreadsheets Geocoder wizard to get the coordinates for all of the countries, and used a spreadsheet formula to generate JSON from my geocoded spreadsheet.
  • I used to find the ideal map center.
  • I used MapIconMaker Wizard to generate a template marker image URL for my markers, and passesd the tag count into that image URL to change the number for each country.
  • I used my CenterBox control class from another project to create a centered info box instead of the typical infowindow.
  • I used to test the regular expression that extracted the Youtube URLs.
  • I used my Posterous JSON API proxy for all of the API calls.

That's why I love APIs and the web -- once you're aware of them, they make it possible to quickly create new ways to use and explore the data and sites that you love.

Happy EuroPopping! :)

No comments: