-
Notifications
You must be signed in to change notification settings - Fork 0
/
typhoon_map-en.html
433 lines (353 loc) · 15.5 KB
/
typhoon_map-en.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
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
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
<html>
<head>
<title>Follow the hurricane</title>
<style>
html { height: 100%; }
body { height: 100%; margin: 0; padding: 0; }
#map_canvas { height: 100%; }
#checkboxes {
top: 50px;
right: 20px;
font-family: 'arial', 'sans-serif';
font-size: 12px;
background-color: white;
padding: 5px 10px;
}
#info {
position: absolute;
top: 30px;
right: 20px;
bottom: 100px;
padding: 10px;
padding-top: 30px;
background-color: white;
font-size: 12px;
border: 1px solid gray;
font-family: arial;
}
.title {
margin-top: 10px;
margin-bottom: 5px;
font-size: 14px;
font-weight: bold;
background-color: #ddd;
}
text {
text-anchor: middle;
font-size: 30px;
fill: #FFF;
}
#hide {
position: absolute;
top: 31px;
right: 21px;
padding: 2px;
}
.typhoonimage {
width: 280px;
height: 187px;
position: absolute;
background: none repeat scroll 0 0 white;
}
.tabs {
position: relative;
min-height: 150px; /* This part sucks */
clear: both;
width: 320px;
height: 100%;
}
.tab {
float: left;
}
.tab label {
background: #fff;
padding: 10px;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
background: white;
width: 300px;
height: 90%;
right: 10;
bottom: 10;
overflow-y: auto;
}
[type=radio]:checked ~ label {
background: #ddd;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=geometry"></script>
<script type="text/javascript" src="scripts/downloadxml.js"></script>
<script type="text/javascript">
var map = [];
var linePath = [];
var layers = []; // typhoons circles
var paths = []; // typhoons paths
var centers = []; // centers for circles
var linePaths = []; // centers for paths
var visible = []; // visible on map?
var r64 = [];
var r34 = [];
function getCirclePoints(center, radius, numPoints, clockwise) {
// src: https://stackoverflow.com/questions/14397874/draw-ring-not-circle-in-google-maps-api
var points = []
for (var i = 0; i < numPoints; ++i) {
var angle = i * 360 / numPoints;
if (!clockwise) {
angle = 360 - angle;
}
var p = google.maps.geometry.spherical.computeOffset(center, radius, angle);
points.push(p);
}
points.push(points[0]);
return points;
}
function drawCircle(name, latlng, color, rad64, rad34, onmap) {
var circle = new google.maps.Polygon({
paths: [
getCirclePoints(latlng, rad64, 32, true),
getCirclePoints(latlng, rad34, 32, true),
],
title: name,
map: onmap,
fillColor: color,
fillOpacity: 0.6,
strokeOpacity: 1,
strokeColor: "#FFF",
strokeWeight: 1,
draggable: true,
geodesic: true,
});
console.log(name)
google.maps.event.addListener(circle, "mouseover", function() {
circle.setOptions({fillOpacity: 0.8});
circle.setOptions({strokeColor: '#111'});
map.getDiv().setAttribute('title', this.get('title'));
document.getElementById(name).style.visibility = 'visible';
});
google.maps.event.addListener(circle, "mouseout", function() {
circle.setOptions({fillOpacity: 0.6});
circle.setOptions({strokeColor: '#EEE'});
map.getDiv().removeAttribute('title');
document.getElementById(name).style.visibility = 'hidden';
});
layers.push(circle);
}
function drawLine(name, linepath, onmap) {
var line = new google.maps.Polyline({
title: name,
path: linepath,
strokeWeight: 1,
strokeOpacity: 0.8,
// draggable: true,
// geodesic: true,
map: onmap,
});
// console.log(name);
google.maps.event.addListener(line, "mouseover", function() {
// line.setOptions({strokeOpacity: 0.8});
map.getDiv().setAttribute('title', this.get('title'));
});
google.maps.event.addListener(line, "mouseout", function() {
// line.setOptions({strokeOpacity: 0.5});
map.getDiv().removeAttribute('title');
});
paths.push(line);
}
function initialize() {
var myLatLng = new google.maps.LatLng(22.1,99.8);
var myOptions = {
zoom: 2,
minZoom: 2,
maxZoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
downloadUrl("typhoons.xml", function(doc) {
var xmlDoc = xmlParse(doc);
var circles = xmlDoc.documentElement.getElementsByTagName("circle");
var lines = xmlDoc.documentElement.getElementsByTagName("line");
for (var i = 0; i < circles.length; i++) {
// obtain the attribues of each marker
var name = circles[i].getAttribute("name")
var lat = parseFloat(circles[i].getAttribute("lat"));
var lng = parseFloat(circles[i].getAttribute("lng"));
latlng = new google.maps.LatLng(lat,lng);
var color = circles[i].getAttribute("color");
var rad64 = parseFloat(circles[i].getAttribute("rad64"));
var rad34 = parseFloat(circles[i].getAttribute("rad34"));
var onmap = circles[i].getAttribute("onmap");
if (onmap === "map") {
onmap = map
} else {
onmap = null
};
// create the marker
//console.log(onmap);
var circle = drawCircle(name, latlng, color, rad64, rad34, onmap);
centers.push(latlng);
r34.push(rad34);
r64.push(rad64);
visible.push(onmap);
}
for (var i = 0; i < lines.length; i++) {
var name = lines[i].getAttribute("name");
var coor = lines[i].getAttribute("coordinates");
var path = [];
// make array of arrays from string and create LatLng object
var coordinates = coor.split(";")
for (var c = 0; c < coordinates.length; c++) {
var ll = coordinates[c].split(",");
var tempLatLng = new google.maps.LatLng(parseFloat(ll[0]) ,parseFloat(ll[1]));
path.push(tempLatLng);
}
// change string to objects
var onmap = lines[i].getAttribute("onmap");
if (onmap === "map") {
onmap = map
} else {
onmap = null
};
var line = drawLine(name, path, onmap);
linePaths.push(path);
}
});
var yourCenter = new google.maps.LatLng(22.1,99.8);
}
function toggleLayer(i) {
if (layers[i].getMap() === null) {
layers[i].setMap(map);
paths[i].setMap(map);
} else {
layers[i].setMap(null);
layers[i].setOptions({paths: [getCirclePoints(centers[i], r64[i], 32, true),
getCirclePoints(centers[i], r34[i], 32, true),
],});
// layers[i].setOptions({center: centers[i]});
paths[i].setMap(null);
// paths[i].setOptions({path: linePaths[i]});
}
}
function reset() {
for (var i = 0; i < layers.length; i++) {
layers[i].setOptions({paths: [getCirclePoints(centers[i], r64[i], 32, true),
getCirclePoints(centers[i], r34[i], 32, true),
],});
// layers[i].setOptions({center: centers[i]});
// layers[i].setOptions({map: visible[i]});
// paths[i].setOptions({path: linePaths[i]});
// paths[i].setOptions({map: visible[i]});
}
}
function hide_info(id) {
if (document.getElementById(id).style.visibility === 'visible') {;
document.getElementById(id).style.visibility = 'hidden';
} else {
document.getElementById(id).style.visibility = 'visible';
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<div style="position: absolute; left:20px; bottom:10px; width: auto">
<img src="/img/OWlogo200.png">
</div>
<div id="info" style="visibility: visible">
<div class="tabs">
<!-- src: https://css-tricks.com/functional-css-tabs-revisited/ -->
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1" checked>
<label for="tab-2">Legend</label>
<div class="content">
<h2>Follow the hurricane !</h2>
<p>The map shows the paths and sizes of a number of tropical cyclones. You can see how big the cyclone would be in your country by moving the circles around the map.</p>
<div class="title">Categories: (in km/h)</div>
<svg height="70" width="50"><circle r="20" cx="25" cy="25" fill="cyan"/><text dy=".3em" x="50%" y="25">1</text><text x="50%" y="60" style="fill:currentColor; font-size:12px">119-152 </text></svg>
<svg height="70" width="50"><circle r="20" cx="25" cy="25" fill="blue"/><text dy=".3em" x="50%" y="25">2</text><text x="50%" y="60" style="fill:currentColor; font-size:12px">153-177 </text></svg>
<svg height="70" width="50"><circle r="20" cx="25" cy="25" fill="#ffcc00"/><text dy=".3em" x="50%" y="25">3</text><text x="50%" y="60" style="fill:currentColor; font-size:12px">178-209 </text></svg>
<svg height="70" width="50"><circle r="20" cx="25" cy="25" fill="orange"/><text dy=".3em" x="50%" y="25">4</text><text x="50%" y="60" style="fill:currentColor; font-size:12px">210-249 </text></svg>
<svg height="70" width="50"><circle r="20" cx="25" cy="25" fill="red"/><text dy=".3em" x="50%" y="25">5</text><text x="50%" y="60" style="fill:currentColor; font-size:12px">250+</text></svg>
<div class="title">Wind speed and diameter</div>
<p>Diameter of the circle represents the part of the tropical cyclone where the wind speed exceeded 119 km/h (74mph).</p>
<img src="/maps/typhoon/img/tyfoon-legenda2-en.png">
<p>There is an even bigger area around the tropical cyclone with lower wind speed.</p>
<div style="float:left; padding-right:10px"><img src="/maps/typhoon/img/tyfoon-legenda3.png"></div>
<p>When you drag the circles on the map they change their diameter and sometimes even the form. This is due to the <a href="https://en.wikipedia.org/wiki/Mercator_projection">map projection</a>: the real scale increases from the Equator to the poles. The circles change in size in order to be relative to the scale.</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Choose a hurricane</label>
<div class="content">
<div style="float: left"><svg width="280" height="187"><line x1="0" y1="0" x2="280" y2="185" style="stroke:rgb(0,0,0);stroke-width:2" /><line x1="280" y1="0" x2="0" y2="185" style="stroke:rgb(0,0,0);stroke-width:2" /></svg></div>
<div id="Pam" style="position: absolute; visibility:hidden"><img src="/maps/typhoon/img/Pam.gif"></div>
<div id="Haiyan" style="position: absolute; visibility:hidden"><img src="/maps/typhoon/img/Haiyan.gif"></div>
<div id="Hagupit" style="position: absolute; visibility:hidden"><img src="/maps/typhoon/img/Hagupit.gif"></div>
<div id="Katrina" style="position: absolute; visibility:hidden"><img src="/maps/typhoon/img/Katrina.gif"></div>
<div id="Irene" style="position: absolute; visibility:hidden"><img src="/maps/typhoon/img/Irene.jpg"></div>
<div id="Sandy" style="position: absolute; visibility:hidden"><img src="/maps/typhoon/img/Sandy.gif"></div>
<div id="Bertha" style="position: absolute; visibility:hidden"><img src="/maps/typhoon/img/Bertha.gif"></div>
<div id="Noord Atlantic gemiddeld" style="position: absolute; visibility:hidden"><img src="/maps/typhoon/img/NA.jpg"></div>
<div id="Centraal en Oost Pacific gemiddeld" style="position: absolute; visibility:hidden"><img src="/maps/typhoon/img/CSP.jpg"></div>
<div id="Noord West Pacific gemiddeld" style="position: absolute; visibility:hidden"><img src="/maps/typhoon/img/NWP.jpg"></div>
<div id="Ita" style="position: absolute; visibility:hidden"><img src="/maps/typhoon/img/Ita.gif"></div>
<p><i>Hover the mouse over a tropical cyclone to see an image/ animation</i>*</p>
<div class="title">North Atlantic</div>
<input type="checkbox" autocomplete="off" onClick="toggleLayer(7)"/>Average**<br />
<input type="checkbox" autocomplete="off" checked onClick="toggleLayer(6)"/>Hurricane Bertha (2014) <br />
<input type="checkbox" autocomplete="off" checked onClick="toggleLayer(4)"/>Hurricane Sandy (2012) <br />
<input type="checkbox" autocomplete="off" onClick="toggleLayer(5)"/>Hurricane Irene (2011) <br />
<input type="checkbox" autocomplete="off" onClick="toggleLayer(3)"/>Hurricane Katrina (2005) <br />
<div class="title">North West Pacific</div>
<input type="checkbox" autocomplete="off" onClick="toggleLayer(9)"/>Average**<br />
<input type="checkbox" autocomplete="off" checked onClick="toggleLayer(1)"/>Typhoon Hagupit (2014) <br />
<input type="checkbox" autocomplete="off" onClick="toggleLayer(0)"/>Typhoon Haiyan (2013) <br />
<div class="title">Central and East Pacific</div>
<input type="checkbox" autocomplete="off" onClick="toggleLayer(8)"/>Average**<br />
<div class="title">Southern hemisphere</div>
<input type="checkbox" autocomplete="off" checked onClick="toggleLayer(2)"/>Cyclone Pam (2015) <br />
<input type="checkbox" autocomplete="off" checked onClick="toggleLayer(10)"/>Cyclone Ita (2014) <br />
<br />
<input type="button" id="reset" style="padding: 2px;"name="shorttext" value="Reset Positions" onClick="reset()"><br />
<p>* Images by National Oceanic and Atmospheric Administration (NOAA) </p>
<p>** Pictures show the routes and strenght of all tropical cyclones in de period 1985 - 2005 in the respective basin.</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1">
<label for="tab-1">Info</label>
<div class="content">
<h2>Follow the hurricane</h2>
<p>Extreme is the new normal. According to the <a href="http://www.ipcc.ch/publications_and_data/ar4/wg1/en/ch10s10-3-6-3.html" target="_blank">Intergovernmental Panel on Climate Change (IPCC)</a> we need to prepare for more extreme weather worldwide. Tropical cyclones will probably grow in strength as well.</p>
<p><a href="www.oneworld.nl/filippijnen" target="_blank">OneWorld has travelled to The Philippines</a> to see what this means in practice. In 2013 the group of islands got struck by typhoon Haiyan, one of the strongest typhoons ever. Another strong one followed in December 2014; typhoon Hagupit. The East coast of The US is also a regular victim of hurricanes, Katrina being still memorable to this day. Even if not in the hotspot, The Netherlands is also not out of reach of tropical cyclones. Close to the end of its life, tropical storm Bertha managed to knock over a couple of trees in Amsterdam. </p>
<h2>What is a tropical cyclone?</h2>
<div class="title">Beaufort scale</div>
<p>Beaufort scale is a scale to measure the wind speed. It reaches from 0 (calm) through 6 (strong breeze) up to 12 (hurricane force)</p>
<div class="title">Saffir-Simpson</div>
<p>Winds of hurricane force are called tropical cyclones (also: hurricanes, cyclones and typhoons, depending on where on Earth they form). The Saffir-Simpson hurricane scale classifies tropical cyclones into 5 categories.</p>
<div class="title">Dangerous</div>
<p>Category 1 of Saffir-Simpson stands for winds from 119 to 153 km/h (74 - 95 mph) and can produce light damages. Category 3 tropical cyclones and higher are described as major hurricanes. They can cause structural damage to some buildings and even claim lives.</p>
<div class="title">Devastating</div>
<p>Category 5 represents tropical cyclones where the winds exceed 252 km/h (157 mph). They cause heavy and irrepairable damage to buildings and many do not survive them.</p>
<p>More about <a href="http://www.aoml.noaa.gov/hrd/tcfaq/A1.html" target="_blank">tropical cyclones</a>, <a href="http://www.aoml.noaa.gov/hrd/tcfaq/D10.html" target="_blank">Beaufort scale</a>, and <a href="http://www.aoml.noaa.gov/general/lib/laescae.html" target="_blank">Saffir-Simpson scale</a> at <a href="http://www.noaa.gov">NOAA</a>.</p>
</div>
</div>
</div>
</div>
<input type="button" id="hide" name="shorttext" value="Hide window" onClick="hide_info('info')"><br />
</body>
</html>