-
Notifications
You must be signed in to change notification settings - Fork 61
/
index.html
70 lines (60 loc) · 2.37 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Twitter Showdown</title>
<link rel="stylesheet" href="http://api.tiles.mapbox.com/mapbox.js/v0.6.3/mapbox.css" type="text/css" />
<link rel="stylesheet" href="fonts/fonts.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/mapbox.share.css" type="text/css" />
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<script src='https://api.tiles.mapbox.com/mapbox.js/v0.6.3/mapbox.uncompressed.js'></script>
<script src="ext/jquery.min.js"></script>
<script src="ext/underscore.min.js"></script>
<script src="ext/mapbox.share.js"></script>
<script src="tweetRace.js"></script>
</head>
<body>
<div id="header">
<h1>Twitter Showdown</h1>
</div>
<div id="content">
<img id="logo" src="img/illustration.png" alt="Work vs. Play">
<table id="counter">
<tr>
<th class='first'>First Tweets</th>
<th class='second'>Second Tweets</th>
</tr>
<tr>
<td class='first'>--</td>
<td class='second'>--</td>
</tr>
</table>
<a href="#" id="stop">Pause</a>
<div id="about">
<h2>About this Site</h2>
<p>Follow two competing live Twitter feeds, one including tweets with the keyword 'play', and one with tweets that include the keyword 'work'. Find out which parts of the country are working hardest and which ones are having the most fun. </p>
</div>
</div>
<div id="map" class="map"></div>
<!-- Site configuration -->
<script type="text/javascript">
// Specify the tweets and location / radius to search
var tweets = [
'work', // First term
'play', // Second term
'39,-98,1500mi' // search location and radius (lat,lon,radius)
];
mapbox.auto('map', 'https://a.tiles.mapbox.com/v3/examples.map-dg7cqh4z.jsonp?secure', function(map, tiledata) {
map.centerzoom({
lat: 40,
lon: -80
}, 4);
map.setZoomRange(2, 15);
tweetRace.start(map);
// Add share control
mapbox.share().map(map).add();
});
</script>
</body>
</html>