forked from NOAA-CEFI-Portal/cefi-portal
-
Notifications
You must be signed in to change notification settings - Fork 0
/
hindcast_mom.html
448 lines (385 loc) · 35 KB
/
hindcast_mom.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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>
L_NO_TOUCH = false;
L_DISABLE_3D = false;
</script>
<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
#map_7079a36f74c16e1ce2ab21c4f811b35d {
position: relative;
width: 100.0%;
height: 100.0%;
left: 0.0%;
top: 0.0%;
}
.leaflet-container { font-size: 1rem; }
</style>
<style>
.leaflet-image-layer {
/* old android/safari*/
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges; /* safari */
image-rendering: pixelated; /* chrome */
image-rendering: -moz-crisp-edges; /* firefox */
image-rendering: -o-crisp-edges; /* opera */
-ms-interpolation-mode: nearest-neighbor; /* ie */
}
</style>
<!-- colorbar legend (added for caption size customization) -->
<style>
text.caption {
font-size: 16px;
}
</style>
<!-- the tool function from leaflet -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css"/>
<style>
.foliumtooltip {
background-color: #F0EFEF;
border: 2px solid black;
border-radius: 3px;
box-shadow: 3px;
}
.foliumtooltip table{
margin: auto;
}
.foliumtooltip tr{
text-align: left;
}
.foliumtooltip th{
padding: 2px; padding-right: 8px;
}
#export {
position: absolute;
top: 5px;
right: 10px;
z-index: 999;
background: white;
color: black;
padding: 6px;
border-radius: 4px;
font-family: 'Helvetica Neue';
cursor: pointer;
font-size: 12px;
text-decoration: none;
top: 90px;
}
</style>
<script src="//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.4/leaflet-image.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-minimap/3.6.1/Control.MiniMap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-minimap/3.6.1/Control.MiniMap.css"/>
<script src="https://cdn.jsdelivr.net/gh/ardhi/Leaflet.MousePosition/src/L.Control.MousePosition.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ardhi/Leaflet.MousePosition/src/L.Control.MousePosition.min.css"/>
</head>
<!-- map changes when input send from hindacast.html -->
<script type="text/javascript" src="hindcast_mom.js"></script>
<body>
<div class="folium-map" id="map_7079a36f74c16e1ce2ab21c4f811b35d" ></div>
</body>
<script>
// setup the leaflet map
var map_7079a36f74c16e1ce2ab21c4f811b35d = L.map(
"map_7079a36f74c16e1ce2ab21c4f811b35d",
{
center: [31.716648817062378, -67.26112365722656],
crs: L.CRS.EPSG3857,
zoom: 3,
zoomControl: true,
preferCanvas: false,
}
);
// base map tile layer setting
var tile_layer_54100ad7040d11ae7bf48a7dc0abc71f = L.tileLayer(
"https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png",
{"attribution": "NOAA CEFI Data Portal \u0026copy; \u003ca target=\"_blank\" href=\"http://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors \u0026copy; \u003ca target=\"_blank\" href=\"http://cartodb.com/attributions\"\u003eCartoDB\u003c/a\u003e, CartoDB \u003ca target=\"_blank\" href =\"http://cartodb.com/attributions\"\u003eattributions\u003c/a\u003e", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
).addTo(map_7079a36f74c16e1ce2ab21c4f811b35d);
// png image (default - will be removed after backend update)
var image_data = ""
image_overlay_cbd11cdbf58403fe3f6ba6fec69f8218 = L.imageOverlay(
image_data,
[[5.272542476654053, -98.4422607421875], [58.1607551574707, -36.079986572265625]],
{"opacity": 0, "zindex": 1}
).addTo(map_7079a36f74c16e1ce2ab21c4f811b35d);
// colormap setting and detail
var color_map_b13917af52926c4458f13c8955e429d1 = {};
color_map_b13917af52926c4458f13c8955e429d1.color = d3.scale.threshold()
.domain([-1.0, -0.9959919839679359, -0.9919839679358717, -0.9879759519038076, -0.9839679358717435, -0.9799599198396793, -0.9759519038076152, -0.9719438877755511, -0.9679358717434869, -0.9639278557114228, -0.9599198396793587, -0.9559118236472945, -0.9519038076152304, -0.9478957915831663, -0.9438877755511021, -0.9398797595190381, -0.935871743486974, -0.9318637274549099, -0.9278557114228457, -0.9238476953907816, -0.9198396793587175, -0.9158316633266533, -0.9118236472945892, -0.9078156312625251, -0.9038076152304609, -0.8997995991983968, -0.8957915831663327, -0.8917835671342685, -0.8877755511022044, -0.8837675350701403, -0.8797595190380761, -0.875751503006012, -0.8717434869739479, -0.8677354709418837, -0.8637274549098196, -0.8597194388777555, -0.8557114228456913, -0.8517034068136272, -0.8476953907815631, -0.8436873747494991, -0.8396793587174349, -0.8356713426853708, -0.8316633266533067, -0.8276553106212425, -0.8236472945891784, -0.8196392785571143, -0.8156312625250501, -0.811623246492986, -0.8076152304609219, -0.8036072144288577, -0.7995991983967936, -0.7955911823647295, -0.7915831663326653, -0.7875751503006012, -0.7835671342685371, -0.779559118236473, -0.7755511022044088, -0.7715430861723447, -0.7675350701402806, -0.7635270541082164, -0.7595190380761523, -0.7555110220440882, -0.751503006012024, -0.7474949899799599, -0.7434869739478958, -0.7394789579158316, -0.7354709418837675, -0.7314629258517034, -0.7274549098196392, -0.7234468937875751, -0.719438877755511, -0.7154308617234468, -0.7114228456913827, -0.7074148296593186, -0.7034068136272544, -0.6993987975951903, -0.6953907815631262, -0.6913827655310621, -0.687374749498998, -0.6833667334669339, -0.6793587174348698, -0.6753507014028056, -0.6713426853707415, -0.6673346693386774, -0.6633266533066132, -0.6593186372745491, -0.655310621242485, -0.6513026052104208, -0.6472945891783567, -0.6432865731462926, -0.6392785571142284, -0.6352705410821644, -0.6312625250501003, -0.6272545090180361, -0.623246492985972, -0.6192384769539079, -0.6152304609218437, -0.6112224448897796, -0.6072144288577155, -0.6032064128256514, -0.5991983967935872, -0.5951903807615231, -0.591182364729459, -0.5871743486973948, -0.5831663326653307, -0.5791583166332666, -0.5751503006012024, -0.5711422845691383, -0.5671342685370742, -0.56312625250501, -0.5591182364729459, -0.5551102204408818, -0.5511022044088176, -0.5470941883767535, -0.5430861723446894, -0.5390781563126252, -0.5350701402805611, -0.531062124248497, -0.5270541082164328, -0.5230460921843687, -0.5190380761523046, -0.5150300601202404, -0.5110220440881763, -0.5070140280561122, -0.503006012024048, -0.498997995991984, -0.4949899799599199, -0.49098196392785576, -0.4869739478957916, -0.4829659318637275, -0.47895791583166336, -0.47494989979959923, -0.4709418837675351, -0.46693386773547096, -0.46292585170340683, -0.4589178356713427, -0.45490981963927857, -0.45090180360721444, -0.4468937875751503, -0.44288577154308617, -0.43887775551102204, -0.4348697394789579, -0.4308617234468938, -0.42685370741482964, -0.4228456913827655, -0.4188376753507014, -0.41482965931863724, -0.4108216432865731, -0.406813627254509, -0.40280561122244485, -0.3987975951903807, -0.3947895791583166, -0.39078156312625245, -0.38677354709418843, -0.3827655310621243, -0.37875751503006017, -0.37474949899799603, -0.3707414829659319, -0.36673346693386777, -0.36272545090180364, -0.3587174348697395, -0.35470941883767537, -0.35070140280561124, -0.3466933867735471, -0.342685370741483, -0.33867735470941884, -0.3346693386773547, -0.3306613226452906, -0.32665330661322645, -0.3226452905811623, -0.3186372745490982, -0.31462925851703405, -0.3106212424849699, -0.3066132264529058, -0.30260521042084165, -0.2985971943887775, -0.2945891783567134, -0.29058116232464926, -0.2865731462925851, -0.282565130260521, -0.27855711422845686, -0.27454909819639284, -0.2705410821643287, -0.2665330661322646, -0.26252505010020044, -0.2585170340681363, -0.2545090180360722, -0.25050100200400804, -0.2464929859719439, -0.24248496993987978, -0.23847695390781565, -0.23446893787575152, -0.23046092184368738, -0.22645290581162325, -0.22244488977955912, -0.218436873747495, -0.21442885771543085, -0.21042084168336672, -0.2064128256513026, -0.20240480961923846, -0.19839679358717432, -0.1943887775551102, -0.19038076152304606, -0.18637274549098193, -0.1823647294589178, -0.17835671342685366, -0.17434869739478953, -0.1703406813627254, -0.16633266533066138, -0.16232464929859725, -0.1583166332665331, -0.15430861723446898, -0.15030060120240485, -0.14629258517034072, -0.14228456913827658, -0.13827655310621245, -0.13426853707414832, -0.1302605210420842, -0.12625250501002006, -0.12224448897795592, -0.11823647294589179, -0.11422845691382766, -0.11022044088176353, -0.1062124248496994, -0.10220440881763526, -0.09819639278557113, -0.094188376753507, -0.09018036072144286, -0.08617234468937873, -0.0821643286573146, -0.07815631262525047, -0.07414829659318634, -0.0701402805611222, -0.06613226452905807, -0.06212424849699394, -0.05811623246492981, -0.054108216432865786, -0.05010020040080165, -0.04609218436873752, -0.04208416833667339, -0.038076152304609256, -0.034068136272545124, -0.030060120240480992, -0.02605210420841686, -0.022044088176352727, -0.018036072144288595, -0.014028056112224463, -0.01002004008016033, -0.006012024048096198, -0.002004008016032066, 0.002004008016031955, 0.006012024048096087, 0.01002004008016022, 0.014028056112224352, 0.018036072144288484, 0.022044088176352616, 0.02605210420841675, 0.03006012024048088, 0.03406813627254501, 0.038076152304609145, 0.04208416833667328, 0.04609218436873741, 0.05010020040080154, 0.054108216432865675, 0.05811623246492981, 0.06212424849699394, 0.06613226452905807, 0.0701402805611222, 0.07414829659318634, 0.07815631262525047, 0.0821643286573146, 0.08617234468937873, 0.09018036072144286, 0.094188376753507, 0.09819639278557113, 0.10220440881763526, 0.1062124248496994, 0.11022044088176353, 0.11422845691382766, 0.11823647294589179, 0.12224448897795592, 0.12625250501002006, 0.1302605210420842, 0.13426853707414832, 0.13827655310621245, 0.14228456913827658, 0.14629258517034072, 0.15030060120240485, 0.15430861723446898, 0.1583166332665331, 0.16232464929859725, 0.16633266533066138, 0.1703406813627255, 0.17434869739478964, 0.17835671342685377, 0.1823647294589179, 0.18637274549098204, 0.19038076152304617, 0.1943887775551103, 0.19839679358717444, 0.20240480961923857, 0.2064128256513027, 0.21042084168336683, 0.21442885771543096, 0.2184368737474951, 0.222444889779559, 0.22645290581162314, 0.23046092184368727, 0.2344689378757514, 0.23847695390781554, 0.24248496993987967, 0.2464929859719438, 0.25050100200400793, 0.25450901803607207, 0.2585170340681362, 0.26252505010020033, 0.26653306613226446, 0.2705410821643286, 0.2745490981963927, 0.27855711422845686, 0.282565130260521, 0.2865731462925851, 0.29058116232464926, 0.2945891783567134, 0.2985971943887775, 0.30260521042084165, 0.3066132264529058, 0.3106212424849699, 0.31462925851703405, 0.3186372745490982, 0.3226452905811623, 0.32665330661322645, 0.3306613226452906, 0.3346693386773547, 0.33867735470941884, 0.342685370741483, 0.3466933867735471, 0.35070140280561124, 0.35470941883767537, 0.3587174348697395, 0.36272545090180364, 0.36673346693386777, 0.3707414829659319, 0.37474949899799603, 0.37875751503006017, 0.3827655310621243, 0.38677354709418843, 0.39078156312625256, 0.3947895791583167, 0.3987975951903808, 0.40280561122244496, 0.4068136272545091, 0.4108216432865732, 0.41482965931863736, 0.4188376753507015, 0.4228456913827656, 0.42685370741482975, 0.4308617234468939, 0.434869739478958, 0.43887775551102215, 0.4428857715430863, 0.4468937875751502, 0.4509018036072143, 0.45490981963927846, 0.4589178356713426, 0.4629258517034067, 0.46693386773547085, 0.470941883767535, 0.4749498997995991, 0.47895791583166325, 0.4829659318637274, 0.4869739478957915, 0.49098196392785565, 0.4949899799599198, 0.4989979959919839, 0.503006012024048, 0.5070140280561122, 0.5110220440881763, 0.5150300601202404, 0.5190380761523046, 0.5230460921843687, 0.5270541082164328, 0.531062124248497, 0.5350701402805611, 0.5390781563126252, 0.5430861723446894, 0.5470941883767535, 0.5511022044088176, 0.5551102204408818, 0.5591182364729459, 0.56312625250501, 0.5671342685370742, 0.5711422845691383, 0.5751503006012024, 0.5791583166332666, 0.5831663326653307, 0.5871743486973948, 0.591182364729459, 0.5951903807615231, 0.5991983967935872, 0.6032064128256514, 0.6072144288577155, 0.6112224448897796, 0.6152304609218437, 0.6192384769539079, 0.623246492985972, 0.6272545090180361, 0.6312625250501003, 0.6352705410821644, 0.6392785571142285, 0.6432865731462927, 0.6472945891783568, 0.6513026052104209, 0.6553106212424851, 0.6593186372745492, 0.6633266533066133, 0.6673346693386772, 0.6713426853707414, 0.6753507014028055, 0.6793587174348696, 0.6833667334669338, 0.6873747494989979, 0.691382765531062, 0.6953907815631262, 0.6993987975951903, 0.7034068136272544, 0.7074148296593186, 0.7114228456913827, 0.7154308617234468, 0.719438877755511, 0.7234468937875751, 0.7274549098196392, 0.7314629258517034, 0.7354709418837675, 0.7394789579158316, 0.7434869739478958, 0.7474949899799599, 0.751503006012024, 0.7555110220440882, 0.7595190380761523, 0.7635270541082164, 0.7675350701402806, 0.7715430861723447, 0.7755511022044088, 0.779559118236473, 0.7835671342685371, 0.7875751503006012, 0.7915831663326653, 0.7955911823647295, 0.7995991983967936, 0.8036072144288577, 0.8076152304609219, 0.811623246492986, 0.8156312625250501, 0.8196392785571143, 0.8236472945891784, 0.8276553106212425, 0.8316633266533067, 0.8356713426853708, 0.8396793587174349, 0.8436873747494991, 0.8476953907815632, 0.8517034068136273, 0.8557114228456915, 0.8597194388777556, 0.8637274549098197, 0.8677354709418839, 0.871743486973948, 0.8757515030060121, 0.8797595190380763, 0.8837675350701404, 0.8877755511022045, 0.8917835671342684, 0.8957915831663326, 0.8997995991983967, 0.9038076152304608, 0.907815631262525, 0.9118236472945891, 0.9158316633266532, 0.9198396793587174, 0.9238476953907815, 0.9278557114228456, 0.9318637274549098, 0.9358717434869739, 0.939879759519038, 0.9438877755511021, 0.9478957915831663, 0.9519038076152304, 0.9559118236472945, 0.9599198396793587, 0.9639278557114228, 0.9679358717434869, 0.9719438877755511, 0.9759519038076152, 0.9799599198396793, 0.9839679358717435, 0.9879759519038076, 0.9919839679358717, 0.9959919839679359, 1.0])
.range(['#053061ff', '#053061ff', '#053061ff', '#053061ff', '#053061ff', '#053061ff', '#053061ff', '#053061ff', '#053061ff', '#053061ff', '#053061ff', '#053061ff', '#053061ff', '#053061ff', '#053061ff', '#053061ff', '#053061ff', '#053061ff', '#053061ff', '#053061ff', '#053061ff', '#053061ff', '#053061ff', '#053061ff', '#053061ff', '#134c89ff', '#134c89ff', '#134c89ff', '#134c89ff', '#134c89ff', '#134c89ff', '#134c89ff', '#134c89ff', '#134c89ff', '#134c89ff', '#134c89ff', '#134c89ff', '#134c89ff', '#134c89ff', '#134c89ff', '#134c89ff', '#134c89ff', '#134c89ff', '#134c89ff', '#134c89ff', '#134c89ff', '#134c89ff', '#134c89ff', '#134c89ff', '#134c89ff', '#2268adff', '#2268adff', '#2268adff', '#2268adff', '#2268adff', '#2268adff', '#2268adff', '#2268adff', '#2268adff', '#2268adff', '#2268adff', '#2268adff', '#2268adff', '#2268adff', '#2268adff', '#2268adff', '#2268adff', '#2268adff', '#2268adff', '#2268adff', '#2268adff', '#2268adff', '#2268adff', '#2268adff', '#2268adff', '#3480baff', '#3480baff', '#3480baff', '#3480baff', '#3480baff', '#3480baff', '#3480baff', '#3480baff', '#3480baff', '#3480baff', '#3480baff', '#3480baff', '#3480baff', '#3480baff', '#3480baff', '#3480baff', '#3480baff', '#3480baff', '#3480baff', '#3480baff', '#3480baff', '#3480baff', '#3480baff', '#3480baff', '#3480baff', '#4b98c6ff', '#4b98c6ff', '#4b98c6ff', '#4b98c6ff', '#4b98c6ff', '#4b98c6ff', '#4b98c6ff', '#4b98c6ff', '#4b98c6ff', '#4b98c6ff', '#4b98c6ff', '#4b98c6ff', '#4b98c6ff', '#4b98c6ff', '#4b98c6ff', '#4b98c6ff', '#4b98c6ff', '#4b98c6ff', '#4b98c6ff', '#4b98c6ff', '#4b98c6ff', '#4b98c6ff', '#4b98c6ff', '#4b98c6ff', '#4b98c6ff', '#75b3d4ff', '#75b3d4ff', '#75b3d4ff', '#75b3d4ff', '#75b3d4ff', '#75b3d4ff', '#75b3d4ff', '#75b3d4ff', '#75b3d4ff', '#75b3d4ff', '#75b3d4ff', '#75b3d4ff', '#75b3d4ff', '#75b3d4ff', '#75b3d4ff', '#75b3d4ff', '#75b3d4ff', '#75b3d4ff', '#75b3d4ff', '#75b3d4ff', '#75b3d4ff', '#75b3d4ff', '#75b3d4ff', '#75b3d4ff', '#75b3d4ff', '#9ccae1ff', '#9ccae1ff', '#9ccae1ff', '#9ccae1ff', '#9ccae1ff', '#9ccae1ff', '#9ccae1ff', '#9ccae1ff', '#9ccae1ff', '#9ccae1ff', '#9ccae1ff', '#9ccae1ff', '#9ccae1ff', '#9ccae1ff', '#9ccae1ff', '#9ccae1ff', '#9ccae1ff', '#9ccae1ff', '#9ccae1ff', '#9ccae1ff', '#9ccae1ff', '#9ccae1ff', '#9ccae1ff', '#9ccae1ff', '#9ccae1ff', '#bddbebff', '#bddbebff', '#bddbebff', '#bddbebff', '#bddbebff', '#bddbebff', '#bddbebff', '#bddbebff', '#bddbebff', '#bddbebff', '#bddbebff', '#bddbebff', '#bddbebff', '#bddbebff', '#bddbebff', '#bddbebff', '#bddbebff', '#bddbebff', '#bddbebff', '#bddbebff', '#bddbebff', '#bddbebff', '#bddbebff', '#bddbebff', '#bddbebff', '#d9e9f2ff', '#d9e9f2ff', '#d9e9f2ff', '#d9e9f2ff', '#d9e9f2ff', '#d9e9f2ff', '#d9e9f2ff', '#d9e9f2ff', '#d9e9f2ff', '#d9e9f2ff', '#d9e9f2ff', '#d9e9f2ff', '#d9e9f2ff', '#d9e9f2ff', '#d9e9f2ff', '#d9e9f2ff', '#d9e9f2ff', '#d9e9f2ff', '#d9e9f2ff', '#d9e9f2ff', '#d9e9f2ff', '#d9e9f2ff', '#d9e9f2ff', '#d9e9f2ff', '#d9e9f2ff', '#edf3f6ff', '#edf3f6ff', '#edf3f6ff', '#edf3f6ff', '#edf3f6ff', '#edf3f6ff', '#edf3f6ff', '#edf3f6ff', '#edf3f6ff', '#edf3f6ff', '#edf3f6ff', '#edf3f6ff', '#edf3f6ff', '#edf3f6ff', '#edf3f6ff', '#edf3f6ff', '#edf3f6ff', '#edf3f6ff', '#edf3f6ff', '#edf3f6ff', '#edf3f6ff', '#edf3f6ff', '#edf3f6ff', '#edf3f6ff', '#edf3f6ff', '#f9f0ebff', '#f9f0ebff', '#f9f0ebff', '#f9f0ebff', '#f9f0ebff', '#f9f0ebff', '#f9f0ebff', '#f9f0ebff', '#f9f0ebff', '#f9f0ebff', '#f9f0ebff', '#f9f0ebff', '#f9f0ebff', '#f9f0ebff', '#f9f0ebff', '#f9f0ebff', '#f9f0ebff', '#f9f0ebff', '#f9f0ebff', '#f9f0ebff', '#f9f0ebff', '#f9f0ebff', '#f9f0ebff', '#f9f0ebff', '#f9f0ebff', '#fce1d1ff', '#fce1d1ff', '#fce1d1ff', '#fce1d1ff', '#fce1d1ff', '#fce1d1ff', '#fce1d1ff', '#fce1d1ff', '#fce1d1ff', '#fce1d1ff', '#fce1d1ff', '#fce1d1ff', '#fce1d1ff', '#fce1d1ff', '#fce1d1ff', '#fce1d1ff', '#fce1d1ff', '#fce1d1ff', '#fce1d1ff', '#fce1d1ff', '#fce1d1ff', '#fce1d1ff', '#fce1d1ff', '#fce1d1ff', '#fce1d1ff', '#fbcab1ff', '#fbcab1ff', '#fbcab1ff', '#fbcab1ff', '#fbcab1ff', '#fbcab1ff', '#fbcab1ff', '#fbcab1ff', '#fbcab1ff', '#fbcab1ff', '#fbcab1ff', '#fbcab1ff', '#fbcab1ff', '#fbcab1ff', '#fbcab1ff', '#fbcab1ff', '#fbcab1ff', '#fbcab1ff', '#fbcab1ff', '#fbcab1ff', '#fbcab1ff', '#fbcab1ff', '#fbcab1ff', '#fbcab1ff', '#fbcab1ff', '#f6ae8dff', '#f6ae8dff', '#f6ae8dff', '#f6ae8dff', '#f6ae8dff', '#f6ae8dff', '#f6ae8dff', '#f6ae8dff', '#f6ae8dff', '#f6ae8dff', '#f6ae8dff', '#f6ae8dff', '#f6ae8dff', '#f6ae8dff', '#f6ae8dff', '#f6ae8dff', '#f6ae8dff', '#f6ae8dff', '#f6ae8dff', '#f6ae8dff', '#f6ae8dff', '#f6ae8dff', '#f6ae8dff', '#f6ae8dff', '#f6ae8dff', '#e98c6eff', '#e98c6eff', '#e98c6eff', '#e98c6eff', '#e98c6eff', '#e98c6eff', '#e98c6eff', '#e98c6eff', '#e98c6eff', '#e98c6eff', '#e98c6eff', '#e98c6eff', '#e98c6eff', '#e98c6eff', '#e98c6eff', '#e98c6eff', '#e98c6eff', '#e98c6eff', '#e98c6eff', '#e98c6eff', '#e98c6eff', '#e98c6eff', '#e98c6eff', '#e98c6eff', '#e98c6eff', '#da6752ff', '#da6752ff', '#da6752ff', '#da6752ff', '#da6752ff', '#da6752ff', '#da6752ff', '#da6752ff', '#da6752ff', '#da6752ff', '#da6752ff', '#da6752ff', '#da6752ff', '#da6752ff', '#da6752ff', '#da6752ff', '#da6752ff', '#da6752ff', '#da6752ff', '#da6752ff', '#da6752ff', '#da6752ff', '#da6752ff', '#da6752ff', '#da6752ff', '#c7413eff', '#c7413eff', '#c7413eff', '#c7413eff', '#c7413eff', '#c7413eff', '#c7413eff', '#c7413eff', '#c7413eff', '#c7413eff', '#c7413eff', '#c7413eff', '#c7413eff', '#c7413eff', '#c7413eff', '#c7413eff', '#c7413eff', '#c7413eff', '#c7413eff', '#c7413eff', '#c7413eff', '#c7413eff', '#c7413eff', '#c7413eff', '#c7413eff', '#b41b2cff', '#b41b2cff', '#b41b2cff', '#b41b2cff', '#b41b2cff', '#b41b2cff', '#b41b2cff', '#b41b2cff', '#b41b2cff', '#b41b2cff', '#b41b2cff', '#b41b2cff', '#b41b2cff', '#b41b2cff', '#b41b2cff', '#b41b2cff', '#b41b2cff', '#b41b2cff', '#b41b2cff', '#b41b2cff', '#b41b2cff', '#b41b2cff', '#b41b2cff', '#b41b2cff', '#b41b2cff', '#8f0c25ff', '#8f0c25ff', '#8f0c25ff', '#8f0c25ff', '#8f0c25ff', '#8f0c25ff', '#8f0c25ff', '#8f0c25ff', '#8f0c25ff', '#8f0c25ff', '#8f0c25ff', '#8f0c25ff', '#8f0c25ff', '#8f0c25ff', '#8f0c25ff', '#8f0c25ff', '#8f0c25ff', '#8f0c25ff', '#8f0c25ff', '#8f0c25ff', '#8f0c25ff', '#8f0c25ff', '#8f0c25ff', '#8f0c25ff', '#8f0c25ff', '#67001fff', '#67001fff', '#67001fff', '#67001fff', '#67001fff', '#67001fff', '#67001fff', '#67001fff', '#67001fff', '#67001fff', '#67001fff', '#67001fff', '#67001fff', '#67001fff', '#67001fff', '#67001fff', '#67001fff', '#67001fff', '#67001fff', '#67001fff', '#67001fff', '#67001fff', '#67001fff', '#67001fff', '#67001fff']);
color_map_b13917af52926c4458f13c8955e429d1.x = d3.scale.linear()
.domain([-1.0, 1.0])
.range([0, 450 - 50]);
color_map_b13917af52926c4458f13c8955e429d1.legend = L.control({position: 'bottomleft'});
color_map_b13917af52926c4458f13c8955e429d1.legend.onAdd = function (map) {var div = L.DomUtil.create('div', 'legend'); return div};
color_map_b13917af52926c4458f13c8955e429d1.legend.addTo(map_7079a36f74c16e1ce2ab21c4f811b35d);
color_map_b13917af52926c4458f13c8955e429d1.xAxis = d3.svg.axis()
.scale(color_map_b13917af52926c4458f13c8955e429d1.x)
.orient("top")
.tickSize(1)
.tickValues([-1.0, -0.8, -0.6000000000000001, -0.40000000000000013, -0.20000000000000018, -2.220446049250313e-16, 0.19999999999999973, 0.3999999999999997, 0.5999999999999996, 0.7999999999999996, 0.9999999999999996]);
color_map_b13917af52926c4458f13c8955e429d1.svg = d3.select(".legend.leaflet-control").append("svg")
.attr("id", 'legend')
.attr("width", 450)
.attr("height", 60); // height change from 40
color_map_b13917af52926c4458f13c8955e429d1.g = color_map_b13917af52926c4458f13c8955e429d1.svg.append("g")
.attr("class", "key")
.attr("transform", "translate(25,16)");
color_map_b13917af52926c4458f13c8955e429d1.g.selectAll("rect")
.data(color_map_b13917af52926c4458f13c8955e429d1.color.range().map(function(d, i) {
return {
x0: i ? color_map_b13917af52926c4458f13c8955e429d1.x(color_map_b13917af52926c4458f13c8955e429d1.color.domain()[i - 1]) : color_map_b13917af52926c4458f13c8955e429d1.x.range()[0],
x1: i < color_map_b13917af52926c4458f13c8955e429d1.color.domain().length ? color_map_b13917af52926c4458f13c8955e429d1.x(color_map_b13917af52926c4458f13c8955e429d1.color.domain()[i]) : color_map_b13917af52926c4458f13c8955e429d1.x.range()[1],
z: d
};
}))
.enter().append("rect")
.attr("height", 40 - 30)
.attr("x", function(d) { return d.x0; })
.attr("width", function(d) { return d.x1 - d.x0; })
.style("fill", function(d) { return d.z; });
color_map_b13917af52926c4458f13c8955e429d1.g.call(color_map_b13917af52926c4458f13c8955e429d1.xAxis).append("text")
.attr("class", "caption")
.attr("y", 30) // location chnage from 21
.text("Choose the listed variables");
/////////////// new folium functionality added ///////////////
// lon lat coordinate mouse position
var mouse_position_1cfb84a71518c96bf4f170be298d92c1 = new L.Control.MousePosition(
{"emptyString": "NaN", "lngFirst": true, "numDigits": 20, "position": "topright", "prefix": "Coordinates:", "separator": " | "}
);
mouse_position_1cfb84a71518c96bf4f170be298d92c1.options["latFormatter"] =
function(num) {return L.Util.formatNum(num, 3) + ' ° ';};;
mouse_position_1cfb84a71518c96bf4f170be298d92c1.options["lngFormatter"] =
function(num) {return L.Util.formatNum(num, 3) + ' ° ';};;
map_7079a36f74c16e1ce2ab21c4f811b35d.addControl(mouse_position_1cfb84a71518c96bf4f170be298d92c1);
// geolocation search
L.Control.geocoder(
{"collapsed": false, "defaultMarkGeocode": true, "position": "topright"}
).on('markgeocode', function(e) {
map_7079a36f74c16e1ce2ab21c4f811b35d.setView(e.geocode.center, 11);
}).addTo(map_7079a36f74c16e1ce2ab21c4f811b35d);
// geojson layer and related function
function geo_json_2a13e80c9d91584f92960032acd333bf_styler(feature) {
switch(feature.properties.OBJECTID) {
default:
return {"color": "black", "dashArray": "2, 1", "fillColor": "#e791a9", "weight": 1};
}
}
function geo_json_2a13e80c9d91584f92960032acd333bf_highlighter(feature) {
switch(feature.properties.OBJECTID) {
default:
return {"fillColor": "#FFC5C5"};
}
}
function geo_json_2a13e80c9d91584f92960032acd333bf_onEachFeature(feature, layer) {
layer.on({
mouseout: function(e) {
if(typeof e.target.setStyle === "function"){
geo_json_2a13e80c9d91584f92960032acd333bf.resetStyle(e.target);
}
},
mouseover: function(e) {
if(typeof e.target.setStyle === "function"){
const highlightStyle = geo_json_2a13e80c9d91584f92960032acd333bf_highlighter(e.target.feature)
e.target.setStyle(highlightStyle);
}
},
// click focus on the LME (click lon lat in LME would be confusing so comment out)
// click: function(e) {
// if (typeof e.target.getBounds === 'function') {
// map_7079a36f74c16e1ce2ab21c4f811b35d.fitBounds(e.target.getBounds());
// }
// else if (typeof e.target.getLatLng === 'function'){
// let zoom = map_7079a36f74c16e1ce2ab21c4f811b35d.getZoom()
// zoom = zoom > 12 ? zoom : zoom + 1
// map_7079a36f74c16e1ce2ab21c4f811b35d.flyTo(e.target.getLatLng(), zoom)
// }
// }
});
};
var geo_json_2a13e80c9d91584f92960032acd333bf = L.geoJson(null, {
onEachFeature: geo_json_2a13e80c9d91584f92960032acd333bf_onEachFeature,
style: geo_json_2a13e80c9d91584f92960032acd333bf_styler,
});
fetch('LMEs66.geojson')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then(data => {
// Handle the JSON data
geo_json_2a13e80c9d91584f92960032acd333bf
.addData(data);
// .addTo(map_7079a36f74c16e1ce2ab21c4f811b35d); // remove default display
// console.log('Json file loaded')
})
.catch(error => {
// Handle errors
console.error('Error:', error);
});
geo_json_2a13e80c9d91584f92960032acd333bf.bindTooltip(
function(layer){
let div = L.DomUtil.create('div');
let handleObject = feature=>typeof(feature)=='object' ? JSON.stringify(feature) : feature;
let fields = ["LME_NAME", "LME_NUMBER"];
let aliases = ["LME name:", "LME number:"];
let table = '<table>' +
String(
fields.map(
(v,i)=>
`<tr>
<th>${aliases[i].toLocaleString()}</th>
<td>${handleObject(layer.feature.properties[v]).toLocaleString()}</td>
</tr>`).join(''))
+'</table>';
div.innerHTML=table;
return div
}
,{"className": "foliumtooltip", "maxWidth": 800, "sticky": false}
);
// click to add marker
var locationData = {}; // location variable send back to parent
var new_mark; // make it global so only one marker exist
var varVal = null;
var lat;
var lon;
function newMarker(e){
varVal = '...loading...';
if (new_mark) {
map_7079a36f74c16e1ce2ab21c4f811b35d.removeLayer(new_mark);
}
new_mark = L.marker().setLatLng(e.latlng).addTo(map_7079a36f74c16e1ce2ab21c4f811b35d);
// new_mark.dragging.enable();
// new_mark.on('dblclick', function(e){ map_7079a36f74c16e1ce2ab21c4f811b35d.removeLayer(e.target)})
lat = e.latlng.lat.toFixed(4);
lng = e.latlng.lng.toFixed(4);
new_mark.bindPopup(`<b>Lat:</b> ${lat}<br /><b>Lon:</b> ${lng}<br /><b>Value:</b> ${varVal}`);
// output iframe marker click info
locationData = {
type: 'locationData',
longitude: lng,
latitude: lat
};
// console.log(locationData)
// Send data to the parent page using jQuery
parent.postMessage(locationData, window.location.origin);
};
map_7079a36f74c16e1ce2ab21c4f811b35d.on('click', newMarker);
// layer control
var layer_control_fb9b2bfb1f5a1efdaf0c4c11ed168327 = {
base_layers : {
"CartoDB" : tile_layer_54100ad7040d11ae7bf48a7dc0abc71f,
},
overlays : {
// "Regional MOM6" : image_overlay_cbd11cdbf58403fe3f6ba6fec69f8218,
"Large Marine Ecosystems" : geo_json_2a13e80c9d91584f92960032acd333bf,
},
};
L.control.layers(
layer_control_fb9b2bfb1f5a1efdaf0c4c11ed168327.base_layers,
layer_control_fb9b2bfb1f5a1efdaf0c4c11ed168327.overlays, // remove from default showing
{"autoZIndex": true, "collapsed": true, "position": "topright"}
).addTo(map_7079a36f74c16e1ce2ab21c4f811b35d);
// mini map
var tile_layer_a62797ba0200a8d1901fc95de7942494 = L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{"attribution": "Data by \u0026copy; \u003ca target=\"_blank\" href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca target=\"_blank\" href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
);
var mini_map_55d4760226fe6c968b6acc80f58373cf = new L.Control.MiniMap(
tile_layer_a62797ba0200a8d1901fc95de7942494,
{"autoToggleDisplay": false, "centerFixed": false, "collapsedHeight": 25, "collapsedWidth": 25, "height": 150, "minimized": false, "position": "bottomright", "toggleDisplay": true, "width": 150, "zoomAnimation": false, "zoomLevelOffset": -5}
);
map_7079a36f74c16e1ce2ab21c4f811b35d.addControl(mini_map_55d4760226fe6c968b6acc80f58373cf);
// draw polygon
var polygonData = {}; // polygon variable send back to parent
var options = {
position: "topleft",
draw: {
polygon: false,
polyline: true,
rectangle: false,
circle: false,
marker: false,
circlemarker: false
},
edit: {},
}
//////// FeatureGroup is to store editable layers.
var drawnItems = new L.featureGroup().addTo(
map_7079a36f74c16e1ce2ab21c4f811b35d
);
options.edit.featureGroup = drawnItems;
var draw_control_a1c36949874a7bd25e85de4bbfe77ebf = new L.Control.Draw(
options
).addTo( map_7079a36f74c16e1ce2ab21c4f811b35d );
map_7079a36f74c16e1ce2ab21c4f811b35d.on(L.Draw.Event.CREATED, function(e) {
var layer = e.layer,
type = e.layerType;
// output iframe polygon info
var coords = JSON.stringify(layer.toGeoJSON());
polygonData = {
type: 'polygonData',
polygon: coords
}
// Send data to the parent page using jQuery
parent.postMessage(polygonData, window.location.origin);
// console.log(coords);
// layer.on('click', function() {
// alert(coords);
// // console.log(coords);
// });
drawnItems.addLayer(layer);
});
map_7079a36f74c16e1ce2ab21c4f811b35d.on('draw:created', function(e) {
drawnItems.addLayer(e.layer);
});
//////// managing the click event during drawing
map_7079a36f74c16e1ce2ab21c4f811b35d.on('draw:drawstart', function () {
toggleClickEvent(false); // Disable click event when drawing starts
});
map_7079a36f74c16e1ce2ab21c4f811b35d.on('draw:drawstop', function () {
toggleClickEvent(true); // Enable click event when drawing stops
});
function toggleClickEvent(enable) {
if (enable) {
map_7079a36f74c16e1ce2ab21c4f811b35d.on('click', newMarker);
} else {
map_7079a36f74c16e1ce2ab21c4f811b35d.off('click', newMarker);
}
}
// ////// export button to export the polygon
// document.getElementById('export').onclick = function(e) {
// var data = drawnItems.toGeoJSON();
// var convertedData = 'text/json;charset=utf-8,'
// + encodeURIComponent(JSON.stringify(data));
// document.getElementById('export').setAttribute(
// 'href', 'data:' + convertedData
// );
// document.getElementById('export').setAttribute(
// 'download', "data.geojson"
// );
// }
</script>
</html>
</script>
</html>