Where is Influxis? Flash + Google Maps + Twitter mash

Posted on Tuesday, April 20, 2010 @ 11:53 CET

As our friends Jerry Chabolla and Grant Garrett from Influxis attempt to escape Germany and make their way back to LA Seb asked if there was any way to see all the tweet locations on one map. I thought it could be a fun, quick project so I fired up Flash, checked out their Twitter streams and whipped up this "mash-up" using Flash, Google Maps and Twitter.

Using the Twitter stream RSS feed

The guys had turned on the location tagging when they got to Paris so by pulling in the RSS feed of their Twitter streams you can see where the tweet was posted from by reading the <georss:point> tag. This tag contains the location and looks like this 40.47338548 -3.67284941.

Anyways, RSS is XML and with E4X its super easy to use in ActionScript 3. Namespaces are a little trickier only because I've used them like twice before, but eventually I got it working. There seemed to be some weird bugs in Flash CS4 where it would just crash when I was using them incorrectly though. CS5 was better, but still beach-balled for a while. In any case the new auto-complete feature in the Actions panel is great!

I've been using the AS3 Google Maps API a lot lately so I went with that since its easy to use, well documented and just works. So after pulling in and parsing the XML, only storing the tweets with location, I created markers for each of the tweets and plotted them on the map.

Lastly adding an onClick event to the markers to show the tweet itself and that was it. All done in the Actions panel too, with no major hair-loss! :)

The hardest part was parsing the date, which is sent as an RFC822 date. I'm not a fan of date parsing so after looking around I found a method that parses it to a native AS3 Date in AS3CoreLib's DateUtils but sadly this library seemed to have some Flex (mx:) dependencies so I just borrowed the bits I needed and was done.

You can check out the first version of the code here. Note: you need to bring in the Google Maps SWC into the project in order to test it out.

Proxies suck

After pushing it to the server I found that I couldn't load in the XML because the crossdomain.xml file on Twitter.com doesn't allow access from a non-Twitter server. Great... Anyways, I found an old proxy script I wrote 4 years ago which seemed to work, so loaded the streams through that and called it a night.

Earlier Seb let me know it wasn't working for him - I'm guessing using the proxy script craps out every now and then.

Using the Twitter API might fix this so I checked out some docs and eventually made it to the search page where they have some cool advanced options like specifying who a tweet came from. Their crossdomain.xml is also a lot friendlier and allows anybody to load in data from them.

Using search

So instead of loading in the Twitter stream I loaded a search that simply got all of Jerry's tweets:

Now that is an Atom feed, not RSS so I tried changing the extension from .atom to .rss and it worked!

Since the Twitter stream is RSS this would save me from changing my parsing method. Sadly there is no location data in the RSS search, so I had to use the Atom version which contains the location <georss:point> nested in a <twitter:geo> element.

Lastly Atom feeds use a W3C Date Time Format so I borrowed a method that parses that from the DateUtils in AS3CoreLib instead.

You can check out the second version of the code here. Note: you need to bring in the Google Maps SWC into the project in order to test it out.

The data is now coming directly from Twitter so it should be a lot more reliable! If you made it down this far, check it out

- paulo

Permanent link