geostreaming olympics

What are people thinking about the olympics right now, and throughout the world? It is truly an event that brings people all around the world together.

Last weekend I decided to refactor an older project I did- real time geolocated tweets – to something relevant to right now: the olympics.   A few weeks after I posted the twitter mapping project, I found a similar twitter mapping app with a beautiful implementation using the nodejs twitter framework Tuiter and socketio.

I rewrote the backend using Tuiter, and hooked it into the frontend, which used Leafletjs.  You can check out the app here: http://geostreaming-olympics.herokuapp.com/.  The app queries the Twitter API for geolocated tweets and displays the ones that contain “olympics”.  After a few seconds you should see tweets populating the map as they come in.

While working on the app I was trying to figure out the best way to display time.  It was a bit confusing since the tweets were all GMT and sometimes the js Date() could not properly parse it, producing an “Invalid Date” output, so in the end I scrapped that UI element .  During that process I came across this:

which I thought was pretty funny. Below are more pics:

 

I like this application design, which I pulled from the Tuiter example.  In the background the Twitter stream is always running.  Opening the website opens up a websocket to receive the streaming tweets- so no need for unique calls triggered on the client side.  This simplifies any issues related to rate limiting.  The app is deployed on Heroku, which was surprisingly fast to get up and running.

Some close up screenshots of real time geolocated tweets

I built a tool yesterday to observe geolocated tweets as they came in on a world map.  Its kind of cool to zoom in on specific cities.  After just 30 seconds I gathered quite a few in New York.  Clicking on a marker reveals the profile pic and the tweet.

And then zooming out I could see clusters along cities in the Northeast.

After several minutes I zoomed out to see the world map, but at that point there were too many tweets and my browser crashed.  This is where selective coarsening would be useful.

You can find the project on github.

Using nodejs event streams and leafletjs to display geotagged tweets on a world map

I thought it would be cool to see tweets come in live using the Twitter Streaming API querying with location.  When there is a location bounding box, all tweets that come in have geocoordinates (though a small fraction are null).

Initially I wanted to focus in on a city- Leaflet maps look incredible when you zoom into a city- but the Twitter Streaming API was taking too long to fetch tweets while testing.  I set the bounding box to the world.  You can change the twitter fetch bounding box, as well as the initial mapping bounding box.

This is my first time using them, but from what I understand nodejs event streams allow you to send chunks of data to the browser from the server, as they come in.  This is pretty cool for real time applications.  I wanted to focus this application on immediate tweets, and right now there is no database.  Whenever you run it, you get whatever is coming in the twitter pipeline.

Take a look at the project here.

UPDATE: Note that you need to edit the config.js file with a twitter name and password because querying the streaming API with location is otherwise forbidden.  If you are using an account that already has many apps that query the API constantly (tweet harvesting for example), then you may experience a lag in rate of fetching.  This should not be an issue for most people and can be easily remedied by creating another twitter account to query the API with.