Twheat

http://twheat.jquerygeo.com/

Twheat allows you to search for an area and generate a heat map from a Twitter search in real-time. Heat maps and Twitter activity go together like wine (vin!) & Paris:

People tweeting about wine in Paris

People tweeting about wine in Paris!

The UI is simple: an input for location, an input for the Twitter search term, two buttons, and a map. Version 1.1 of the Twitter search API only supplies opt-in geolocated tweets so the heat maps are not as full as they used to be but Twheat is still a fun app to gauge to what extent a topic is being discussed around the globe.

If we have a location & search term, we can search Twitter for tweets within 2500km (Twitter’s limit) of the location’s center. We use the map’s pixelSize (meters per pixel) when zoomed in enough for it to be smaller than 2500km. If we get results, we append them to the map.

If we don’t already have the new tweet’s id in our list, we create a GeoJSON Feature object to store the point and text of the tweet. If the newer coordinates property exists in the tweet object, it is a proper GeoJSON Point and we can append it exactly where it is. However, if we get a place property, we append the point at the center of the place’s bounding box. Using a simple timeout while appending tweets, we ensure that the map doesn’t unnecessarily refresh during the search. We only want to redraw the heatmap once all the tweets from the last search have been appended.

Twheat uses the impressive WebGL Heatmap plugin from Florian Boesch (http://codeflow.org/entries/2013/feb/04/high-performance-js-heatmaps/). If WebGL is not available, Twheat fakes it poorly by just rendering points with it’s own graphics layer. The heatmap is a single, shingled service. Each time the service needs to refresh, we need to draw a new WebGL heatmap since the pixel locations of tweets can change as the user pans & zooms. We draw the heatmap to a hidden canvas and then send it to the map’s service via data URI. This is all done inside the service’s src function.

When moving a cursor around, we search the layer containing tweet points and popup some HTML showing the user & message of any tweets within 16 pixels of the cursor. This is an easy task since the tweet content is embedded in the GeoJSON Features appended to the map. jQuery Geo’s find method returns the original objects appended.

Lastly, we’re using Ben Alman’s jQuery BBQ to update the shareable URL each time the user interacts with the map or the location & search boxes.

The source code to Twheat is available on GitHub! https://github.com/jQueryGeo/twheat