forked from carlosale214/PinTweets-1
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
168 lines (149 loc) · 9.94 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1"> <!-- for Chromium IE Redirect -->
<link href="css/ui-lightness/jquery-ui-1.8.15.custom.css" type="text/css" rel="Stylesheet" /> <!-- jQuery UI stylesheet-->
<link href="css/jquery.toastmessage.css" type="text/css" rel="stylesheet"/> <!-- toastmessage -->
<link href="css/PinTweets.css" type="text/css" rel="stylesheet" /> <!-- css file-->
<link href="http://fonts.googleapis.com/css?family=Lobster" type="text/css" rel="stylesheet"/> <!-- font -->
<link href="favicon.ico" rel="icon" type="image/png"> <!--FAVICON DOES NOT WORK IN FIREFOX, SAFARI, CHANGE TO PINTWEETS.COM-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script> <!-- JavaScript-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script> <!-- for Chromium IE Redirect //FOR GCF BRENDAN,CAN YOU HAVE A LOOK?-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <!-- Google Maps-->
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> <!-- jQuery-->
<script type="text/javascript" src="js/jquery-ui-1.8.15.custom.min.js"></script> <!-- jQuery UI -->
<script type="text/javascript" src="js/jquery.toastmessage.js"></script> <!-- toastmessage -->
<script type="text/javascript" src="js/WithinPin.js"></script> <!--purpose-built JavaScript-->
<script type="text/javascript" src="js/loadMap.js"></script> <!--purpose-built JavaScript-->
<script type="text/javascript" src="js/PinTweets.js"></script> <!--purpose-built JavaScript-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-25206950-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<title>PinTweets</title>
</head>
<body>
<!--[if IE]>
<script type="text/javascript">
window.location = "http://www.pintweets.com/PinTweets_ie.html";
</script>
<![endif]-->
<div id="wrapper">
<div id="header">
<h1>Pin Tweets<sup>beta</sup></h1>
</div>
<ul class="topnav above">
<li id="MapLabel">
<div title="Show map">Map</div>
</li>
<li id="GreatSearchesLabel">
<div title="Show great searches">Great Searches</div>
</li>
<li id="AboutLabel">
<div title="Show website information">About</div>
</li>
<li id="ContactLabel">
<div title="Contact the developer">Contact</div>
</li>
</ul>
<!--Canvas Possibilities-->
<div class="canvas" id="Map">
Loading Tweets...
</div>
<div class="canvas canvasText" id="no_location">
<h2>Tweets found, but none are geocoded.</h2>
<h2>Please modify your search or try again later.</h2>
</div>
<div class="canvas canvasText" id="no_results">
<h2>No Tweets found.</h2>
<h2>Please modify your search or try again later.</h2>
</div>
<div class="canvas canvasText" id="timeout">
<h2>The search has timed out. This may be an issue with your Internet connection, or you may have breached Twitter's hourly search limit. Please try again later.</h2>
</div>
<div class="canvas canvasText" id="GreatSearches">
<h3>Below are some my of favorite searches. <a href= "mailto:dvizzini@pintweets.com" target="_blank">Contact me</a> to suggest others.</h3>
<p><a onclick="loadSearch('tweetContent=%23nowplaying');">#nowplaying</a></p>
<p><a onclick="loadSearch('tweetContent=%23godblessamerica');">#godblessamerica</a></p>
<p><a onclick="loadSearch('tweetContent=%23leadberkeley');">#leadberkeley</a></p>
<p><a onclick="loadSearch('tweetContent=%22Abraham%20Lincoln%22&geocode=-7.003327635865509,107.89065420527345,100mi');">Abraham Lincoln in Indonesia</a></p>
<p><a onclick="loadSearch('tweetContent=%22Jenny%20from%20the%20block%22&geocode=35.719373368765346,137.93100646250014,500mi');">Jenny from the Block in Japan</a></p>
<p><a onclick="loadSearch('tweetContent=%22Mark%20Twain%22&geocode=18.46788197326275,-69.93102369694827,10mi');">Mark Twain in Santo Domingo</a></p>
<p><a onclick="loadSearch('tweetContent=%22Mark%20Twain%22');">Mark Twain Worldwide</a></p>
</div>
<div class="canvas canvasText" id="About">
<h3>"Facebook feels like a mall. Twitter feels like the street."</br> -William Gibson</h3>
<p>As succinct as this comment is, in one important aspect it is not true. On the street, geography is paramount. On Twitter, it is a little line in a user profile.</p>
<p>This website seeks to restore geography's place in the wonderful absurdity that is Twitter. Enjoy.</p>
<h3>Are you some kind of CIA-sponsored hacker?</h3>
<p>I wish. Any Tweets displayed from a public (as opposed to protected) account. Such Tweets can be readily accessed through Twitter. This website simply displays them geographically.</p>
<h3>How do you determine the location of Tweets?</h3>
<p>When someone geocodes his or her Tweets, I take that location. More often, I apply a few heuristics, and then use Google's geocoding service to determine the coordinates of the location given in one's Twitter profile.</p>
<h3>My Tweets, or my child's Tweets, are on this map and I do not want them to be. What can I do?</h3>
<p>If you are tweeting your exact location, either disable the geocoding function of the Twitter account or make the account protected. If you are not, first ask yourself if you really care that the Tweets are always marked someplace downtown. If you do, either erase the location from your Twitter profile or make the account protected.</p>
<h3>My Tweets are not on this map and I want them to be. What can I do?</h3>
<p>First, make sure the Twitter account is public. Then, if you want your exact location displayed, enable the geocoding function. If you want the same location displayed for each of your Tweets, type that location in your profile. Note that if you do both, the exact location will be marked whenever possible.</p>
<h3>I use the pin and I get a cluster of results near it and then two in other continents. Why?</h3>
<p>One possibility is Retweets. Someone near your pin retweeted someone elsewhere. When Twitter allows me to address this situation, I will. Another is that, during the course of handling 200 million daily Tweets, Twitter simply returned incorrect information.</p>
<h3>I see a profile whose location is "The World" and its Tweets show up in the Hague. Why?</h3>
<p>In such ambiguous situations, Google's geocoding service takes a best guess. It is often ingenious, sometimes whimsical, and other times grossly inaccurate. "TO," a common moniker for Toronto, is apparently in the middle of Brazil. I have considered ways to avoid displaying such locations, but none are foolproof and all will take time to program. Remember that no information from this site will ever be admissible in any self-respecting court of law. Pin Tweets if for fun.</p>
<h3>Is there anyone you would like to acknowledge?</h3>
<p>I send my respect and gratitude to Justin Martinez, Brendan Nee, and Jack Reilly for lending me their expertise in developing this website. I also send my appreciation to Google and Twitter for their API's.</p>
</div>
<div class="canvas canvasText" id="Contact">
<h3>Like so many websites, Pin Tweets is the project of a Berkeley grad student with some time in August.</h3>
<p>Feel free to contact me, Daniel Vizzini, at <b><a href= "mailto:dvizzini@pintweets.com" target="_blank">dvizzini@pintweets.com</a></b>. Follow me at <a href="http://twitter.com/#!/vizzmaster" target="_blank">@vizzmaster</a>.</p>
<p>I would love to know about bugs or to hear your suggestions.</p>
<h3>Have a great search?</h3>
<p>Please contact me. I might add it to Great Searches.</p>
<h3>Want to contribute to the code?</h3>
<p>Please contact me. I would love to add some HTML5 and a backend, likely in node.js. You are most welcome to do this or whatever else your heart desires.</p>
<h3>Can you just show me the GitHub?</h3>
<p>Of course. <a href="https://github.com/dvizzini/PinTweets/blob/master/js/PinTweets.js" target="_blank">https://github.com/dvizzini/PinTweets/blob/master/js/PinTweets.js</a>.</p> </div>
<div id="sidebar">
<ul class="topnav middle">
<li id="SearchLabel">
<div title="Show search form">Search</div>
</li>
<li id="ResultLabel">
<div title="Show tweets at selected marker">Result</div>
</li>
</ul>
<span class = "sideCanvas" id="Search">
<form method="get" id="searchForm">
<fieldset class="search" title="Enable pin placement">
<div>Click the "Pin" button, place pin on map and enter radius in miles.</div>
<div class="box"id ="pinButton">Pin</div> <input type="text" class="box" id="radius">
<div style="clear: both;"></div>
<div>Enter content:</div>
<input type="text" class="box" id="tweetContent" value="#nowplaying">
<div>From user (with or without "@"):</div>
<input type="text" class="box" id="from">
<div>To user (with or without "@"):</div>
<input type="text" class="box" id="to">
<div>Since (yyyy-mm-dd):</div>
<input type="text" class="box date" id="since">
<div>Until (yyyy-mm-dd):</div>
<input type="text" class="box date" id="until">
<div id="refreshMap" title="Refresh map with above criteria">Submit</div>
<img id="loader" src="images/ajax-loader.gif" alt="Loading Tweets..." />
</fieldset>
</form>
</span>
<span class = "sideCanvas" id="Result">
<div class="search sidebarContentTitle" id="resultText">Select a marker on the map to see the content of its Tweet.</div>
</span>
</div>
<div style="clear: both;"></div>
<ul class="topnav below"></ul>
<div id="caption"></div>
</div>
</body>
</html>