I have been playing with trying to improve the layout for a searchable Vine Map, and the next iteration is up on googledrive at https://googledrive.com/host/0B2GQktu-wcTiUWduTTMyMG9FZ00/
 |
| Vine Finder - a Searchable Vine/Twitter Map |
In the first iterations, the US map dominated the page. I experimented with removing it entirely, but just can't force myself to do it yet. The US map "lights up" as Vine tweets occur across the country. Clicking a county will bring up a new list that contains just the Vines in that county, which can be played similar to the list on the left.
Mousing over an entry in the list, or the "playing now" Vine, will cause that county to "pop out" on the US map.
In the earlier versions, the only way to watch the videos was to click the little ones there on the side. It turns out that having more than a handful of html5 video tags will wear your cpu out. Well, that has been my experience. So, I just use the video element's "poster" image and overlay a slightly tweaked version of the video-js "big play button" in the list. Clicking the button opens the video in the large video area in the middle of the screen.
As before, using only tweets that have location information seems to weed out almost all of the spicier ones... so far.
Vines from some of the more populated Canadian cities are also included, although for the purpose of this project they are included in the nearest US county.
I had wanted to try some combination of this with the Box2D physics engine. Well, this is trivial to implement using this Box2D Jquery library. You can have the Vines floating around the screen and bumping into each other, all while the videos are playing. While interesting as an artistic effect, the performance was fairly poor due to all the videos.
It is still a bit of a puzzle to me as to how best arrange the various elements on the page. While I think this is improved over the earlier versions, there is room to go, independent of color scheme.
