forked from interactivethings/swiss-transport-flows
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
141 lines (124 loc) · 5.56 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Swiss Train Flows</title>
<meta name="description" content="Submission for the Make.OpenData.ch Camp 2012">
<meta name="author" content="">
<link href="http://polymaps.org/style.css" rel="stylesheet" type="text/css" />
<link href="assets/css/normalize.css" rel="stylesheet" type="text/css" />
<link href="assets/css/custom-theme/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/tipsy.css" rel="stylesheet" type="text/css" />
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="overlay"></div>
<div id="map"></div>
<div id="panel" class="unfolded">
<div class="section" id="title">
<a href="http://make.opendata.ch/"><img src="assets/img/make.opendata.ch_logo_s.png"></a>
<h1>Swiss Train Flows</h1>
<p><a href="http://make.opendata.ch/">Make.OpenData.ch Camp 2012</a></p>
<a href="#" title="Toggle Panel" id="panel_toggle">hide</a>
</div>
<div class="section" id="location">
<h2>Location</h2>
<!-- Use this to locate user position -->
<a href="#" title="Find nearest station" id="location_btn">Locate</a>
<input type="text" id="location_txt" placeholder="Enter your station" / >
</div>
<div class="section" id="time">
<h2>Time <div id="hourLabel"></div></h2>
<!-- Use this to animate over time -->
<div class="ui">
<a href="#" title="Play animation" id="time_play_btn">Play</a>
<div id="time_slider"></div>
</div>
</div>
<div id="focus" class="section">
<h2>Focus</h2>
<ul>
<li>
<input name="focusRadio" type="radio" id="showRailwaysChk" checked>
<label for="showRailwaysChk">Railways</label>
<p class="explain">How many passenger trains are going within the selected hour and what is their speed.</p>
</li>
<li>
<input name="focusRadio" type="radio" id="showStationsChk">
<label for="showStationsChk">Stations</label>
<p class="explain">How many passenger trains stop at the stations within the selected hour.</p>
</li>
<!--
<li>
<input type="checkbox" id="showSpeedChk" checked>
<label for="showSpeedChk">Train speed</label>
</li>
<li id="animation_toggle">
<br/>
Train arrivals:
<a href="#" id="startArrivalsAnim">start</a>
<a href="#" id="stopArrivalsAnim">stop</a>
</li>
-->
</ul>
</div>
<div class="section" id="legend">
<h2>Legend</h2>
<img src="assets/img/legend.png">
</div>
<div class="section" id="mapTypes">
<h2>Map</h2>
<ul>
<li>
<input type="checkbox" name="mapType" id="showCitiesChk" value="osm" />
<label for="showCitiesChk">Show cities</label>
</li>
<!--
<li>
<input type="radio" name="mapType" id="mapTypeOSM" value="osm" checked="checked" />
<label for="mapTypeOSM">No labels</label>
</li>
<li>
<input type="radio" name="mapType" id="mapTypeOSMLabels" value="osmlabels" />
<label for="mapTypeOSMLabels">Labels</label>
</li>
-->
<!--
<li>
<input type="radio" name="mapType" id="mapTypeBM" value="bluemarble" />
<label for="mapTypeBM">Satellite</label>
</li>
<li>
<input type="radio" name="mapType" id="mapTypeNone" value="none" />
<label for="mapTypeNone">Hide</label>
</li>
-->
</ul>
</div>
<div class="section last" id="credits">
<p>Map data © <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a></p>
</div>
</div>
<script type="text/javascript" src="assets/lib/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="assets/lib/jquery.tipsy.js"></script>
<script type="text/javascript" src="assets/lib/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/lib/d3.v2.min.js"></script>
<script type="text/javascript" src="assets/lib/polymaps.min.js"></script>
<script type="text/javascript" src="assets/js/init-map.js"></script>
<script type="text/javascript" src="assets/js/fit-projection.js"></script>
<script type="text/javascript" src="assets/js/load-data.js"></script>
<script type="text/javascript" src="assets/js/railways.js"></script>
<script type="text/javascript" src="assets/js/ui.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31432074-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>
</body>
</html>