-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
789 lines (738 loc) · 43.8 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
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
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
<!DOCTYPE html>
<html>
<head>
<title>Surface Water Mapping Tool</title>
<!-- meta data -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<!-- Google JavaScript loader tool (for the Maps, Charts APIs) -->
<script src="https://www.google.com/jsapi"></script>
<!-- Google Web Fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="static/images/favicon.png"/>
<!-- Third-party JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key={{ GOOGLE_MAPS_API_KEY | safe }}&v=3.exp&libraries=drawing,geometry,places"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/6.1.5/bootstrap-slider.min.js"></script>
<!-- Third-party CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/6.1.5/css/bootstrap-slider.min.css">
<!-- Load custom JavaScript and stylesheet(s) -->
<link rel="stylesheet" href="static/main.css">
<script src="/static/script.js"></script>
<script src="/static/ee_api_js.js"></script>
</head>
<body>
<!-- Page header -->
<section id="pageheader">
<!-- Logos -->
<div class="logos">
<a href="https://www.usaid.gov/" target="_blank"><img id="usaid" src="static/images/usaid.png" alt="USAID">
<a href="https://www.nasa.gov/" target="_blank"><img id="nasa" src="static/images/nasa.png" alt="NASA"></a>
<a href="http://www.adpc.net" target="_blank"><img id="adpc" src="static/images/adpclogo.jpg" alt="ADPC"></a>
<a href="http://servir.adpc.net/" target="_blank"><img id="servir" src="static/images/servir.png" alt="SERVIR"></a>
</div>
<!-- Navigation bar -->
<nav>
<ul>
<li><button id="homebutton">Home</li>
<li><button id="examplesbutton">Examples</li>
<li><button id="aboutbutton">About</li>
<li><a id="feedbacklink" href="https://docs.google.com/a/sig-gis.com/forms/d/1pOgXeWJaDWg8NlC-ZalZJTzUdv9sVjNdXibZVPo4l4I/edit?ts=57ec6a52" target="_blank">Feedback</a></li>
</ul>
<script>
$(document).ready(function(){
$("#homebutton").click(function () {
$(".map").css("display", "block");
$(".ui").css("display", "block");
$(".legend").css("display", "block");
$("#examples").css("display", "none");
$("#about").css("display", "none");
$("#searchbox").css("display", "block");
});
});
$(document).ready(function(){
$("#examplesbutton").click(function () {
$(".map").css("display", "none");
$(".ui").css("display", "none");
$(".legend").css("display", "none");
$("#about").css("display", "none");
$("#examples").css("display", "block");
$("#searchbox").css("display", "none");
});
});
$(document).ready(function(){
$("#aboutbutton").click(function () {
$(".map").css("display", "none");
$(".ui").css("display", "none");
$(".legend").css("display", "none");
$("#examples").css("display", "none");
$("#about").css("display", "block");
$("#searchbox").css("display", "none");
});
});
</script>
<!-- Search box -->
<input id="searchbox" type="text" placeholder="Search for a location">
</nav>
</section>
<!-- Page content -->
<section id="pagecontent">
<!-- Examples page -->
<div id="examples">
<h1>Example applications</h1>
<p>This page shows a few potential applications for which the Surface Water Mapping Tool could be used, by loading a pre-calculated map in the
tool. These maps only cover the area of interest of each specific example to keep storage and loading times to a minimum. The input parameters
are also updated to match those used to create the example map. If desired, the tool can then be used to replicate the map and extend it over
the entire SERVIR-Mekong area. More extensive explanations and examples can be found in the documentation (at the About page).<br><br>
Click on one of the images below to load an example. If you want to reload the default map that is shown when the application first starts up,
<span onClick="load_default()" style="text-decoration:underline;cursor:pointer">click here</span>.</p>
<script>
function load_default() {
$(".map").css("display", "block");
$(".ui").css("display", "block");
$(".legend").css("display", "block");
$("#examples").css("display", "none");
$("#about").css("display", "none");
$(".months-slider").hide();
$("#searchbox").css("display", "block");
water.App.prototype.setDefaultParams();
water.App.prototype.loadDefault();
}
</script>
<div class="example_items">
<div class="example_item" id="example_1">
<img class="example_img" id="example_1_img" src="static/images/example1.png" onClick="load_example(this.id)">
<span>
<b>Permanent and temporary water</b><br>
The tool is primarily suited to detect permanent and temporary water, in any of its occurrences. Permanent water is water that was
present for most of the time within the chosen period, and as such is often represented by reservoirs, lakes and rivers. Temporary
water is water that was only present for a part of the period, and as such is often represented by floods or (seasonally) inundated
land; wetlands, rice fields, fish ponds, etc.<br>
The example shows the area around Phnom Penh, Cambodia, in 2013. This was a relatively wet year and therefore both permanent and
temporary water are being detected in relatively large areas.
</span>
</div>
<div class="example_item" id="example_2">
<img class="example_img" id="example_2_img" src="static/images/example2.png" onClick="load_example(this.id)">
<span>
<b>Reservoirs</b><br>
Reservoir surface areas can easily be picked up with the tool. By adjusting the time period the user can detect how the extent of a
reservoir changes over time. This means that it is possible to detect:<br>
- when a reservoir was constructed (and how this changed the surface water within its region)<br>
- how reservoir surface area changes over the years (for example, to assess the effect of droughts)<br>
- the long-term seasonality and/or monthly characteristics of reservoirs (by activating the monthly control option)<br>
The example shows Shwegyin Reservoir in Myanmar, which was constructed in 2010. The time period has been selected to highlight how
the reservoir was filling up after construction. Permanent water gives an indication of surface water when the reservoir just started
filling up, and temporary water gives an indication of the final extent of reservoir in 2011.
</span>
</div>
<div class="example_item" id="example_3">
<img class="example_img" id="example_3_img" src="static/images/example3.png" onClick="load_example(this.id)">
<span>
<b>Floods</b><br>
As mentioned above, temporary water can be an indication of a flood (although it can also indicate other situations). For this purpose,
the time period should be selected carefully: it should fully capture the period of the flood, while keeping the time period as short as
possible. The latter is a challenge, because of the algorithm behind the tool, which requires a sufficient number of satellite images to
function properly. Therefore, the time period is limited to a three months minimum. This implies that only large scale floods with a
relatively long duration can be picked up by this tool.<br>
The example shows the floods around Bangkok in 2011.
</span>
</div>
<div class="example_item" id="example_4">
<img class="example_img" id="example_4_img" src="static/images/example4.png" onClick="load_example(this.id)">
<span>
<b>River morphology / erosion</b><br>
Permanent water over different time period can show how surface water shifts over time. This can be particularly useful to assess river morphology,
i.e. how the river course changes over the years. In the tool this could be achieved by selecting multiple time periods, updating the map each time.
By downloading these maps as well, the user can carry out analyses on the combination of these maps, to really quantitatively assess the characteristics
of river morphology over a region.<br>
The example shows a section of the Irrawaddy/Ayeyarwady river in Myanmar over a 10 year period (2008-2017). The multi-year time period gives an
indication of where water was present during this time, with permanent water showing where the river was stable and temporary water showing where it
was changing, diverging or meandering.
</span>
</div>
<div class="example_item" id="example_5">
<img class="example_img" id="example_5_img" src="static/images/example5.png" onClick="load_example(this.id)">
<span>
<b>Seasonal inundation</b><br>
Aside from floods, temporary water is often an indication of seasonal inundation. This can be both natural (wetlands) or human-induced (rice fields).
This is more easily picked up than floods, because the inundation often lasts longer and as such it is not hindered by the limitation on the time
period selection. The detection of seasonal inundation can be used to assess:<br>
- the location and area of rice fields and fish ponds<br>
- the location and area of wetlands<br>
- the seasonal characteristics of water bodies<br>
The example shows Tonlé Sap Lake in Cambodia over the period 1988-2017, with the months slider activated. January is shown by default, but the slider
can be used to view the other months. Each month represents an analysis done on all satellite images taken only during that month for 1988-2017.
</span>
</div>
<script>
function load_example(clicked_id) {
var example_id = 'example_'.concat(clicked_id.split('_')[1]);
water.App.prototype.loadExample(example_id);
}
</script>
</div>
</div>
<!-- About page -->
<div id="about">
<h1>About the Surface Water Mapping Tool</h1>
<p>The tool works by merging data from different Landsat satellite missions, providing a dataset that spans from the present day all the
way back to 1984, which is also continously being updated. A stack of images is created for the time period selected by the user. From this
stack of images two percentile maps are calculated, which represent two different situations. The higher percentile (with a default value of 40)
represents the permanent situation; that which was present for the entire selected time period. The lower percentile (default value of 8)
represents a temporary situation; that which was present only for a short time within the selected time period. From each percentile map a
water index map is calculated, using the Modified Normalized Difference Water Index (MNDWI) [Xu, 2006]. This index combines several spectral
bands from the Landsat satellites that are sensitive to the occurrence of water. A threshold value is then applied at the pixel level to classify
water and non-water. Corrections are applied to improve results, reducing errors associated with falsely classified water over dark vegetation and
(hill) shadows. Dark vegetation is masked out using the Normalized Difference Vegetation Index (NDVI) and hill shadows are masked out using a
Height Above Nearest Drainage (HAND) map [Rennó et al., 2008], derived from the Multi-Error-Removed Improved-Terrain (MERIT) Digital Elevation Model
(DEM) [Yamazaki et al., 2017]. The various steps of the tool are shown in the figure below.</p>
<img id="workflow_img" src="static/images/workflow.png">
<p>The resulting water maps are loaded into the web application and displayed on top of the background map. The map calculated from the 40th
percentile map represents permanent water (within the selected time period) and the map calculated from the 8th percentile map represents
temporary water. Permanent water mostly represents reservoirs, lakes and rivers (that did not change a lot over the selected time period).
Temporary water most often represents (seasonally) inundated land, such as wetlands, rice fields or fish ponds. It can also be an indication
of floods or changes in water bodies.</p>
<p>The following layers can be visualized using the tool:<br>
- background <i>(white background that can be used to more clearly see other layers)</i><br>
- HAND <i>(pre-calculated Height Above Nearest Drainge map)</i><br>
- water <i>(the final result; permanent and temporary water)</i></p>
<p>Please note that, due to the statistical nature of this method, the maps are asynchronous in time,
i.e. not each pixel is covered with water at the same time but these maps are an integration over the selected period.</p>
<p>Relevant links:<br>
<a href="https://docs.google.com/document/d/1o7-XUNSVnMLT7VL9a2_7orv7APgiZz1kcPZIFrq9pBE" target="_blank" style="text-decoration:underline">User Guide</a><br>
<a href="https://docs.google.com/document/d/1ZoICFzjbiS_VpdbHyV1SdBPQdEoa_NfL-tAFLgXN9bw" target="_blank" style="text-decoration:underline">Background and verification</a><br>
<a href="https://github.com/Servir-Mekong/SurfaceWaterTool" target="_blank" style="text-decoration:underline">GitHub</a>
</p>
<hr>
<h1>Development and Acknowledgement</h1>
<p>The development of the algorithm using Landsat 8 data was initiated in the PhD research of Gennadii Donchyts (co-funded by Deltares
and the Technical University of Delft). Testing and further development of the algorithm using the Murray-Darling basin in Australia was
funded by the EC FP7 project eartH2Observe (under grant agreement No 603608), which led to the publication of Donchyts et al. (2016), see below.</p>
<p>Application to the Mekong basin, which included testing, applying and adjusting thresholds, as well as further optimisation of the scripts
to fully take advantage of Google Earth Engine capabilities, was supported by the SERVIR-Mekong project. This also included the addition of
data from Landsat 4, 5 and 7. The development of the method to calculate the HAND dataset was fully supported by the eartH2Observe project,
but the application for the Mekong, as well as refinement for this area, was supported by the SERVIR-Mekong project.</p>
<p>Landsat data is made freely available by the U.S. Geological Survey (USGS) and is both accessed and processed in Google Earth Engine.</p>
<p>The creation of the Google Appspot based online application was fully supported by the SERVIR-Mekong project.</p>
<hr>
<h1>References</h1>
<p>Gennadii, D., Schellekens, J., Winsemius, H., Eisemann, E. & van de Giesen, N. (2016). A 30 m Resolution Surface Water
Mask Including Estimation of Positional and Thematic Differences Using Landsat 8, SRTM and OpenStreetMap: A Case Study in the Murray-Darling
Basin, Australia. <a href="http://www.mdpi.com/2072-4292/8/5/386" target="_blank" style="text-decoration:underline">Remote Sensing, 8(5), 386</a>
.</p>
<p>Rennó, C. D., Nobre, A. D., Cuartas, L. A., Soares, J. V., Hodnett, M. G., Tomasella, J., & Waterloo, M. J. (2008). HAND, a new terrain
descriptor using SRTM-DEM: Mapping terra-firme rainforest environments in Amazonia.
<a href="http://www.sciencedirect.com/science/article/pii/S003442570800120X" target="_blank" style="text-decoration:underline">
Remote Sensing of Environment, 112(9), 3469-3481</a>.</P>
<p>Xu, H. (2006). Modification of normalised difference water index (NDWI) to enhance open water features in remotely sensed imagery.
International Journal of Remote Sensing, 27(14), 3025–3033.
<a href="http://doi.org/10.1080/01431160600589179" target="_blank" style="text-decoration:underline">
http://doi.org/10.1080/01431160600589179</a>.</P>
<p>Yamazaki D., D. Ikeshima, R. Tawatari, T. Yamaguchi, F. O'Loughlin, J.C. Neal, C.C. Sampson, S. Kanae & P.D. Bates. (2017). A high accuracy
map of global terrain elevations. Geophysical Research Letters, vol.44, pp.5844-5853.
<a href="http://onlinelibrary.wiley.com/doi/10.1002/2017GL072874/full" target="_blank" style="text-decoration:underline">
doi: 10.1002/2017GL072874</a>.</p>
<p>Landsat images courtesy of the USGS: <a href="https://landsat.usgs.gov/" target="_blank" style="text-decoration:underline">https://landsat.usgs.gov/</a></p>
<p>MERIT DEM: <a href="http://hydro.iis.u-tokyo.ac.jp/~yamadai/MERIT_DEM/" target="_blank" style="text-decoration:underline">http://hydro.iis.u-tokyo.ac.jp/~yamadai/MERIT_DEM/</a></p>
</div>
<!-- The DOM of the application. -->
<div class="water">
<!-- The element into which Google Maps is rendered. -->
<div class="map"></div>
<!-- The UI wrapper. -->
<div class="ui">
<!-- Button that opens the main control box after it has been collapsed -->
<div class="settings-button">☰</div>
<script>
$(document).ready(function(){
$(".settings-button").click(function () {
$(".settings-button").toggle();
$(".panel").toggle();
});
});
</script>
<!-- The main control box. -->
<div class="panel">
<!-- Title, info button with general information text and collapse button. -->
<header>
<h1>
<span id="tool-title">Surface Water Mapping Tool</span>
<!-- collapse button for entire panel. -->
<div class="collapse-button">»</div>
<script>
$(document).ready(function(){
$(".collapse-button").click(function () {
$(".panel").toggle();
$(".settings-button").toggle();
});
});
</script>
<!-- button that toggles display of general information -->
<button class="general-info-button btn btn-default btn-xs pull-right">i</button>
<script>
$(".general-info-button").click(function () {
$(".general-info").toggleClass("general-info-shown");
});
</script>
<!-- General information panel -->
<div class="general-info">
<span>
<b>Welcome to the SERVIR-Mekong Surface Water Mapping Tool.</b><br>
This application allows you to carry out live calculations using a sophisticated water detection algorithm for the SERVIR-Mekong region.
It is based on the algorithm described in <a href="http://www.mdpi.com/2072-4292/8/5/386" target="_blank" style="text-decoration:underline">this paper</a>.<br><br>
You can change the time period over which results are calculated and download the results for a region of your choosing.
If you are confident that you understand the implications, you can also check out the other options which give you greater control over the outcome of the algorithm.<br><br>
Temporary water can, in certain cases, be seen as in indication of a flood. However, both permanent and temporary water are relative to the selected time period. For example,
if a long time period is chosen (e.g. 10 years), temporary water does not necessarily indicate a flood has occurred there, but it does show that water was detected there
for some time within the selected period. To detect flooded water, it is advised to use a time period of 1 year or shorter.<br><br>
Please note that, because everything is calculated on-the-fly, it might take some time for results to load.
</span>
</div>
</h1>
</header>
<!-- Instructions -->
<p class="instructions">
Enter or select a time period to perform a new calculation.<br> Check out the documentation to learn more about the tool.
</p>
<hr>
<!-- Map layers control (toggle layers, opacity) -->
<div class="map-layers-control">
<div class="map-layers-text">
<span>Layers:</span>
</div>
<div class="map-layers">
<!-- Active layers control (toggling / opacity) -->
<div class="map-layers-value" id="map-layers-aoi">
<div id="checkboxAoi">
<input type="checkbox" value="None" id="checkbox-aoi" title="Show/hide layer" checked>
<script>
$('#checkbox-aoi').tooltip();
</script>
</div>
<span>background</span>
<input id="aoiControl" data-slider-id='aoiControlSlider' type="text" data-slider-min="0" data-slider-max="1" data-slider-step="0.1" data-slider-value="0.6"/>
<script>
$('#aoiControl').slider({
tooltip_position: 'top',
formatter: function(value) {
return 'Opacity: ' + value;
}
});
</script>
</div>
<div class="map-layers-value" id="map-layers-hand">
<div id="checkboxHAND">
<input type="checkbox" value="None" id="checkbox-hand" title="Show/hide layer">
<script>
$('#checkbox-hand').tooltip();
</script>
</div>
<span>HAND</span>
<input id="handControl" data-slider-id='handControlSlider' type="text" data-slider-min="0" data-slider-max="1" data-slider-step="0.1" data-slider-value="1.0"/>
<script>
$('#handControl').slider({});
</script>
</div>
<div class="map-layers-value" id="map-layers-water">
<div id="checkboxWater">
<input type="checkbox" value="None" id="checkbox-water" title="Show/hide layer" checked>
<script>
$('#checkbox-water').tooltip();
</script>
</div>
<span>water</span>
<input id="waterControl" data-slider-id='waterControlSlider' type="text" data-slider-min="0" data-slider-max="1" data-slider-step="0.1" data-slider-value="1.0"/>
<script>
$('#waterControl').slider({
tooltip_position: 'bottom',
formatter: function(value) {
return 'Opacity: ' + value;
}
});
</script>
</div>
<!-- Slider for months (climatology) -->
<div class="months-slider">
<span>Month:</span>
<input id="monthsControl" data-slider-id='monthsControlSlider' type="text"/>
<script>
var monthsDict = {1:'1: Jan', 2:'2: Feb', 3:'3: Mar', 4:'4: Apr', 5:'5: May', 6:'6: Jun', 7:'7: Jul', 8:'8: Aug', 9:'9: Sep', 10:'10: Oct', 11:'11: Nov', 12:'12: Dec'};
$('#monthsControl').slider({
min: 1, max: 12, value: 1, step: 1, orientation: 'horizontal', tooltip_position: 'bottom',
formatter: function(value) {
return monthsDict[value];
}
});
</script>
</div>
</div>
</div>
<hr>
<!-- Controls -->
<div class="controls">
<div class="inputs">
<!-- Date selection -->
<div class="input-block date">
<div class="input-block-label">Period:</div>
<input class="date-picker form-control">
<span class="period_slice">-</span>
<input class="date-picker-2 form-control">
</div>
<!-- Expert controls -->
<div class="expert-toggle">
<div class="expert-message">
<button class="expert btn btn-default btn-xs">Show more options</button>
<script>
$(".expert").click(function () {
$(this).text(function(i, v){
return v === 'Show more options' ? 'Hide more options' : 'Show more options'
})
$(".expert-input").toggle();
});
</script>
</div>
</div>
<div class="expert-input">
<div class="input-block climatology">
<span class="expert-input-block-label">Show months:</span>
<input type="checkbox" class="climatology-input">
<button class="climatology-info-button btn btn-default btn-xs">i</button>
<div class="climatology-info">
<span>
Instead of a single map, this will show results for each individual month. This makes it possible to detect monthly trends.
Since this substantially reduces the total amount of images within each map, this does require a longer time period. Instead of
the usual 90 days minimum, the minimum time period when climatology is activated is 3 years. Even so, it is still possible that
a certain month will not have sufficient satellite coverage to show accurate information over the entire area.
Since 12 maps are calculated instead of 1, this can also slow down the application a lot. Please consider these things when activating this option.<br><br>
When activated, a slider for the different months will appear at the layers control section.
</span>
</div>
<!-- toggle the info panel and make sure that it is not shown outside the screen -->
<script>
$(".climatology-info-button").click(function () {
$(".climatology-info").toggleClass("climatology-info-shown");
//$(".climatology-info-shown").css("top", $(".expert-input").position().top);
});
</script>
</div>
<div class="input-block defringe">
<span class="expert-input-block-label">Defringe images:</span>
<input type="checkbox" class="defringe-input">
<button class="defringe-info-button btn btn-default btn-xs">i</button>
<div class="defringe-info">
<span>
Some Landsat satellite images contain noise due to sensor failures. See the following page for background information:
<a href="http://landsat.usgs.gov/products_slcoffbackground.php" target="_blank" style="text-decoration:underline">http://landsat.usgs.gov/</a>.
The defringe algorithm attemps to mask out the pixels where sensor failures are an issue, reducing noise in the final result. However, due to the masking involved,
this does result in less water being detected (especially temporary water), as it reduces the total amount of information. It is therefore important to consider what is most relevant;
reducing the noise (apply defringing) or maintaining as much information from the data as possible (do not apply defringing). Since defringing requires additional steps in the calculation,
it delays the visualization of results slightly.
</span>
</div>
<!-- toggle the info panel and make sure that it is not shown outside the screen -->
<script>
$(".defringe-info-button").click(function () {
$(".defringe-info").toggleClass("defringe-info-shown");
//$(".defringe-info-shown").css("top", $(".expert-input").position().top);
});
</script>
</div>
<div class="input-block percentile">
<span class="expert-input-block-label">Percentiles:</span>
<input type="number" min="0" max="100" name="percentile" class="percentile-input-perm form-control">
<input type="number" min="0" max="100" name="percentile" class="percentile-input-temp form-control">
<button class="percentile-info-button btn btn-default btn-xs">i</button>
<div class="percentile-info">
<span>
The percentile value controls the how the complete stack of satellite images is reduced to a single image (see
<a href="https://developers.google.com/earth-engine/reducers_image_collection" target="_blank" style="text-decoration:underline">GEE documentation</a>
for more info on this). This parameter can take a value between 0 and 100, but in the lower ranges the effect of shadows will deteriorate results, while clouds will do the same in the higher ranges.
The value on the left is used to calculate permanent water, the value on the right for temporary water. The value for permanent water should always exceed the one for temporary water.
For permanent water, it is recommended to stay within the range of 15 - 60. For temporary water, it is recommended to stay within the range of 5 - 15.
</span>
</div>
<!-- toggle the info panel and make sure that it is not shown outside the screen -->
<script>
$(".percentile-info-button").click(function () {
$(".percentile-info").toggleClass("percentile-info-shown");
//$(".percentile-info-shown").css("top", $(".expert-input").position().top);
});
</script>
</div>
<div class="input-block water-threshold">
<span class="expert-input-block-label">Water threshold:</span>
<input type="number" min="-1" max="1" step="0.05" name="water-threshold" class="water-threshold-input form-control">
<button class="water-threshold-info-button btn btn-default btn-xs">i</button>
<div class="water-threshold-info">
<span>
The water threshold value controls when something is classified as water from the Modified Normalized Difference Water Index (MNDWI). For more information on MNDWI,
check out the relevant paper by <a href="http://www.tandfonline.com/doi/abs/10.1080/01431160600589179" target="_blank" style="text-decoration:underline">Xu (2006)</a>. The parameter can take a value
between -1 and 1, with lower values resulting in more areas identified as being water. However, it is recommended to stay within the range of 0.0 - 0.4.
</span>
</div>
<!-- toggle the info panel and make sure that it is not shown outside the screen -->
<script>
$(".water-threshold-info-button").click(function () {
$(".water-threshold-info").toggleClass("water-threshold-info-shown");
//$(".water-threshold-info-shown").css("top", $(".expert-input").position().top);
});
</script>
</div>
<div class="input-block veg-threshold">
<span class="expert-input-block-label">Vegetation threshold:</span>
<input type="number" min="-1" max="1" step="0.05" name="veg-threshold" class="veg-threshold-input form-control">
<button class="veg-threshold-info-button btn btn-default btn-xs">i</button>
<div class="veg-threshold-info">
<span>
The vegetation threshold value controls when something is classified as vegetation, which is used to mask out false-positives from the water detection algorithm.
The latter especially occurs in areas with dark vegetation. This uses the Normalized Difference Vegetation Index (NDVI), which is often used to study vegetation.<br>
A little background information on NDVI can be found, amongst others, at <a href="https://en.wikipedia.org/wiki/Normalized_Difference_Vegetation_Index" target="_blank" style="text-decoration:underline">Wikipedia</a>.
The parameter can take a value between -1 and 1, but it is recommended to stay within the range of 0.2 - 0.6.
</span>
</div>
<!-- toggle the info panel and make sure that it is not shown outside the screen -->
<script>
$(".veg-threshold-info-button").click(function () {
$(".veg-threshold-info").toggleClass("veg-threshold-info-shown");
//$(".veg-threshold-info-shown").css("top", $(".expert-input").position().top);
});
</script>
</div>
<div class="input-block hand-threshold">
<span class="expert-input-block-label">HAND threshold:</span>
<input type="number" min="0" max="9999" step="1" name="hand-threshold" class="hand-threshold-input form-control">
<button class="hand-threshold-info-button btn btn-default btn-xs">i</button>
<div class="hand-threshold-info">
<span>
HAND (Height Above Nearest Drainage) is a method to normalize land elevation values relative to streams. For more information about HAND see the relevant papers by
<a href="http://www.sciencedirect.com/science/article/pii/S003442570800120X" target="_blank" style="text-decoration:underline">Rennó et al. (2008)</a> and
<a href="http://www.sciencedirect.com/science/article/pii/S0022169411002599" target="_blank" style="text-decoration:underline">Nobre et al. (2011)</a>. This makes it possible to use a single value
to mask out false-positives related to elevation, such as hill shades (these can appear similar to water in the processed satellite images). The parameter can take
a value between 0 and 9999 meter. It is recommended to choose a value of at least 10 meter.
</span>
</div>
<!-- toggle the info panel and make sure that it is not shown outside the screen -->
<script>
$(".hand-threshold-info-button").click(function () {
$(".hand-threshold-info").toggleClass("hand-threshold-info-shown");
//$(".hand-threshold-info-shown").css("top", $(".expert-input").position().top);
});
</script>
</div>
<div class="input-block cloud-threshold">
<span class="expert-input-block-label">Clouds threshold:</span>
<input type="number" min="-1" max="100" step="1" name="cloud-threshold" class="cloud-threshold-input form-control">
<button class="cloud-threshold-info-button btn btn-default btn-xs">i</button>
<div class="cloud-threshold-info">
<span>
The cloud threshold value controls when something is classified as a cloud, which will subsequently be removed from the analysis. This is done to reduce the impact of clouds on the algorithm.
The parameter can take a value between 0 and 100, or be turned off completely, by setting it to -1 (default). This parameter an effect on the percentile calculation, as cloud masking is carried out before that step.
As such, changes in this parameter could permit the use of a different percentile value, and vice versa.
</span>
</div>
<!-- toggle the info panel and make sure that it is not shown outside the screen -->
<script>
$(".cloud-threshold-info-button").click(function () {
$(".cloud-threshold-info").toggleClass("cloud-threshold-info-shown");
//$(".cloud-threshold-info-shown").css("top", $(".expert-input").position().top);
});
</script>
</div>
</div>
<div class="reset-button">
<button class="expert-reset btn btn-primary">Reset controls</button>
<button class="submit btn btn-primary">Update map</button>
<script>
$(".expert-reset").click(function () {
water.App.prototype.setDefaultParams();
});
</script>
</div>
<hr>
<!-- Region selection -->
<div class="input-block region">
<div class="input-block-label">Region:</div>
<ul>
<li><input type="radio" name="polygon-selection-method" value="Adm. bounds" id="polygon-selection-method"><label>Adm. bounds</label></li>
<li><input type="radio" name="polygon-selection-method" value="Tiles" id="polygon-selection-method"><label>Tiles</label></li>
<li><input type="radio" name="polygon-selection-method" value="Draw polygon" id="polygon-selection-method"><label>Draw polygon</label></li>
</ul>
<span class="message">
<a class="draw" href="#"></a>
</span>
<span class="message-drawing">
<button class="cancel btn btn-default btn-xs">Cancel</button>
</span>
<span class="message-selected">
<button class="clear btn btn-default btn-xs">Clear</button>
</span>
</div>
<!-- Exporting -->
<div class="input-block">
<span class="input-block-label">Filename:</span>
<input type="text" name="filename" class="filename form-control"
placeholder="default: <SWMT_period>">
<button class="export btn btn-primary" disabled>Export</button>
<button class="export-info-button btn btn-default btn-xs">i</button>
<div class="export-info">
<span>
Exporting results is enabled once you have selected a region (or completed drawing a polygon) on the map. This is done by
first choosing a region selection method above. This will either load a new map layer from which you can select one ore more
areas, or it will allow you to draw a polygon on the map yourself. Since this accesses the same database as the other map layers
it is advised to wait for those to load before making a region selection.<br><br>
You can select multiple areas (up to a maximum of four) by holding down the Ctrl key. Pressing the Esc key will reset the region selection.<br><br>
Optionally, a filename for the to-be-downloaded data can be entered. If omitted, a default filename will be constructed using the selected time period.<br><br>
Clicking the Export button reveals a panel on the top left of the screen. Download links will be shown there once they are ready for use. Map (water) layers are
downloaded as zipped GeoTIFF files (0=no water, 1=temporary water, 2=permanent water). Metadata with input parameters can be downloaded directly as a CSV file.<br><br>
<b>NOTE:</b> Due to limitations with the current implementation of the download option, there is a constraint on the size of the area that can be downloaded.
You will see a warning if the area you have selected or drawn is too big. Near the limit there is a possibility that you receive a corrupted zip file. In that case,
simply delete it and retry the download. We are working on a better implementation of the download option, which will remove all area constraints and other issues.
</span>
</div>
<!-- toggle the export info panel -->
<script>
$(".export-info-button").click(function () {
$(".export-info").toggleClass("export-info-shown");
});
</script>
</div>
</div>
</div>
</div>
<!-- scrollbar for entire panel -->
<script>
$(document).ready(function() {
$(".panel").css("max-height", ($(document).height()-parseInt($(".ui").css('top'), 10))-160);
});
</script>
</div>
<!-- Legend (legend border was used in demo, can be removed!) -->
<div class="legend" style="margin-bottom: 50px;">
<div class="legend-text">
<span>Legend</span>
<button class="legend-info-button btn btn-default btn-xs">i</button>
<div class="legend-info">
<span>
The legend clarifies the map layers. You can toggle between the water legend and HAND legend by clicking on their respective tabs.
The visualization of the layers themselves are handled in the control panel on the right.
</span>
</div>
<script>
$(".legend-info-button").click(function () {
$(".legend-info").toggleClass("legend-info-shown");
});
</script>
</div>
<div class="legend-tabs">
<button class="legend-tab" id="legend-tab-default" onClick="openLegendTab(event, 'water')">Water</button>
<button class="legend-tab" onClick="openLegendTab(event, 'hand')">HAND</button>
</div>
<div class="legend-line"></div>
<div id="legend-tab-water" class="legend-tab-content">
<div class="legend-value" id="legend-water-perm">
<div class="legend-block" style="background-color: #00008b;"></div>
<span>Permanent</span>
</div>
<div class="legend-value" id="legend-water-temp">
<div class="legend-block" style="background-color: #9999ff;"></div>
<span>Temporary</span>
</div>
</div>
<div id="legend-tab-hand" class="legend-tab-content">
<div class="legend-value" id="legend-hand-0">
<div class="legend-block" style="background-color: #3288bd;"></div>
<span>0 m</span>
</div>
<div class="legend-value" id="legend-hand-1">
<div class="legend-block" style="background-color: #99d594;"></div>
<span>20 m</span>
</div>
<div class="legend-value" id="legend-hand-2">
<div class="legend-block" style="background-color: #e6f598;"></div>
<span>40 m</span>
</div>
<div class="legend-value" id="legend-hand-3">
<div class="legend-block" style="background-color: #fc8d59;"></div>
<span>60 m</span>
</div>
<div class="legend-value" id="legend-hand-4">
<div class="legend-block" style="background-color: #d53e4f;"></div>
<span>80 m</span>
</div>
<div class="legend-value" id="legend-hand-5">
<div class="legend-block" style="background-color: #ffffff;"></div>
<span>100+ m</span>
</div>
</div>
<script>
function openLegendTab(event, name) {
tabcontent = document.getElementsByClassName("legend-tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("legend-tab");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById('legend-tab-' + name).style.display = "block";
event.currentTarget.className += " active";
}
$(document).ready(function() {
document.getElementById("legend-tab-default").click();
});
</script>
</div>
<!-- Warning messages placeholder -->
<div class="warnings">
<span></span>
</div>
<!-- Download link(s) panel -->
<div class="download_panel">
<div id="download_prep">
<span>Preparing download link(s)...</span>
</div>
<a id="link1" target="_blank">Click here to download water layer</a>
<a id="link2" target="_blank">Click here to download water layer (2)</a>
<a id="link3" target="_blank">Click here to download water layer (3)</a>
<a id="link4" target="_blank">Click here to download water layer (4)</a>
<a id="link_metadata" target="_blank">Click here to download metadata</a>
</div>
<!-- spinner is shown during calculations -->
<div class="spinner"></div>
</div>
</section>
<!-- Footer -->
<section id="pagefooter">
<div class="logos">
<a href="https://www.deltares.nl/en/" target="_blank"><img id="deltares" src="static/images/deltares_tr.png" alt="DELTARES"></a>
<a href="http://sig-gis.com/" target="_blank"><img id="sig" src="/static/images/sig_tr.png" alt="SIG">
<a href="https://www.sei-international.org/asia" target="_blank"><img id="sei" src="/static/images/sei_tr.png" alt="SEI">
<a href="https://earthengine.google.com/" target="_blank"><img id="gee" src="static/images/google_earthengine_powered_400px.png" alt="GEE"></a>
</div>
</section>
<!-- 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-101791952-1', 'auto');
ga('send', 'pageview');
</script>
<!-- Boot application once the body loads. -->
<script>
water.boot();
</script>
</body>
</html>