Twitter, geocoding, and JavaScript in Baltimore

I drove up to Baltimore’s Beehive coworking space last night to meet the folks in the Baltimore/DC Javascript Users group. We poked around the Twitter API and looked at both what you could get from the API via JSONP and what you could do with it.

The Twitter API is fun, but it doesn’t quite feel serious. It’s inconsistent in the structure of the results it returns to you, and it seems like its results are also inconsistent: you can’t count on getting exactly what you’re asking for. But if you view it as a toy, it’s an interesting way to investigate programming web services in JavaScript.

We gravitated to the geocoding options, which let you specify a latitude, longitude, and radius. In return, you can get the latest statuses posted within that area. More or less. I wouldn’t advocate calling in air strikes based on the results.

The trick to making a call to Twitter, i.e. cross-site, is to use JSONP. What’s that? Well, I wasn’t sure either, but Shea Frederick explained it to me.

  1. A JSONP call sends a request to the URL you designate along with code for an anonymous callback function.
  2. Your browser code, e.g. the jQuery JavaScript library, assigns a funny name like jsonp1205010191854 to the function you’ve defined.
  3. The recipient of the request, which must support JSONP, wraps the results of the request URL in a call to this function.
  4. The received function call is added to your browser’s document and evaluated as though it had been in the file all along.
  5. The results of a JSONP call are usually JSON, so the callback function you designate should be ready to handle JSON.

The general Twitter URL to call to get statuses by location is http://search.twitter.com/search.format?geocode=latitude%2Clongitude%2Cradius. You specify radius with a number followed by “mi” or “km”. For example, “1mi” or “25km”. Note the use of %23 in place of commas in the URL.

To do this with JSONP, you need to specify “json” as your format, and you need to add a parameter pair “callback=?” to the end of the URL. Your broswer code replaces the ? with the name it’s given to your callback function. If you monitor your network traffic, you’ll see the request going out with this value for the callback param.

My rough coordinates are 38.9951,-76.9276. Here’s the URL I use to find Tweets within a mile of me: http://search.twitter.com/search.json?geocode=38.9950%2C-76.9265%2C1mi&callback=?

I leave the callback function as an exercise to the reader, and because I don’t want to publish Shea’s code here. Here’s one way to layout the information, though, appending bits of JSON data to a DIV in your DOM:

Displaying results of our geocoding call with JSONP

A hint. Here’s the structure of the JSON returned. Notice that everything about the statuses is in the ‘results’ object, and that is followed by some metadata. I’ve added spaces after commas to help this text break nicely for you:

jsonp1255103023133({"results":[{"location":"The CP: 38.9935, -76.92519", "profile_image_url":"http://a1.twimg.com/profile_images/52934708/Finger_Pointing_square_normal.gif", "created_at":"Fri, 09 Oct 2009 15:03:02 +0000", "from_user":"goodmike", "to_user_id":null, "text":"Testing the Twitter API: in ur geocodez", "id":4736283179, "from_user_id":239416, "iso_language_code":"en", "source":"<a href="http://twitter.com/">web</a>"}, {"location": ... }], "max_id":4737234991, "since_id":4554368822, "refresh_url":"?since_id=4737234991&q=", "next_page":"?page=2&max_id=4737234991&geocode=38.9951%2C-76.9276%2C2.0mi&q=", "results_per_page":15, "page":1, "completed_in":0.048197, "warning":"adjusted since_id to 4554368822 (2009-10-02 15:00:00 UTC), requested since_id was older than allowed -- since_id removed for pagination.", "query":""});

So how does Twitter get its geocode information? I knew the iPhone sends coordinates, but what I discovered through some 1337 hackery is that you can put coordinates into the location value for your Twitter profile. That’s how I’m in there 0wning your results.

My kung fu is the best

Funny, but most of what you get is geocode spam. Movie theaters and the like. This prompted some talk about filtering out spammers. Frequent posts + lots of followeds + very few followers seems to be the mark of the typical spammer.

The meeting was high quality. The agenda is open for next time. I suggested we might look into Node.js. If I can ever get it to build, I’d like to try some server-side programming with it.