-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
156 lines (156 loc) · 8.92 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>SECOORA Climatology Query</title>
<link rel="stylesheet" type="text/css" href="./lib/jquery/DataTables-1.10.2/media/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="./lib/jquery/DataTables-1.10.2/extensions/TableTools/css/dataTables.tableTools.min.css"/>
<link rel="stylesheet" type="text/css" href="./lib/bootstrap-3.1.1-dist/css/bootstrap-select.css"/>
<link rel="stylesheet" type="text/css" href="./lib/bootstrap-3.1.1-dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./lib/jquery/validator/css/bootstrapValidator.min.css">
<link rel="stylesheet" type="text/css" href="style.css?002"/>
<script type="text/javascript" src="./lib/OpenLayers-2.12-rc2-ie10-fix/OpenLayers.js"></script>
<script type="text/javascript" src="./lib/dateFormat.js"></script>
<script type="text/javascript" src="./lib/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./lib/jquery/DataTables-1.10.2/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="./lib/jquery/DataTables-1.10.2/extensions/TableTools/js/dataTables.tableTools.js"></script>
<script type="text/javascript" src="./lib/jquery/DataTables-1.10.2/extensions/TableTools/js/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="./lib/spin.js"></script>
<script type="text/javascript" src="./lib/jquery/jquery.flot.js"></script>
<script type="text/javascript" src="./lib/jquery/jquery.flot.time.js"></script>
<script type="text/javascript" src="./lib/jquery/jquery.flot.crosshair.js"></script>
<script type="text/javascript" src="./lib/jquery/jquery.flot.navigate.js"></script>
<script type="text/javascript" src="./lib/jquery/jquery.flot.stack.js"></script>
<script type="text/javascript" src="./lib/jquery/jquery.flot.fillbetween.js"></script>
<script type="text/javascript" src="./lib/jquery/jquery.flot.axislabels.js"></script>
<!--[if IE]><script type="text/javascript" src="./lib/jquery/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="./lib/bootstrap-3.1.1-dist/js/bootstrap-select.js"></script>
<script type="text/javascript" src="./lib/bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./lib/jquery/validator/js/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="./lib/underscore-min.js"></script>
<script type="text/javascript" src="catalog.js"></script>
<script type="text/javascript" src="main.js?v=008"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-54142140-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body onload="init()">
<div class="container-fluid">
<div class="row">
<div class="col-md-9" id="spinner">
<div class="row">
<div class="col-md-12">
Welcome to the SECOORA CLIMATOLOGY Query tool where you can view and download historical temperature and salinity data from <a data-toggle="tooltip" data-placement="bottom" id="buoyTT" href="#"></a> as well as <a data-toggle="tooltip" data-placement="bottom" id="modelTT" href="#"></a>. Use the panels to the right of the graph to explore the possibilities. You may zoom and pan the interactive graph, and use your mouse to hover over lines to view point information. Please be aware when viewing buoy results and when viewing model results. The information below the map will update to reflect the data sources used to create the graph. If your browser supports Flash, you will be able to download the graph data. For more information about this application, visit our <a href="https://github.com/cgalvarino/climatology-timeseries">GitHub repository</a>. We welcome your comments and questions. Contact us at <a href="mailto:communications@secoora.org">communications@secoora.org</a>.
<br><br>
<div id="resultsWrapper" class="panel panel-default">
<div class="panel-heading">Results</div>
<div class="panel-body">
<div id="time-series-graph"></div>
<div class="row">
<div class="col-md-12" id="footer">
<div class="row">
<div class="col-md-5">
<div id="summary"></div>
</div>
<div class="col-md-7">
<div id="legend" class="pull-right"></div>
<table id="dataTable"></table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="controls" class="col-md-3">
<div class="row">
<div id="vars" class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">Variable</div>
<div class="panel-body"></div>
</div>
</div>
<div id="years" class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">Year</div>
<div class="panel-body">
<select id="year" name="year" class="selectpicker" data-style="btn-custom-lighten active" data-header="Select a year"></select>
</div>
</div>
</div>
<div id="averages" class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">Average By</div>
<div class="panel-body"></div>
</div>
</div>
<div id="sources" class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">Data Source</div>
<div class="panel-body"></div>
</div>
</div>
<div id="locations" class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">Location</div>
<div class="panel-body">
<select id="location" name="location" class="selectpicker" data-style="btn-custom-lighten active" data-header="Select a location">
<optgroup label="Custom (model only)">
<option value="custom">Custom point on map</option>
<option value="manual">Custom coordinates</option>
</optgroup>
</select>
<div id="map"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="coords" tabindex="-1" role="dialog" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Cancel</span></button>
<h4 class="modal-title">Custom coordinates</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="customLat" class="col-sm-4 control-label">Latitude</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="customLat" id="customLat" placeholder="For example: 30.75">
<span class="help-block">Decimal degrees North</span>
</div>
</div>
<div class="form-group">
<label for="customLon" class="col-sm-4 control-label">Longitude</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="customLon" id="customLon" placeholder="For example: 80.25">
<span class="help-block">Decimal degrees West</span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">OK</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>