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 Europopped.com, 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 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 getlatlon.com 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 regexpal.com 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! :)