-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
371 lines (357 loc) · 38.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- Primary Meta Tags -->
<title>Belize Weather - Daily, Hourly, 7 Day Forecast</title>
<meta name="title" content="Belize Weather - Daily, Hourly, 7 Day Forecast">
<meta name="description"
content="Belize weather forecast with current conditions for Corozal, Orange Walk, Belize City, Belmopan, San Ignacio , Stann Creek, Dangriga, Placencia, and Toledo.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://lmanzanero.github.io/belize-weather-app/">
<meta property="og:title" content="Belize Weather - Daily, Hourly, 7 Day Forecast">
<meta property="og:description"
content="Belize weather forecast with current conditions for Corozal, Orange Walk, Belize City, Belmopan, San Ignacio , Stann Creek, Dangriga, Placencia, and Toledo.">
<meta property="og:image"
content="https://lmanzanero.github.io/belize-weather-app/belize-weather.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://lmanzanero.github.io/belize-weather-app/">
<meta property="twitter:title" content="Belize Weather - Daily, Hourly, 7 Day Forecast">
<meta property="twitter:description"
content="Belize weather forecast with current conditions for Corozal, Orange Walk, Belize City, Belmopan, San Ignacio , Stann Creek, Dangriga, Placencia, and Toledo.">
<meta property="twitter:image"
content="https://lmanzanero.github.io/belize-weather-app/belize-weather.png">
<meta name="google-site-verification" content="9nLn5E1o-c5gXV7yqI0IZNlj41JTIDJSW3THLK5KVdU" />
<link rel="icon" type="image/x-icon" href="Belize-icon.png">
<link rel="stylesheet" href="player.css" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" />
</head>
<body>
<div class="weather-box">
<h1><strong>Belize Weather</strong></h1>
<div class="weather-container">
<div class="map">
<div class="tooltip">
...
</div>
<?xml version="1.0" encoding="utf-8"?>
<svg id="BelizeMap" viewBox="-25.611 -174.601 1000 1559" width="auto" height="auto" fill="#7c7c7c"
stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="506.55" y1="1" x2="506.55" y2="319.3" id="gradient-0"
gradientTransform="matrix(1, 0, 0, 1, -25.610998, -174.600998)">
<stop offset="0" style="stop-color: rgba(225, 126, 126, 1)" />
<stop offset="1" style="stop-color: rgba(202, 47, 47, 1)" />
</linearGradient>
</defs>
<path
d="M 282.289 1203.799 L 280.289 1206.599 L 276.189 1202.099 L 278.889 1200.699 L 279.189 1197.799 L 283.389 1192.699 L 283.489 1194.799 L 282.389 1195.999 L 286.289 1198.999 L 283.389 1201.599 L 282.289 1203.799 L 282.289 1203.799 Z M 516.689 1007.899 L 513.489 1008.399 L 516.189 1003.699 L 521.189 1003.999 L 522.789 1007.099 L 516.689 1007.899 L 516.689 1007.899 Z M 583.489 910.299 L 583.989 918.499 L 582.389 916.699 L 581.389 911.799 L 583.489 910.299 Z M 621.289 826.999 L 619.389 825.399 L 617.489 822.499 L 619.489 818.799 L 621.289 826.999 Z M 632.089 782.299 L 629.389 789.499 L 628.589 786.499 L 628.289 779.399 L 632.189 774.699 L 632.089 782.299 Z M 662.489 666.899 L 660.989 671.499 L 658.589 671.199 L 652.489 671.499 L 648.589 674.199 L 651.989 664.999 L 661.589 664.099 L 662.489 666.899 Z M 919.789 616.099 L 917.489 622.599 L 918.189 613.199 L 922.089 602.299 L 926.289 605.099 L 925.989 608.799 L 919.789 616.099 L 919.789 616.099 Z M 627.189 609.699 L 625.889 609.899 L 625.889 604.799 L 628.389 599.699 L 632.189 602.099 L 630.289 606.099 L 627.089 608.499 L 627.189 609.699 Z M 631.889 562.599 L 629.789 558.499 L 630.089 547.099 L 631.889 541.199 L 633.689 540.199 L 636.589 546.599 L 635.289 556.899 L 631.889 562.599 L 631.889 562.599 Z M 648.589 491.299 L 644.289 495.899 L 640.289 489.899 L 639.689 485.999 L 643.989 482.799 L 648.589 491.299 Z M 971.489 458.099 L 968.689 459.599 L 960.389 455.799 L 960.189 452.399 L 964.989 448.199 L 971.089 449.199 L 973.389 453.999 L 971.489 458.099 Z M 597.789 410.699 L 596.089 418.899 L 592.389 415.299 L 589.989 411.799 L 588.889 406.599 L 592.489 406.099 L 596.789 408.999 L 597.789 410.699 L 597.789 410.699 Z M 575.389 401.899 L 574.489 399.999 L 572.989 392.099 L 577.589 392.399 L 579.489 396.099 L 579.189 399.199 L 575.389 401.899 L 575.389 401.899 Z M 577.989 389.099 L 574.789 391.699 L 574.489 387.199 L 577.989 380.299 L 580.789 377.199 L 581.789 381.899 L 577.989 389.099 L 577.989 389.099 Z M 666.089 274.099 L 657.389 283.799 L 656.389 280.499 L 658.589 274.799 L 661.089 275.799 L 663.489 272.499 L 663.089 268.399 L 660.289 265.899 L 661.289 260.299 L 661.889 253.299 L 664.789 247.799 L 667.589 247.499 L 665.289 253.099 L 664.389 263.799 L 666.089 274.099 L 666.089 274.099 Z M 649.389 212.199 L 642.489 213.299 L 638.989 208.399 L 647.889 209.099 L 654.089 210.099 L 649.389 212.199 L 649.389 212.199 Z"
id="BLZ99" name="" style="stroke: rgb(35, 101, 199);" />
<path
d="M 791.389 529.599 L 791.489 543.799 L 787.589 543.799 L 787.589 535.599 L 784.389 536.599 L 782.189 538.299 L 779.489 543.799 L 779.989 507.599 L 777.989 492.599 L 771.689 486.399 L 778.889 479.999 L 785.489 490.699 L 794.989 519.299 L 792.389 523.699 L 791.389 529.599 Z M 635.789 417.599 L 641.089 425.399 L 639.889 431.299 L 638.289 433.999 L 638.089 437.599 L 635.689 442.999 L 631.789 442.599 L 630.789 437.599 L 629.989 425.199 L 629.189 422.599 L 624.689 423.199 L 619.789 420.899 L 614.589 413.799 L 612.789 412.099 L 612.889 408.599 L 616.689 405.999 L 625.189 409.399 L 635.789 417.599 Z M 799.689 400.699 L 803.189 412.599 L 800.789 421.599 L 789.089 444.999 L 781.489 455.199 L 775.689 465.299 L 767.489 470.799 L 756.189 461.899 L 750.289 471.599 L 743.089 477.199 L 736.589 484.399 L 732.489 498.899 L 728.889 525.599 L 727.489 529.999 L 724.589 535.999 L 722.089 543.499 L 721.489 551.899 L 713.389 543.799 L 715.489 541.799 L 717.289 535.599 L 718.589 522.899 L 723.889 501.899 L 726.589 473.299 L 731.189 463.799 L 738.489 456.999 L 748.389 449.699 L 760.089 437.499 L 765.789 436.999 L 774.289 440.499 L 781.389 441.499 L 786.889 436.299 L 791.289 424.599 L 792.389 412.099 L 787.589 404.499 L 781.289 410.099 L 776.089 413.099 L 771.689 412.599 L 771.989 408.799 L 777.689 392.599 L 784.589 392.799 L 792.689 394.799 L 799.689 400.699 Z M 654.689 388.199 L 650.789 388.199 L 647.889 382.399 L 642.889 368.199 L 635.589 335.099 L 643.389 341.799 L 649.089 356.299 L 654.689 388.199 L 654.689 388.199 Z M 602.789 317.099 L 584.289 318.799 L 584.289 315.999 L 585.089 314.099 L 588.189 310.599 L 600.189 304.999 L 632.489 282.799 L 639.089 279.799 L 633.889 299.199 L 620.589 311.099 L 602.789 317.099 L 602.789 317.099 Z M 514.789 637.099 L 507.389 644.999 L 495.689 649.499 L 492.689 651.199 L 487.389 652.999 L 336.489 655.799 L 349.289 651.099 L 351.089 650.099 L 353.489 647.499 L 355.489 643.899 L 356.089 640.899 L 358.089 637.199 L 360.489 635.099 L 361.689 632.099 L 363.689 625.599 L 364.389 621.399 L 367.289 614.299 L 367.389 608.799 L 366.889 602.199 L 362.089 590.799 L 355.689 581.499 L 354.989 578.399 L 355.689 556.499 L 349.989 437.499 L 348.589 429.299 L 346.489 425.799 L 341.689 428.199 L 338.289 435.699 L 334.889 441.599 L 321.489 447.299 L 314.389 360.699 L 314.789 349.999 L 322.089 328.999 L 328.589 318.899 L 345.389 310.999 L 351.189 309.299 L 355.789 307.199 L 358.489 304.499 L 358.789 300.599 L 358.089 297.499 L 355.189 289.699 L 354.889 285.499 L 356.689 271.299 L 356.589 267.899 L 354.789 254.499 L 354.989 248.499 L 358.489 232.699 L 358.689 224.899 L 358.189 221.299 L 356.089 213.299 L 355.789 208.999 L 356.389 202.899 L 357.589 197.799 L 361.189 187.399 L 391.289 170.099 L 517.689 137.299 L 584.589 144.699 L 560.989 191.399 L 564.389 206.899 L 557.589 256.599 L 543.689 305.999 L 539.089 315.999 L 524.289 333.799 L 518.289 344.699 L 515.789 357.499 L 518.289 371.799 L 525.189 379.099 L 545.489 389.499 L 549.689 398.499 L 555.089 403.499 L 578.989 407.699 L 584.289 412.599 L 577.489 424.199 L 562.789 424.099 L 548.189 421.899 L 541.589 427.299 L 540.089 436.499 L 516.589 515.499 L 511.089 576.099 L 510.489 588.599 L 508.489 611.999 L 512.489 624.599 L 514.789 637.099 L 514.789 637.099 Z M 696.389 76.899 L 690.189 77.999 L 688.489 74.299 L 692.589 68.299 L 695.489 66.399 L 697.289 66.299 L 700.489 64.899 L 702.189 66.599 L 700.989 72.799 L 696.389 76.899 L 696.389 76.899 Z M 712.489 64.699 L 707.789 68.299 L 705.789 67.899 L 704.189 62.399 L 705.089 60.299 L 708.089 58.699 L 711.089 56.099 L 712.089 52.799 L 714.089 49.699 L 715.389 52.099 L 715.889 58.499 L 712.489 64.699 L 712.489 64.699 Z M 766.589 27.299 L 765.589 40.599 L 758.089 47.599 L 753.889 54.299 L 742.289 86.599 L 736.689 97.399 L 732.789 94.699 L 728.889 92.899 L 727.489 99.199 L 725.389 103.699 L 722.089 106.899 L 717.289 109.299 L 717.289 113.299 L 721.489 121.899 L 726.789 114.099 L 728.089 110.499 L 728.889 105.199 L 732.489 105.199 L 727.989 131.099 L 716.889 154.899 L 699.089 172.399 L 674.489 179.099 L 674.489 175.099 L 682.289 175.099 L 702.989 160.099 L 710.389 149.599 L 713.389 134.199 L 704.389 134.699 L 706.789 116.099 L 717.289 78.599 L 718.489 75.999 L 723.889 70.999 L 724.989 66.299 L 725.389 60.499 L 733.789 28.899 L 739.389 23.599 L 748.389 27.399 L 760.889 19.099 L 766.589 27.299 L 766.589 27.299 Z M 751.289 -0.601 L 750.989 2.499 L 748.989 8.499 L 743.489 15.499 L 740.289 12.699 L 741.789 2.399 L 744.089 -1.201 L 746.189 -1.001 L 745.489 -4.601 L 748.889 -4.001 L 750.989 -3.001 L 751.289 -0.601 L 751.289 -0.601 Z"
id="belize" name="Belize" style="fill: rgb(164, 120, 88); paint-order: stroke; stroke: rgb(83, 110, 140);">
<title>Belize</title>
</path>
<path
d="M 336.489 655.799 L 334.589 661.599 L 336.689 666.599 L 344.889 680.199 L 352.789 686.999 L 356.689 691.199 L 356.489 696.199 L 353.789 698.899 L 350.689 701.099 L 348.689 703.799 L 342.889 715.899 L 339.489 725.399 L 335.889 732.199 L 332.389 737.199 L 325.789 742.099 L 322.989 744.699 L 319.089 751.499 L 301.989 770.499 L 300.989 773.399 L 301.489 778.499 L 301.389 781.899 L 300.089 790.099 L 299.889 793.099 L 300.789 800.599 L 299.289 806.099 L 295.889 809.599 L 290.489 812.199 L 287.189 815.299 L 286.189 817.199 L 286.689 819.399 L 294.189 824.799 L 296.389 827.199 L 296.089 829.099 L 294.389 830.599 L 292.089 831.299 L 281.889 832.999 L 270.989 836.799 L 267.889 838.899 L 265.089 841.599 L 249.389 865.899 L 246.089 874.799 L 239.989 886.099 L 236.789 897.799 L 236.789 900.299 L 238.689 907.899 L 229.089 908.399 L 224.689 910.799 L 219.789 915.499 L 213.689 923.299 L 212.189 926.199 L 211.689 928.699 L 214.189 938.699 L 214.589 941.799 L 212.989 947.999 L 201.489 959.799 L 192.289 966.899 L 189.789 967.999 L 185.189 969.299 L 181.189 971.399 L 165.889 983.199 L 160.789 986.299 L 157.289 987.299 L 154.589 986.799 L 151.189 987.499 L 144.789 990.499 L 139.089 994.999 L 136.489 998.799 L 137.189 1005.799 L 134.889 1007.599 L 112.389 1016.099 L 106.789 1016.799 L 104.989 1015.699 L 101.089 1011.599 L 97.489 1008.699 L 94.789 1007.799 L 93.289 1008.599 L 89.689 1012.899 L 77.989 1024.199 L 73.589 1027.399 L 69.889 1029.299 L 60.289 1030.399 L 53.989 1032.299 L 46.489 1032.799 L 26.489 1041.099 L 23.889 1042.799 L 19.589 1048.499 L 18.789 1052.799 L 16.289 1057.699 L 12.389 1062.499 L 6.289 1069.599 L 0.089 1079.199 L 5.089 1017.899 L 15.489 850.799 L 25.089 696.399 L 24.289 526.599 L 41.389 512.399 L 65.089 496.599 L 73.089 493.699 L 79.389 493.299 L 83.889 495.099 L 88.489 496.199 L 154.689 488.699 L 162.589 485.999 L 168.489 481.899 L 171.789 476.999 L 175.989 472.399 L 179.789 470.999 L 188.289 472.499 L 198.489 473.199 L 211.889 472.599 L 217.789 472.999 L 225.989 472.199 L 241.289 472.899 L 254.189 471.199 L 264.389 467.499 L 281.189 456.199 L 290.889 452.599 L 297.489 451.499 L 309.089 445.799 L 313.389 444.699 L 321.489 447.299 L 334.889 441.599 L 338.289 435.699 L 341.689 428.199 L 346.489 425.799 L 348.589 429.299 L 349.989 437.499 L 355.689 556.499 L 354.989 578.399 L 355.689 581.499 L 362.089 590.799 L 366.889 602.199 L 367.389 608.799 L 367.289 614.299 L 364.389 621.399 L 363.689 625.599 L 361.689 632.099 L 360.489 635.099 L 358.089 637.199 L 356.089 640.899 L 355.489 643.899 L 353.489 647.499 L 351.089 650.099 L 349.289 651.099 L 336.489 655.799 L 336.489 655.799 Z"
id="cayo" name="Cayo" style="fill: rgb(97, 50, 192);">
<title>Cayo</title>
</path>
<path
d="M 584.589 144.699 L 517.689 137.299 L 439.389 65.999 L 397.989 9.299 L 371.989 -10.001 L 335.689 -26.101 L 329.889 -27.301 L 330.389 -29.401 L 331.389 -38.901 L 333.489 -49.101 L 338.989 -58.801 L 356.589 -79.201 L 363.689 -90.401 L 365.589 -97.301 L 367.889 -112.501 L 372.989 -127.001 L 376.089 -145.101 L 378.989 -151.601 L 383.389 -156.101 L 400.989 -169.801 L 406.689 -169.201 L 411.989 -166.201 L 417.889 -164.601 L 422.889 -165.301 L 434.289 -169.401 L 440.389 -172.501 L 444.289 -173.601 L 447.289 -172.501 L 452.689 -167.201 L 457.089 -164.601 L 460.389 -165.101 L 463.689 -167.001 L 468.089 -168.201 L 503.389 -168.501 L 506.589 -167.901 L 506.589 -165.801 L 516.389 -156.801 L 505.189 -142.101 L 461.089 -110.101 L 456.989 -101.401 L 463.489 -92.001 L 471.489 -91.501 L 498.789 -104.001 L 495.589 -95.201 L 490.289 -86.001 L 477.289 -69.301 L 474.089 -64.001 L 475.789 -61.301 L 480.189 -61.601 L 485.189 -65.201 L 494.789 -76.101 L 513.689 -89.801 L 522.589 -94.001 L 531.989 -95.801 L 544.789 -94.001 L 561.289 -85.901 L 568.789 -83.501 L 580.889 -85.301 L 598.089 -97.301 L 617.789 -103.501 L 624.489 -104.401 L 627.489 -102.101 L 626.389 -93.701 L 623.189 -88.101 L 611.889 -79.401 L 598.889 -73.801 L 596.389 -71.201 L 596.189 -64.701 L 600.289 -63.301 L 605.289 -65.401 L 609.589 -72.501 L 614.189 -75.801 L 619.989 -78.301 L 625.589 -79.401 L 627.389 -76.101 L 631.989 -5.201 L 627.489 49.799 L 625.589 59.199 L 617.689 73.499 L 615.789 82.899 L 594.389 137.899 L 584.589 144.699 L 584.589 144.699 Z"
id="corozal" name="Corozal" style="stroke: url(#gradient-0); fill: rgb(123, 201, 222); stroke-width: 1px;">
<title>Corozal</title>
</path>
<path
d="M 517.689 137.299 L 391.289 170.099 L 361.189 187.399 L 357.589 197.799 L 356.389 202.899 L 355.789 208.999 L 356.089 213.299 L 358.189 221.299 L 358.689 224.899 L 358.489 232.699 L 354.989 248.499 L 354.789 254.499 L 356.589 267.899 L 356.689 271.299 L 354.889 285.499 L 355.189 289.699 L 358.089 297.499 L 358.789 300.599 L 358.489 304.499 L 355.789 307.199 L 351.189 309.299 L 345.389 310.999 L 328.589 318.899 L 322.089 328.999 L 314.789 349.999 L 314.389 360.699 L 321.489 447.299 L 313.389 444.699 L 309.089 445.799 L 297.489 451.499 L 290.889 452.599 L 281.189 456.199 L 264.389 467.499 L 254.189 471.199 L 241.289 472.899 L 225.989 472.199 L 217.789 472.999 L 211.889 472.599 L 198.489 473.199 L 188.289 472.499 L 179.789 470.999 L 175.989 472.399 L 171.789 476.999 L 168.489 481.899 L 162.589 485.999 L 154.689 488.699 L 88.489 496.199 L 83.889 495.099 L 79.389 493.299 L 73.089 493.699 L 65.089 496.599 L 41.389 512.399 L 24.289 526.599 L 18.689 231.899 L 18.189 179.799 L 22.389 155.999 L 34.589 138.499 L 81.889 121.199 L 94.089 125.499 L 103.489 133.999 L 112.089 143.599 L 121.589 150.999 L 128.389 151.699 L 134.889 150.399 L 140.289 151.599 L 148.089 168.399 L 155.389 174.099 L 178.289 187.499 L 183.389 185.999 L 186.789 181.199 L 189.389 167.999 L 191.889 163.699 L 220.989 141.699 L 226.289 135.399 L 234.489 111.899 L 237.189 106.499 L 245.589 99.399 L 253.389 94.799 L 260.189 89.599 L 265.789 80.799 L 267.589 74.299 L 269.289 60.799 L 270.889 54.799 L 284.989 30.899 L 286.889 24.099 L 284.989 15.799 L 282.889 13.999 L 299.089 1.899 L 315.689 -6.101 L 322.489 -11.301 L 328.189 -20.401 L 329.889 -27.301 L 335.689 -26.101 L 371.989 -10.001 L 397.989 9.299 L 439.389 65.999 L 517.689 137.299 L 517.689 137.299 Z"
id="orangewalk" name="Orange Walk" style="fill: rgb(94, 207, 111);">
<title>Orange Walk</title>
</path>
<path
d="M 457.489 1016.799 L 450.889 1014.099 L 449.389 1009.599 L 446.989 1008.999 L 441.289 1008.599 L 429.489 1010.499 L 423.789 1009.599 L 417.889 1009.399 L 415.489 1009.699 L 393.089 1008.299 L 387.889 1008.899 L 364.789 1005.599 L 361.389 1004.099 L 362.289 1001.599 L 364.589 997.799 L 365.789 983.499 L 366.589 979.899 L 366.689 975.599 L 365.589 972.599 L 363.289 968.099 L 357.789 958.599 L 354.089 953.199 L 347.189 945.499 L 344.689 942.199 L 344.489 939.199 L 346.589 933.799 L 346.689 928.899 L 345.189 926.399 L 343.489 921.299 L 341.889 918.599 L 338.989 915.999 L 319.189 904.899 L 310.789 902.999 L 297.889 901.399 L 255.189 902.499 L 238.689 907.899 L 236.789 900.299 L 236.789 897.799 L 239.989 886.099 L 246.089 874.799 L 249.389 865.899 L 265.089 841.599 L 267.889 838.899 L 270.989 836.799 L 281.889 832.999 L 292.089 831.299 L 294.389 830.599 L 296.089 829.099 L 296.389 827.199 L 294.189 824.799 L 286.689 819.399 L 286.189 817.199 L 287.189 815.299 L 290.489 812.199 L 295.889 809.599 L 299.289 806.099 L 300.789 800.599 L 299.889 793.099 L 300.089 790.099 L 301.389 781.899 L 301.489 778.499 L 300.989 773.399 L 301.989 770.499 L 319.089 751.499 L 322.989 744.699 L 325.789 742.099 L 332.389 737.199 L 335.889 732.199 L 339.489 725.399 L 342.889 715.899 L 348.689 703.799 L 350.689 701.099 L 353.789 698.899 L 356.489 696.199 L 356.689 691.199 L 352.789 686.999 L 344.889 680.199 L 336.689 666.599 L 334.589 661.599 L 336.489 655.799 L 487.389 652.999 L 492.689 651.199 L 495.689 649.499 L 507.389 644.999 L 514.789 637.099 L 515.289 642.399 L 518.289 656.099 L 520.489 663.499 L 525.889 666.599 L 537.989 670.699 L 544.989 679.799 L 549.689 691.299 L 552.389 704.199 L 553.889 723.099 L 557.089 737.599 L 555.789 744.499 L 552.189 745.999 L 547.189 745.999 L 541.589 747.999 L 535.389 753.799 L 527.589 762.799 L 520.989 773.099 L 518.289 782.699 L 520.789 793.699 L 531.889 811.199 L 534.089 821.499 L 537.089 823.099 L 538.589 825.799 L 537.989 829.299 L 535.889 829.799 L 528.389 828.799 L 525.989 829.299 L 518.789 835.099 L 515.889 838.699 L 514.689 844.099 L 513.489 846.999 L 510.689 849.899 L 507.789 853.899 L 506.589 860.099 L 507.189 867.199 L 509.889 876.599 L 510.489 882.399 L 505.189 924.599 L 501.689 930.999 L 496.689 936.099 L 490.989 943.699 L 484.489 967.999 L 481.389 975.399 L 479.489 985.899 L 483.189 1000.899 L 480.889 1006.299 L 476.789 1011.599 L 472.989 1011.999 L 471.289 1002.699 L 489.089 935.199 L 498.689 924.999 L 502.389 918.999 L 487.289 926.799 L 471.989 965.699 L 459.589 980.199 L 463.289 980.799 L 471.289 984.699 L 467.389 986.599 L 464.389 987.499 L 460.889 986.899 L 455.689 984.699 L 456.889 989.899 L 458.289 992.299 L 461.289 992.999 L 467.289 992.799 L 467.289 996.499 L 461.289 1000.499 L 456.989 1006.499 L 455.989 1013.699 L 457.489 1016.799 L 457.489 1016.799 Z"
id="stanncreek" name="Stann Creek" style="fill: rgb(191, 198, 59);">
<title>Stann Creek</title>
</path>
<path
d="M 457.489 1016.799 L 459.589 1021.199 L 448.889 1029.199 L 437.189 1052.699 L 426.489 1057.699 L 425.389 1060.899 L 424.389 1074.999 L 424.589 1077.899 L 421.289 1079.899 L 418.289 1079.999 L 416.389 1078.999 L 412.789 1080.399 L 408.689 1085.999 L 401.389 1103.799 L 399.089 1106.699 L 394.689 1109.199 L 379.689 1128.999 L 377.989 1132.099 L 375.589 1139.899 L 373.589 1144.499 L 374.389 1149.599 L 372.389 1151.599 L 367.789 1150.899 L 363.689 1152.699 L 356.789 1154.199 L 354.189 1155.699 L 352.989 1157.999 L 350.289 1167.499 L 350.289 1142.799 L 346.389 1142.799 L 342.489 1155.699 L 334.489 1157.599 L 326.689 1152.599 L 323.089 1144.999 L 320.889 1141.599 L 316.089 1141.199 L 309.289 1142.799 L 308.589 1144.899 L 308.889 1155.299 L 307.189 1159.299 L 303.089 1160.699 L 283.889 1163.399 L 280.589 1165.599 L 277.889 1168.399 L 273.789 1170.899 L 266.189 1171.899 L 258.089 1175.599 L 255.789 1184.899 L 256.989 1207.999 L 254.889 1220.299 L 249.489 1229.299 L 241.489 1234.799 L 231.589 1236.699 L 228.689 1238.199 L 225.289 1241.999 L 222.489 1246.599 L 219.989 1256.899 L 216.489 1259.899 L 211.589 1261.799 L 206.089 1264.999 L 199.789 1270.399 L 196.989 1273.499 L 194.389 1277.099 L 193.089 1283.699 L 193.489 1290.299 L 191.989 1295.399 L 177.089 1299.699 L 167.289 1305.699 L 157.689 1313.599 L 151.289 1321.699 L 149.289 1336.399 L 161.189 1361.099 L 159.089 1374.899 L 137.489 1383.399 L 87.089 1370.299 L 68.889 1370.499 L 52.589 1373.199 L 8.989 1371.199 L -1.411 1375.499 L -6.611 1375.799 L -13.211 1378.099 L -18.611 1380.799 L -19.911 1382.699 L -24.611 1374.999 L -23.211 1338.799 L -8.711 1201.799 L 0.089 1079.199 L 6.289 1069.599 L 12.389 1062.499 L 16.289 1057.699 L 18.789 1052.799 L 19.589 1048.499 L 23.889 1042.799 L 26.489 1041.099 L 46.489 1032.799 L 53.989 1032.299 L 60.289 1030.399 L 69.889 1029.299 L 73.589 1027.399 L 77.989 1024.199 L 89.689 1012.899 L 93.289 1008.599 L 94.789 1007.799 L 97.489 1008.699 L 101.089 1011.599 L 104.989 1015.699 L 106.789 1016.799 L 112.389 1016.099 L 134.889 1007.599 L 137.189 1005.799 L 136.489 998.799 L 139.089 994.999 L 144.789 990.499 L 151.189 987.499 L 154.589 986.799 L 157.289 987.299 L 160.789 986.299 L 165.889 983.199 L 181.189 971.399 L 185.189 969.299 L 189.789 967.999 L 192.289 966.899 L 201.489 959.799 L 212.989 947.999 L 214.589 941.799 L 214.189 938.699 L 211.689 928.699 L 212.189 926.199 L 213.689 923.299 L 219.789 915.499 L 224.689 910.799 L 229.089 908.399 L 238.689 907.899 L 255.189 902.499 L 297.889 901.399 L 310.789 902.999 L 319.189 904.899 L 338.989 915.999 L 341.889 918.599 L 343.489 921.299 L 345.189 926.399 L 346.689 928.899 L 346.589 933.799 L 344.489 939.199 L 344.689 942.199 L 347.189 945.499 L 354.089 953.199 L 357.789 958.599 L 363.289 968.099 L 365.589 972.599 L 366.689 975.599 L 366.589 979.899 L 365.789 983.499 L 364.589 997.799 L 362.289 1001.599 L 361.389 1004.099 L 364.789 1005.599 L 387.889 1008.899 L 393.089 1008.299 L 415.489 1009.699 L 417.889 1009.399 L 423.789 1009.599 L 429.489 1010.499 L 441.289 1008.599 L 446.989 1008.999 L 449.389 1009.599 L 450.889 1014.099 L 457.489 1016.799 L 457.489 1016.799 Z"
id="toledo" name="Toledo" style="fill: rgb(43, 106, 62);">
<title>Toledo</title>
</path>
<circle cx="343" cy="1063.2" id="0" />
<circle cx="231.8" cy="1181.5" id="1" />
<circle cx="495.1" cy="389.6" id="2" style="stroke: rgb(186, 218, 85);" />
<g class="marker" data-title="Belize City"
transform="matrix(0.051786, 0.00071, -0.000786, 0.057321, 513.551147, 313.385773)" style="">
<title>Belize City</title>
<g fill-rule="evenodd">
<path
d="m1077.9 1959.6c-38.77-190.3-107.12-348.67-189.9-495.44-61.407-108.87-132.54-209.36-198.36-314.94-21.972-35.24-40.934-72.48-62.047-109.05-42.216-73.14-76.444-157.94-74.269-267.94 2.125-107.47 33.208-193.68 78.03-264.17 73.719-115.94 197.2-210.99 362.88-235.97 135.47-20.424 262.48 14.082 352.54 66.748 73.6 43.038 130.6 100.53 173.92 168.28 45.22 70.716 76.36 154.26 78.97 263.23 1.3401 55.83-7.7999 107.53-20.68 150.42-13.03 43.409-33.99 79.698-52.64 118.46-36.41 75.66-82.05 144.98-127.86 214.34-136.44 206.61-264.5 417.31-320.58 706.03z"
fill="#f00" stroke="#000" stroke-miterlimit="10" stroke-width="37" />
<circle cx="1080.6" cy="740.05" r="183.33" />
</g>
</g>
<g class="marker" data-title="Corozal Town"
transform="matrix(0.051786, 0.00071, -0.000786, 0.057321, 423.976318, -173.042633)" style="">
<title>Corozal Town</title>
<g fill-rule="evenodd">
<path
d="m1077.9 1959.6c-38.77-190.3-107.12-348.67-189.9-495.44-61.407-108.87-132.54-209.36-198.36-314.94-21.972-35.24-40.934-72.48-62.047-109.05-42.216-73.14-76.444-157.94-74.269-267.94 2.125-107.47 33.208-193.68 78.03-264.17 73.719-115.94 197.2-210.99 362.88-235.97 135.47-20.424 262.48 14.082 352.54 66.748 73.6 43.038 130.6 100.53 173.92 168.28 45.22 70.716 76.36 154.26 78.97 263.23 1.3401 55.83-7.7999 107.53-20.68 150.42-13.03 43.409-33.99 79.698-52.64 118.46-36.41 75.66-82.05 144.98-127.86 214.34-136.44 206.61-264.5 417.31-320.58 706.03z"
fill="#f00" stroke="#000" stroke-miterlimit="10" stroke-width="37" />
<circle cx="1080.6" cy="740.05" r="183.33" />
</g>
</g>
<g class="marker" data-title="Orange Walk Town"
transform="matrix(0.051786, 0.00071, -0.000786, 0.057321, 302.087616, 6.628801)" style="">
<title>Orange Walk Town</title>
<g fill-rule="evenodd">
<path
d="m1077.9 1959.6c-38.77-190.3-107.12-348.67-189.9-495.44-61.407-108.87-132.54-209.36-198.36-314.94-21.972-35.24-40.934-72.48-62.047-109.05-42.216-73.14-76.444-157.94-74.269-267.94 2.125-107.47 33.208-193.68 78.03-264.17 73.719-115.94 197.2-210.99 362.88-235.97 135.47-20.424 262.48 14.082 352.54 66.748 73.6 43.038 130.6 100.53 173.92 168.28 45.22 70.716 76.36 154.26 78.97 263.23 1.3401 55.83-7.7999 107.53-20.68 150.42-13.03 43.409-33.99 79.698-52.64 118.46-36.41 75.66-82.05 144.98-127.86 214.34-136.44 206.61-264.5 417.31-320.58 706.03z"
fill="#f00" stroke="#000" stroke-miterlimit="10" stroke-width="37" />
<circle cx="1080.6" cy="740.05" r="183.33" />
</g>
</g>
<g class="marker" data-title="Belmopan City"
transform="matrix(0.051786, 0.00071, -0.000786, 0.057321, 215.200516, 496.958832)" style="">
<title>Belmopan City</title>
<g fill-rule="evenodd">
<path
d="m1077.9 1959.6c-38.77-190.3-107.12-348.67-189.9-495.44-61.407-108.87-132.54-209.36-198.36-314.94-21.972-35.24-40.934-72.48-62.047-109.05-42.216-73.14-76.444-157.94-74.269-267.94 2.125-107.47 33.208-193.68 78.03-264.17 73.719-115.94 197.2-210.99 362.88-235.97 135.47-20.424 262.48 14.082 352.54 66.748 73.6 43.038 130.6 100.53 173.92 168.28 45.22 70.716 76.36 154.26 78.97 263.23 1.3401 55.83-7.7999 107.53-20.68 150.42-13.03 43.409-33.99 79.698-52.64 118.46-36.41 75.66-82.05 144.98-127.86 214.34-136.44 206.61-264.5 417.31-320.58 706.03z"
fill="#f00" stroke="#000" stroke-miterlimit="10" stroke-width="37" />
<circle cx="1080.6" cy="740.05" r="183.33" />
</g>
</g>
<g class="marker" data-title="San Ignacio"
transform="matrix(0.051786, 0.00071, -0.000786, 0.057321, 17.778103, 645.957336)" style="">
<title>San Ignacio</title>
<g fill-rule="evenodd">
<path
d="m1077.9 1959.6c-38.77-190.3-107.12-348.67-189.9-495.44-61.407-108.87-132.54-209.36-198.36-314.94-21.972-35.24-40.934-72.48-62.047-109.05-42.216-73.14-76.444-157.94-74.269-267.94 2.125-107.47 33.208-193.68 78.03-264.17 73.719-115.94 197.2-210.99 362.88-235.97 135.47-20.424 262.48 14.082 352.54 66.748 73.6 43.038 130.6 100.53 173.92 168.28 45.22 70.716 76.36 154.26 78.97 263.23 1.3401 55.83-7.7999 107.53-20.68 150.42-13.03 43.409-33.99 79.698-52.64 118.46-36.41 75.66-82.05 144.98-127.86 214.34-136.44 206.61-264.5 417.31-320.58 706.03z"
fill="#f00" stroke="#000" stroke-miterlimit="10" stroke-width="37" />
<circle cx="1080.6" cy="740.05" r="183.33" />
</g>
</g>
<g class="marker" data-title="Dangriga"
transform="matrix(0.051786, 0.00071, -0.000786, 0.057321, 473.352448, 718.990906)" style="">
<title>Dangriga Town</title>
<g fill-rule="evenodd">
<path
d="m1077.9 1959.6c-38.77-190.3-107.12-348.67-189.9-495.44-61.407-108.87-132.54-209.36-198.36-314.94-21.972-35.24-40.934-72.48-62.047-109.05-42.216-73.14-76.444-157.94-74.269-267.94 2.125-107.47 33.208-193.68 78.03-264.17 73.719-115.94 197.2-210.99 362.88-235.97 135.47-20.424 262.48 14.082 352.54 66.748 73.6 43.038 130.6 100.53 173.92 168.28 45.22 70.716 76.36 154.26 78.97 263.23 1.3401 55.83-7.7999 107.53-20.68 150.42-13.03 43.409-33.99 79.698-52.64 118.46-36.41 75.66-82.05 144.98-127.86 214.34-136.44 206.61-264.5 417.31-320.58 706.03z"
fill="#f00" stroke="#000" stroke-miterlimit="10" stroke-width="37" />
<circle cx="1080.6" cy="740.05" r="183.33" />
</g>
</g>
<g class="marker" data-title="Placencia"
transform="matrix(0.051786, 0.00071, -0.000786, 0.057321, 422.729095, 897.559082)" style="">
<title>Placenica</title>
<g fill-rule="evenodd">
<path
d="m1077.9 1959.6c-38.77-190.3-107.12-348.67-189.9-495.44-61.407-108.87-132.54-209.36-198.36-314.94-21.972-35.24-40.934-72.48-62.047-109.05-42.216-73.14-76.444-157.94-74.269-267.94 2.125-107.47 33.208-193.68 78.03-264.17 73.719-115.94 197.2-210.99 362.88-235.97 135.47-20.424 262.48 14.082 352.54 66.748 73.6 43.038 130.6 100.53 173.92 168.28 45.22 70.716 76.36 154.26 78.97 263.23 1.3401 55.83-7.7999 107.53-20.68 150.42-13.03 43.409-33.99 79.698-52.64 118.46-36.41 75.66-82.05 144.98-127.86 214.34-136.44 206.61-264.5 417.31-320.58 706.03z"
fill="#f00" stroke="#000" stroke-miterlimit="10" stroke-width="37" />
<circle cx="1080.6" cy="740.05" r="183.33" />
</g>
</g>
<g class="marker" data-title="Punta Gorda"
transform="matrix(0.051786, 0.00071, -0.000786, 0.057321, 179.521576, 1131.903809)" style="">
<title>Punta Gorda</title>
<g fill-rule="evenodd">
<path
d="m1077.9 1959.6c-38.77-190.3-107.12-348.67-189.9-495.44-61.407-108.87-132.54-209.36-198.36-314.94-21.972-35.24-40.934-72.48-62.047-109.05-42.216-73.14-76.444-157.94-74.269-267.94 2.125-107.47 33.208-193.68 78.03-264.17 73.719-115.94 197.2-210.99 362.88-235.97 135.47-20.424 262.48 14.082 352.54 66.748 73.6 43.038 130.6 100.53 173.92 168.28 45.22 70.716 76.36 154.26 78.97 263.23 1.3401 55.83-7.7999 107.53-20.68 150.42-13.03 43.409-33.99 79.698-52.64 118.46-36.41 75.66-82.05 144.98-127.86 214.34-136.44 206.61-264.5 417.31-320.58 706.03z"
fill="#f00" stroke="#000" stroke-miterlimit="10" stroke-width="37" />
<circle cx="1080.6" cy="740.05" r="183.33" />
</g>
</g>
<g class="marker" data-title="San Pedro Town"
transform="matrix(0.051786, 0.00071, -0.000786, 0.057321, 660.116821, 43.443077)" style="">
<title>San Pedro Town</title>
<g fill-rule="evenodd">
<path
d="m1077.9 1959.6c-38.77-190.3-107.12-348.67-189.9-495.44-61.407-108.87-132.54-209.36-198.36-314.94-21.972-35.24-40.934-72.48-62.047-109.05-42.216-73.14-76.444-157.94-74.269-267.94 2.125-107.47 33.208-193.68 78.03-264.17 73.719-115.94 197.2-210.99 362.88-235.97 135.47-20.424 262.48 14.082 352.54 66.748 73.6 43.038 130.6 100.53 173.92 168.28 45.22 70.716 76.36 154.26 78.97 263.23 1.3401 55.83-7.7999 107.53-20.68 150.42-13.03 43.409-33.99 79.698-52.64 118.46-36.41 75.66-82.05 144.98-127.86 214.34-136.44 206.61-264.5 417.31-320.58 706.03z"
stroke-miterlimit="10" stroke-width="37" fill="#f00" stroke="#000" />
<circle cx="1080.6" cy="740.05" r="183.33" />
</g>
</g>
</svg>
</div>
<div class="weather-details">
<div class="music-container" id="music-container">
<div class="music-info">
<h4 id="title"></h4>
<div class="progress-container" id="progress-container">
<div class="progress" id="progress"></div>
</div>
</div>
<audio src="https://wimp.nms.gov.bz/WIMPv2.0/forecast/general/audio/2023-02-07_1200_PM_NMS_BZ.mp3"
id="audio"></audio>
<div class="img-container">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Flag_of_Belize.svg/1280px-Flag_of_Belize.svg.png"
alt="music-cover" id="cover" />
</div>
<div class="navigation">
<button id="prev" class="action-btn">
<i class="fas fa-backward"></i>
</button>
<button id="play" class="action-btn action-btn-big">
<i class="fas fa-play"></i>
</button>
<button id="next" class="action-btn">
<i class="fas fa-forward"></i>
</button>
</div>
</div>
<div class="general-forecast">
<div class="today">
<div class="selector">
<label for="locations">Choose a location</label>
<select name="locations" id="locations">
</select>
<div class="moon-sunrise">
<div class="row">
<div class="col">
<h4>Sunrise</h4> <span class="sunrise">...</span>
</div>
<div class="col">
<h4>Sunset</h4> <span class="sunset">...</span>
</div>
</div>
<div class="row">
<div class="col">
<h4>Moonrise</h4> <span class="moonrise">...</span>
</div>
<div class="col">
<h4>Moonset: </h4> <span class="moonset">...</span>
</div>
</div>
<div class="tide-details">
<h4>Tide Details</h4>
</div>
</div>
</div>
<div class="forecast-details">
<h3>Today</h3>
<div class="detail city">...</div>
<div class="detail icon">...</div>
<div class="detail temperature">...</div>
<div class="detail wind">...</div>
</div>
</div>
<div class="tonight">
<div class="forecast-details">
<h3>Tonight</h3>
<div class="detail city">...</div>
<div class="detail icon">...</div>
<div class="detail temperature">...</div>
<div class="detail wind">...</div>
</div>
</div>
<div class="tomorrow">
<div class="forecast-details">
<h3>Tomorrow</h3>
<div class="detail city">...</div>
<div class="detail icon">...</div>
<div class="detail temperature"></div>
<div class="detail wind">...</div>
</div>
</div>
</div>
<!-- <div class="progress"></div> -->
<div class="sevenday-forcast">
<canvas id="myChart"></canvas>
</div>
</div>
</div>
</div>
<div class="weather-box">
<h2>Weather Graphs</h2>
<div class="graphs">
<div class="graph-container">
<div class="graph-title">
Radar
</div>
<img src="http://nms.gov.bz/images/radar/250/latest_250kmloop.gif" alt="Belize Live Weather Radar" />
</div>
<div class="graph-container">
<div class="graph-title">
Satallite
</div>
<img src="https://nms.gov.bz/images/radar/250/latest_PAC_250kmpic.gif" alt="Belize Live Weather Satallite" />
</div>
<div class="graph-container">
<div class="graph-title">
Weather Stations
</div>
<img
src="https://www.researchgate.net/profile/Jonathan-Lashley/publication/295078178/figure/fig2/AS:330834843324422@1455888581393/Location-of-Weather-Stations-in-Belize.png"
alt="Belize Live Weather Stations" />
</div>
</div>
</div>
<footer>
<p>
View Source Code
<a href="https://github.com/lmanzanero/weather-app" target="_blank">
Here</a>
</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script type="text/javascript" src="generalWeather.js"></script>
<script type="text/javascript" src="getAreasWeather.js"></script>
<script type="text/javascript" src="forecastWeather.js"></script>
<script type="module">
let lon;
let lat;
let forecastAreas = [];
let daily
const locationSelect = document.getElementById("locations");
let currentLocation = 'corozal';
const mapMarkers = document.querySelectorAll("#BelizeMap .marker");
mapMarkers.forEach(marker => {
marker.addEventListener('click', function (e) {
const districtWeather = forecastAreas.filter(area => area.zone_description === marker.dataset.title);
document.querySelector('.tooltip').innerHTML = `
<h3>${districtWeather[0].zone_description}</h3>
<span>Max Temp: ${districtWeather[0]?.temp_max ?? "unavailable"}</span>
<span>Max Temp: ${districtWeather[0]?.temp_min ?? "unavailable"}</span>
<span>Wind: ${districtWeather[0]?.wind_speed ?? "unavailable"}</span>
<span>${districtWeather[0]?.weather_condition ?? "unavailable"}</span>
`;
//get mouse position
let mousePosition = {
x: e.clientX,
y: e.clientY
}
const map = document.querySelector('.map');
//change tooltip position near mouse
const tooltip = document.querySelector('.tooltip');
tooltip.style.left = `${(mousePosition.x - map.offsetWidth / 2)}px`;
tooltip.style.top = `${(mousePosition.y - map.offsetHeight / 2)}px`;
})
});
locationSelect.addEventListener('change', function (e) {
console.log(e.target.value)
currentLocation = e.target.value;
city.textContent = currentLocation;
})
await getWeather(`https://dark-jade-crab-kit.cyclic.app/api/location`);
await getForcast(`https://dark-jade-crab-kit.cyclic.app/api/forecast`);
const areaWeatherData = await getAreasWeather(`https://dark-jade-crab-kit.cyclic.app/api/forecastareas`);
forecastAreas = areaWeatherData;
forecastAreas.forEach(area => {
locationSelect.add(new Option(area.zone_description, area.zone_description))
});
//Trigger first dataset of tooltip to be shown
const clickEvent = new Event('click');
mapMarkers[1].dispatchEvent(clickEvent);
</script>
<script src="player.js" defer></script>
</body>
</html>