Stap isi

25 July 2010

#LGWN10 tweeps

Last year I knocked up a tweeps map ahead of the 2009 LG Web Network conference. The aim was to link via Twitter ahead of the event – and to muck about with Google’s maps and spreadsheets. Here’s one for this year.

I had intended to use Google Fusion Tables, a tool purpose-built to import and visualize table data online. (It made light work of this visualisation of RTA speed camera locations, ripped from an RTA PDF.) But from the get-go I couldn’t import my spreadsheet from Google Docs. Maybe the service is too beta.

Here then are the steps taken to create the #LGWN tweeps app:

1. Create a spreadsheet in Google Docs with a form to capture user input
2. In sheet 2 of the spreadsheet, import the user data with the function =ARRAYFORMULA(Sheet1!A:E) then run a function in the neighbouring columns to return latitude and longitude (with some randomisation to prevent markers stacking directly on top of each other if two tweeps are in the same location)
3. Share the spreadsheet – make the data public
4. Set up a webpage with a Google Map generated using the excellent new Google Maps API v3
5. Pull in and loop through the XML data, building markers in javascript for each tweep – I used a plugin for my CMS Textpattern but this could be handled natively by the Google Maps API

Geocoding

I chose to geocode within the spreadsheet because I was too timid to tackle the new Geocoder class in the Google Maps API.

I used the CONCATENATE function to construct a URL from the stem http://maps.google.com/maps/geo?output=csv&q= and the user’s location (suburb, town/city, country). For example, copy this URL into your address bar:

maps.google.com/maps/geo?output=csv&q=Darlinghurst,Sydney

The ImportData function runs this URL and adds the result to neighbouring columns. Note the limit of 50 ImportData functions per spreadsheet.

Twits as icons

When building the markers on the map, it was easy to grab the user’s profile picture and description from Twitter via their API. Try this URL with your screen name:

http://api.twitter.com/1/users/show.xml?screen_name=[ScreenName]

I generated a generic shadow using Google Maps Icon Shadowmaker although I didn’t anticipate some profile pictures having transparency.

Copy, paste, cross fingers

I hope this project shows that anyone with HTML, a search engine and some patience can build tools for fun and on the cheap. It’s a monkey see, monkey do approach. Not very efficient, often frustrating, but you have to get your hands dirty.

See Gabriel Svennerberg for a good introduction to the API, work off the demos at Google and find inspiration at Google Maps Mania.

And if you’re coming to LGWN10, add yourself to the map.

— b3rn   community of practice, lgwn, maps   Jul 25, 01:25 PM   #

Comments

no HTML, use Textile

Name

E-mail

Website

Remember

• « Previous
• Next »