forked from Servir-Mekong/SurfaceWaterTool
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
540 lines (513 loc) · 26.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
<!DOCTYPE html>
<html>
<head>
<title>Surface Water 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="">
<!-- The 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'>
<!-- 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=AIzaSyAbugADQ_kYSQJKXarabTIIuMVvU60djgA&v=3.exp&libraries=drawing"></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>
<!-- The DOM of the application. -->
<div class="water">
<!-- Banner with SERVIR-Mekong logo. -->
<div class="banner" align="right">
<div style="float:right; width:100%; height: 20px; margin:0px 10px; "><img border="0" style="height:25px; margin-top:2px;" src="static/images/servir.png"></div>
</div>
<!-- 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>Surface Water 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>
<!-- Arrow to indicate info button during demo -->
<div class="demo-arrow-general-info">↖</div>
<!-- General information panel -->
<div class="general-info">
<span>
<b>Welcome to the SERVIR-Mekong Surface Water 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">this paper</a>.<br><br>
You can change the time period over which results are calculated and export the results to your own Google Drive (the latter is not active yet, but will be implemented in the future).
If you are confident that you understand the implications, you can also check out the expert settings 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.<br><br>
If you are new to the tool and don't know where to start, consider going through the quick demo right here:
<button class="demo-button btn btn-default btn-xs">DEMO</button>
</span>
<script>
$(".demo-button").click(function () {
if ($(".demo-info").css("display") == "none") {
$(".demo-info").css("display", "block");
};
});
</script>
</div>
</h1>
</header>
<!-- The demo -->
<div class="demo-info">
<div class="demo-info-text">
<span>
<b>This is the Surface Water Tool Demo!</b><br><br>
<!--Click 'Next' to proceed to the next step or,<br> at any time, click 'Exit' to close.-->
Sadly, the demo is not implemented yet. Coming soon!
</span>
</div>
<!--<button class="demo-button-next btn btn-default">Next</button>-->
<button class="demo-button-exit btn btn-default">Exit</button>
</div>
<div class="demo-info-clicks">
<div class="demo-info-click1">
<span>
We will first go over some of the basics of the application, before we dive in a little deeper.<br><br>
All info panels are toggled on/off with their 'i' button.<br>Turn the general information panel off so that we can see a bit more of the map.<br>
Then, click 'Next' to go to the next step of the demo.
</span>
</div>
<div class="demo-info-click2">
<span>
The map shown is a standard Google Maps instance with most of its basic functionality.<br>
You can zoom in/out with the buttons in the bottom right corner, or with the scroll wheel of your mouse.<br>
You can toggle different Google Maps displays with the buttons in the top left corner.<br><br>
The data generated by the algorithm is visualized on top of this map.<br> It displays permanent and temporary water in different shades of blue,<br>
as shown in the legend.
</span>
</div>
<div class="demo-info-click3">
<span>
As a user of this tool, you can specify yourself for which time period you want to visualize the data.<br>This will change the input of the algorithm,
and make it carry out a new run in Earth Engine.<br>Once finished, the new results will be displayed on the map. Because of this on-the-fly calculation,
it might take some time for the results to load.<br><br>
Try it out yourself by changing the time period.
</span>
</div>
<div class="demo-info-click-final">
<span>Congratulations! You've reached the end of the demo!</span>
</div>
</div>
<script>
// 'Next' button
var countClicks = 0; // initialize click counter
$(".demo-button-next").click(function () {
if ($(".demo-info-clicks").css("display") == "none") {
$(".demo-info-clicks").css("display", "block");
};
countClicks ++;
if (countClicks == 1) {
$(".demo-info-click-final").hide();
$(".demo-info-click1").show();
if ($(".demo-arrow-general-info").css("display") == "none") {
$(".demo-arrow-general-info").css("display", "inline");
};
} else if (countClicks == 2) {
$(".demo-arrow-general-info").hide();
$(".demo-info-click1").hide();
$(".demo-info-click2").show();
$(".legend-border").css("border-color", "black");
} else if (countClicks == 3) {
$(".demo-info-click2").hide();
$(".legend-border").css("border-color", "white");
$(".demo-info-click3").show();
} else {
$(".demo-info-click3").hide();
$(".demo-info-click-final").show();
countClicks = 0;
};
});
// 'Exit' button
$(".demo-button-exit").click(function () {
// remove all active demo elements
$(".demo-info-click1").hide();
$(".demo-info-click2").hide();
$(".demo-info-click3").hide();
$(".demo-info-click-final").hide();
$(".demo-info-clicks").hide();
$(".demo-arrow-general-info").hide();
$(".legend-border").css("border-color", "white");
$(".demo-info").hide();
// reset click counter
countClicks = 0;
});
</script>
<!-- Instructions -->
<p class="instructions">
Enter or select a time period to perform a new calculation.<!--<br>Draw up a region to allow data export.--><br> Check out the documentation to learn more about this tool.
</p>
<!-- Legend (legend border is only used in the demo) -->
<div class="legend-border">
<div class="legend">
<div class="legend-text">
<span>Legend:</span>
</div>
<div class="legend-value">
<div class="legend-block" style="background-color: #FFFFFF; border-color: #000000; border-width: 2px"></div>
<span>Study area</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.3"/>
<script>
$('#aoiControl').slider({
tooltip_position: 'top',
formatter: function(value) {
return 'Opacity: ' + value;
}
});
</script>
<div class="aoiAlert">
<span>Loading...</span>
</div>
</div>
<div class="legend-value">
<div class="legend-block" style="background-color: #756bb1;"></div>
<span>Permanent water</span>
<!-- Slider and Loading Alert for merged layer -->
<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 class="waterAlert">
<span>Loading...</span>
</div>
<!-- Slider and Loading Alert for single layer -->
<!--
<input id="waterPermControl" data-slider-id='waterPermControlSlider' type="text" data-slider-min="0" data-slider-max="1" data-slider-step="0.1" data-slider-value="1.0" data-slider-tooltip="hide"/>
<script>$('#waterPermControl').slider();</script>
<div class="waterPermAlert">
<span>Loading...</span>
</div>
-->
</div>
<div class="legend-value">
<div class="legend-block" style="background-color: #bcbddc;"></div>
<span>Temporary water</span>
<!-- Slider and Loading Alert for single layer -->
<!--
<input id="waterTempControl" data-slider-id='waterTempControlSlider' type="text" data-slider-min="0" data-slider-max="1" data-slider-step="0.1" data-slider-value="1.0" data-slider-tooltip="hide"/>
<script>$('#waterTempControl').slider();</script>
<div class="waterTempAlert">
<span>Loading...</span>
</div>
-->
</div>
</div>
</div>
<!-- Controls -->
<div class="controls">
<div class="inputs">
<p><b>Controls:</b></p>
<!-- The year selection control. -->
<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">
<button class="dateSubmit btn btn-primary">Submit</button>
</div>
<!-- The region selection control. -->
<div class="input-block region">
<span class="input-block-label">Region:</span>
<span class="message">
<a class="draw" href="#">Click here to draw on the map</a>
</span>
<span class="message-drawing">
Draw a polygon...
<button class="cancel btn btn-default btn-xs">Cancel</button>
</span>
<span class="message-selected">
Selected
<button class="clear btn btn-default btn-xs">Clear</button>
</span>
</div>
<!-- The exported filename control. -->
<div class="input-block">
<span class="input-block-label">Filename:</span>
<input type="text" name="filename" class="filename form-control"
placeholder="default: SurfaceWater_Export_<year>">
<button class="export btn btn-primary" disabled>Export</button>
</div>
</div>
</div>
<!-- Expert controls -->
<div class="expert-toggle">
<div class="expert-message">
Expert controls
<button class="expert btn btn-default btn-xs">Show</button>
<script>
$(".expert").click(function () {
$(this).text(function(i, v){
return v === 'Show' ? 'Hide' : 'Show'
})
$(".expert-input").toggle();
});
</script>
</div>
</div>
<div class="expert-input">
<p class="expert-instructions">
WARNING! These settings should only be adjusted by expert users! Please check the documentation for more details.
</p>
<div class="input-block climatology">
<span class="expert-input-block-label">Show months:</span>
<input type="checkbox" value="None" 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 on the lower right of the screen.
</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" value="None" 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">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" value="40" name="percentile" class="percentile-input-perm form-control">
<input type="number" min="0" max="100" value="8" 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
<a href="https://developers.google.com/earth-engine/reducers_image_collection" target="_blank"> (see GEE documentation for more info on this)</a>
. 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" value="0.3" 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">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" value="0.35" 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">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" value="25" 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">Rennó et al. (2008)</a> and
<a href="http://www.sciencedirect.com/science/article/pii/S0022169411002599" target="_blank">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="0" max="1" step="0.05" value="0.0" name="cloud-threshold" class="cloud-threshold-input form-control" disabled>
<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 1, with higher values making it less likely that something is classified as a cloud. This has an effect on the percentile calculation, as cloud masking
is carried out before that step. As such, a lower cloud threshold could permit the use of a higher percentile value, and vice versa.<br>
NOTE: this parameter cannot be changed as of now. It will be made active in the future.
</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 class="reset-and-submit-button">
<!-- Reset button -->
<button class="expert-reset btn btn-primary">Reset</button>
<script>
$(".expert-reset").click(function () {
$(".climatology-input").removeAttr('checked');
$(".defringe-input").removeAttr('checked');
$(".percentile-input-perm").val('40');
$(".percentile-input-temp").val('8');
$(".water-threshold-input").val('0.3');
$(".veg-threshold-input").val('0.35');
$(".hand-threshold-input").val('25');
$(".cloud-threshold-input").val('0.0');
});
</script>
<!-- Submit button -->
<button class="expert-submit btn btn-primary">Submit</button>
</div>
</div>
<!-- Block with relevant organisation/company logo and link to websites -->
<hr/>
<div class="attributions">
<a href="https://www.usaid.gov/" target="_blank"><img border="0" src="static/images/usaid.png" style="height: 40px"></a>
<a href="https://www.nasa.gov/" target="_blank"><img border="0" src="static/images/nasa.png" style="height: 40px; margin-left:15px"></a>
<a href="https://www.deltares.nl/en/" target="_blank"><img border="0" src="static/images/deltares_tr.png" style="height:34px"></a>
<a href="https://earthengine.google.com/" target="_blank"><img border="0" src="static/images/googlelogo_color_272x92dp.png" style="height:34px; margin-left:15px"></a>
</div>
</div>
<!-- scrollbar for entire panel -->
<script>
$(document).ready(function() {
$(".panel").css("max-height", ($(document).height()-parseInt($(".ui").css('top'), 10))-20);
});
</script>
</div>
<!-- Slider for climatology -->
<div class="months-slider" align="right">
<input id="monthsControl" data-slider-id='monthsControlSlider' type="text"/>
<script>
var monthsDict = {1:'jan', 2:'feb', 3:'mar', 4:'apr', 5:'may', 6:'jun', 7:'jul', 8:'aug', 9:'sep', 10:'oct', 11:'nov', 12:'dec'};
$('#monthsControl').slider({
min: 1, max: 12, value: 1, step: 1, orientation: 'vertical', tooltip_position: 'left',
formatter: function(value) {
return monthsDict[value];
}
});
</script>
</div>
<!-- Warning messages placeholder -->
<div class="warnings">
<span></span>
</div>
</div>
<!-- Boot application once the body loads. -->
<script>
// Here we get the mapid and token for the map tiles that were generated by Earth Engine using the Python script server.py and injected using the Jinja2 templating engine.
water.boot();
</script>
</body>
</html>