[Live Demo][heroku] [heroku]: http://tweheat.com Use the tour guide at the bottom left of the demo for more detailed explanation of how to use the app.
Realtime twitter heat map that supports multiple concurrent searches. Users can:
- Interact with a map (Mapbox API)
- Find their current location (Leaflet API)
- Connect to Twitter Streaming API
- View a heatmap visualization of all tweets
- Toggle previous search layers on and off
- Combine multiple searches and overlay them
- Search for tweets based on user input
- View Wireframes
- I do not plan on having any database for the MVP. If I get done early there are a few features I can think of that might require it, but for now I would prefer keeping everything streaming and in memory.
I have managed to implement the Mapbox API with rails as well as establishing an asynchronous connection with the Twitter Streaming API using ActionController Streaming on the backend, EventSource on the front end and Puma as the server. I looked into Faye, Websocket, Socket.io and Event Machine, but I think that my current solution should be enough for this project. It would be more simple to use Node.js, but I'm assuming it would be frowned upon if I didn't use Rails. The server will only ever push JSON tweets, nothing more. If the app is noticeably laggy, I might need to change delivery if time permits towards the end. Currently have both the front and back end working separately, but have not combined the API with the marker addition.
Stripping the Twitter::Tweet class of any unncesseary information and packaging it into a new hash for the front end to use. Making sure that the search region of the tweets is limited to the bounding box of the users map (this might change because you don't necessarily want to miss out on mapped tweets just because you are too zoomed in- possibly limit to the US.)
Create Backbone views for the map and the search bar. Implement Zurb Foundation as the front end response framework. Create collections and models for the tweet, as well as a model and collection for Mapbox Layers (i.e. the different searches the user has made.)
Making sure that the Backbone collections and models response to the API stream and correctly place heat markers onto the map. At this point I will also be focusing on adjusting the look of the map and ensuring that it works at all zoom levels.
Updating the Twitter stream to search for the newly inputted search term. Update the view accordingly. Also making sure to retain previous searches (keep the last 3) and making sure that even if a map is not currently being displayed, that it is still accumulating tweet data. Search model and collection.
Hardcore CSS and jQuery mode. Going after a simple look such as Google maps, where the search bar is just an input, but once you click on it or hover over it, it shows the relevant data. Shouldn't require too much div sytling, mostly just making nice CSS animations.
Main feature I will try to implement is a realtime Twitter Search bar. I saw Mozilla has a github repo for it, so I might be able to implement that. Adding a cool animation when a heat marker is added to the map would be nice, and then trying to implement any of the other features from below.
Look at TODO.md in root for micro updates.
- Allow for a "replay mode", aka allowing a user to quickly replay the tweet mapping at 10x speed
- Make the search bar show realtime results like Twitter
- Cool animation on dropping heat marker
- Switch from "Heat Map" to "Tweet Markers"- shows detailed view of tweets and their context
- User login and allowing for tweet composition with geo tagging