indy2016/index.html at master · wayward710/indy2016 · GitHub

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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE html>
<html lang="en" ng-app="demoapp">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="Wendy Edwards">


    <title>Mapping Natural Events</title>

    <!-- Bootstrap core CSS -->


    <!-- Custom styles for this template -->
    <link href="grid.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" />


    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="grid.css">
    <link rel="stylesheet" href="collapse.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.15.1/ol.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.15.1/ol.css" />

    <link rel="stylesheet" href="time.css"/>
    <script src="time.js"></script>

    <style>
        .map {
            height: 400px;
            width: 100%;
        }
        .overlay_group {
            opacity: 0.75;
        }
    </style>


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->

    <!-- Google Analytics -->
    <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','https://www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-77144556-1', 'auto');
        ga('send', 'pageview');

    </script>

</head>

<body>

<div class="container">
    <!-- The actual map -->
    <div id="map" style=".map"></div>

    <!-- Select map preferences and do EONET search -->
    <div class="panel-group" id="accordion" style="position:absolute;top:2%;left:22%;padding:5px 3px;opacity:0.8">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                        Map Preferences</a>
                </h4>
            </div>

            <!-- Map Preferences -->
            <div id="collapse1" class="panel-collapse collapse in">
                <div class="panel-body">
                    <form role="form">
                        <div class="form-group">
                            <label for="baselayer">Base layer source</label>
                            <select class="form-control" id="baselayer">
                                <option value="VIIRS_SNPP_CorrectedReflectance_TrueColor">Corr Refl True Color</option>
                                <option value="AIRS_CO_Total_Column_Day">Carbon Monoxide (Day)</option>
                                <option value="AIRS_CO_Total_Column_Night">Carbon Monoxide (Night)</option>
                                <option value="AIRS_Dust_Score_Ocean_Day">Ocean Dust (Day)</option>
                                <option value="AIRS_Dust_Score_Ocean_Night">Ocean Dust (Night)</option>
                                <option value="AIRS_Prata_SO2_Index_Day">SO2 (Day)</option>
                                <option value="AIRS_Prata_SO2_Index_Night">SO2 (Night)</option>
                                <option value="AIRS_Precipitation_Day">Precipitation (Day)</option>
                                <option value="AIRS_Precipitation_Night">Precipitation (Night)</option>
                                <option value="MODIS_Aqua_Aerosol">Aqua Aerosol</option>
                                <option value="MODIS_Aqua_Brightness_Temp_Band31_Day">Aqua Brightness (Day)</option>
                                <option value="MODIS_Aqua_Brightness_Temp_Band31_Night">Aqua Brightness (Night)</option>
                                <option value="MODIS_Aqua_Chlorophyll_A">Aqua Chlorophyll</option>
                                <option value="MODIS_Aqua_CorrectedReflectance_TrueColor">Aqua Corrected Reflectance</option>
                                <option value="MODIS_Aqua_Land_Surface_Temp_Day"> Aqua Land Surface Temp (Day)</option>
                                <option value="MODIS_Aqua_Land_Surface_Temp_Night">Aqua Land Surface Temp (Night)</option>
                                <option value="MODIS_Terra_Land_Surface_Temp_Day"> Terra Land Surface Temp (Day)</option>
                                <option value="MODIS_Terra_Land_Surface_Temp_Night">Terra Land Surface Temp (Night)</option>
                                <option value="MODIS_Aqua_Sea_Ice">Aqua Sea Ice</option>
                                <option value="MODIS_Aqua_SurfaceReflectance_Bands121">Aqua Surface Reflectance</option>
                                <option value="MODIS_Terra_Water_Vapor_5km_Day">Terra Water Vapor (Day)</option>
                                <option value="MODIS_Terra_Water_Vapor_5km_Night">Terra Water Vapor (Night/option>
                                <option value="MODIS_Water_Mask">Water Mask</option>
                                <option value="OMI_SO2_Lower_Troposphere">SO2 Lower Troposphere</option>
                                <option value="OMI_SO2_Middle_Troposphere">SO2 Middle Troposhere</option>
                                <option value="OMI_SO2_Upper_Troposphere_and_Stratosphere">SO2 Upper and Strat</option>
                                <option value="VIIRS_SNPP_CorrectedReflectance_BandsM11-I2-I1">Corr Refl Bands M11-I2-I1</option>
                                <option value="VIIRS_SNPP_CorrectedReflectance_BandsM3-I3-M11">Corr Refl Bands M3-I3-M11</option>
                                <option value="AMSR2_Wind_Speed_Day">Wind Speed (Day)</option>
                                <option value="AMSR2_Wind_Speed_Night">Wind Speed (Night)</option>
                                <option value="MLS_N2O_46hPa_Day">Nitrous Oxide (Day)</option>
                                <option value="MLS_N2O_46hPa_Night">Nitrous Oxide (Night)</option>


                            </select>
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox" id="basecheck" checked="true"> Show base layer</label>
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox" id="coastcheck"> Show coastlines</label>
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox" id="labelcheck"> Show labels</label>
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox" id="gridcheck"> Show grid</label>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                        EONET Event Search</a>
                </h4>
            </div>

            <!-- EONET Search -->
            <div id="collapse2" class="panel-collapse collapse">
                <div class="panel-body">
                    <form role="form">
                        <div class="form-group">
                            <label for="eonet_category">Category:</label>
                            <select class="form-control" id="eonet_category">
                                <option value="All">All</option>
                                <option value="6">Drought</option>
                                <option value="7">Dust and Haze</option>
                                <option value="16">Earthquakes</option>
                                <option value="9">Floods</option>
                                <option value="14">Landslides</option>
                                <option value="19">Manmade</option>
                                <option value="15">Sea and Lake Ice</option>
                                <option value="10">Severe Storms</option>
                                <option value="17">Snow</option>
                                <option value="18">Temperature Extremes</option>
                                <option value="12">Volcanoes</option>
                                <option value="13">Water Color</option>
                                <option value="8">Wildfires</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="eonet_days">Number of Days: </label>
                            <input type="text" class="form-control" id="eonet_days" value="180">
                        </div>
                        <button type="button" class="btn-default" id="eonet_reset">Clear results</button>
                        <button type="button" class="btn-primary" id="eonet_btn">Search EONET</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Slider to select date-->
    <div id="day-panel">
        <div id="day-label"></div>
        <div id="day-slider"></div>
    </div>

    <!-- Label displaying information about selected events -->
    <div id="summaryLabel" style="color:black;background-color:white;position:absolute;top:2%;right:10%;padding:5px 5px;opacity:0.8">
        <p></p>
    </div>

    <!-- Description/documentation -->
    <div>
        <h3>Mapping Natural Events</h3>
        <p>Welcome to the EONET event searching and mapping tool.  This application was developed
        for the 2016 NASA Space Apps Challenge in Indianapolis, IN.  You can generate a map by selecting
        a base layer of your choice, using the checkboxes to set preferences, and then searching for
        EONET events by category and date.  If you click on an event, the name and date/time of the
        event should appear in the top right hand corner.</p>
        <p>The NASA Space App Challenge page is at
            <a href="https://2016.spaceappschallenge.org/challenges/earth/earth-live/projects/mapping-natural-events">
            https://2016.spaceappschallenge.org/challenges/earth/earth-live/projects/mapping-natural-events </a>
        </p>
        <p>Questions or feedback?  Please contact Wendy Edwards (<a href="mailto:wayward710@gmail.com">
            wayward710@gmail.com</a>).</p>

    </div>
</div><!-- /container -->

</body>
</html>