Skip to content

Commit de30d15

Browse files
AJFrostyAJFrosty
committed
Geothermal Map Complete with Legend!
1 parent e59bfff commit de30d15

File tree

9 files changed

+456
-136
lines changed

9 files changed

+456
-136
lines changed

‎Forecast/style.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,4 +126,8 @@ body {
126126
.caribbean-country {
127127
color: #fff;
128128
font: 16px;
129+
}
130+
131+
a {
132+
color: blueviolet;
129133
}

‎Geothermal/index.html

Lines changed: 22 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,25 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<script src="https://code.jquery.com/jquery.min.js"></script>
5-
<link
6-
href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"
7-
rel="stylesheet"
8-
type="text/css"
9-
/>
10-
<link rel="icon" href="https://th.bing.com/th/id/R.770b805d5c99c7931366c2e84e88f251?rik=khgO%2bY1Hh3BT9w&riu=http%3a%2f%2fpurepng.com%2fpublic%2fuploads%2flarge%2fpurepng.com-weather-iconsymbolsiconsapple-iosiosios-8-iconsios-8-721522596142qx4ep.png&ehk=6msbAydV7X6D4bO8zvLC664aXwKOdBU17dwrHcKxaAg%3d&risl=&pid=ImgRaw&r=0" type="image/x-icon">
11-
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
12-
<link
13-
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
14-
rel="stylesheet"
15-
type="text/css"
16-
/>
17-
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
183

19-
<link href="style.css" rel="stylesheet" type="text/css" />
20-
<script src="script.js"></script>
21-
<meta charset="utf-8" />
22-
<title>World Map</title>
23-
</head>
24-
<body>
25-
<div id="map"></div>
26-
<div id="legend" class="legend">
27-
<h3>Legend</h3>
28-
<div class="legend-item">
29-
<div class="legend-color" style="background: rgba(110, 110, 205, 0.3);"></div>
30-
<div class="legend-label">Temperature</div>
31-
</div>
32-
<div class="legend-item">
33-
<div class="legend-color" style="background: rgba(20, 20, 255, 0.9);"></div>
34-
<div class="legend-label">Precipitation</div>
35-
</div>
36-
<div class="legend-item">
37-
<div class="legend-color" style="background: rgba(244, 244, 255, 1);"></div>
38-
<div class="legend-label">Wind Speed</div>
39-
</div>
40-
<div class="legend-item">
41-
<div class="legend-color" style="background: rgba(240, 240, 255, 1);"></div>
42-
<div class="legend-label">Clouds</div>
43-
</div>
44-
<div class="legend-item">
45-
<div class="legend-color" style="background: rgba(198, 0, 0, 1);"></div>
46-
<div class="legend-label">Sea Level Pressure</div>
47-
</div>
48-
</div>
49-
</body>
50-
</html>
4+
<head>
5+
<script src="https://code.jquery.com/jquery.min.js"></script>
6+
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" rel="stylesheet" type="text/css" />
7+
<link rel="icon"
8+
href="https://th.bing.com/th/id/R.770b805d5c99c7931366c2e84e88f251?rik=khgO%2bY1Hh3BT9w&riu=http%3a%2f%2fpurepng.com%2fpublic%2fuploads%2flarge%2fpurepng.com-weather-iconsymbolsiconsapple-iosiosios-8-iconsios-8-721522596142qx4ep.png&ehk=6msbAydV7X6D4bO8zvLC664aXwKOdBU17dwrHcKxaAg%3d&risl=&pid=ImgRaw&r=0"
9+
type="image/x-icon">
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
11+
<link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet" type="text/css" />
12+
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
13+
14+
<link href="style.css" rel="stylesheet" type="text/css" />
15+
<script src="script.js"></script>
16+
<meta charset="utf-8" />
17+
<title>World Map</title>
18+
</head>
19+
20+
<body>
21+
<div id="map"></div>
22+
<div class="legend"></div>
23+
</body>
24+
25+
</html>

‎Geothermal/legends/clouds-legend.html

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<style>
7+
body {
8+
margin: 0;
9+
padding: 0;
10+
height: 100vh;
11+
display: flex;
12+
justify-content: flex-end;
13+
align-items: flex-end;
14+
}
15+
16+
.legend {
17+
display: flex;
18+
flex-direction: column;
19+
align-items: flex-start;
20+
margin: 10px;
21+
}
22+
23+
.legend-stop {
24+
display: flex;
25+
align-items: center;
26+
margin-bottom: 5px;
27+
}
28+
29+
.color-box {
30+
width: 20px;
31+
height: 20px;
32+
margin-right: 5px;
33+
}
34+
35+
.legend-label {
36+
font-size: 14px;
37+
}
38+
</style>
39+
</head>
40+
<body>
41+
<div class="legend">
42+
<div class="legend-stop">
43+
<div class="color-box" style="background-color: rgba(255, 255, 255, 0.0);"></div>
44+
<div class="legend-label">0%</div>
45+
</div>
46+
<div class="legend-stop">
47+
<div class="color-box" style="background-color: rgba(253, 253, 255, 0.1);"></div>
48+
<div class="legend-label">10%</div>
49+
</div>
50+
<div class="legend-stop">
51+
<div class="color-box" style="background-color: rgba(252, 251, 255, 0.2);"></div>
52+
<div class="legend-label">20%</div>
53+
</div>
54+
<div class="legend-stop">
55+
<div class="color-box" style="background-color: rgba(250, 250, 255, 0.3);"></div>
56+
<div class="legend-label">30%</div>
57+
</div>
58+
<div class="legend-stop">
59+
<div class="color-box" style="background-color: rgba(249, 248, 255, 0.4);"></div>
60+
<div class="legend-label">40%</div>
61+
</div>
62+
<div class="legend-stop">
63+
<div class="color-box" style="background-color: rgba(247, 247, 255, 0.5);"></div>
64+
<div class="legend-label">50%</div>
65+
</div>
66+
<div class="legend-stop">
67+
<div class="color-box" style="background-color: rgba(246, 245, 255, 0.75);"></div>
68+
<div class="legend-label">60%</div>
69+
</div>
70+
<div class="legend-stop">
71+
<div class="color-box" style="background-color: rgba(244, 244, 255, 1);"></div>
72+
<div class="legend-label">70%</div>
73+
</div>
74+
<div class="legend-stop">
75+
<div class="color-box" style="background-color: rgba(243, 242, 255, 1);"></div>
76+
<div class="legend-label">80%</div>
77+
</div>
78+
<div class="legend-stop">
79+
<div class="color-box" style="background-color: rgba(242, 241, 255, 1);"></div>
80+
<div class="legend-label">90%</div>
81+
</div>
82+
<div class="legend-stop">
83+
<div class="color-box" style="background-color: rgba(240, 240, 255, 1);"></div>
84+
<div class="legend-label">100%</div>
85+
</div>
86+
</div>
87+
</body>
88+
</html>

‎Geothermal/legends/precipitation-legend.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<style>
7+
body {
8+
margin: 0;
9+
padding: 0;
10+
height: 100vh;
11+
display: flex;
12+
justify-content: flex-end;
13+
align-items: flex-end;
14+
}
15+
16+
.legend {
17+
display: flex;
18+
flex-direction: column;
19+
align-items: flex-start;
20+
margin: 10px;
21+
}
22+
23+
.legend-stop {
24+
display: flex;
25+
align-items: center;
26+
margin-bottom: 5px;
27+
}
28+
29+
.color-box {
30+
width: 20px;
31+
height: 20px;
32+
margin-right: 5px;
33+
}
34+
35+
.legend-label {
36+
font-size: 14px;
37+
}
38+
</style>
39+
</head>
40+
<body>
41+
<div class="legend">
42+
<div class="legend-stop">
43+
<div class="color-box" style="background-color: rgba(225, 200, 100, 0);"></div>
44+
<div class="legend-label">0 mm</div>
45+
</div>
46+
<div class="legend-stop">
47+
<div class="color-box" style="background-color: rgba(110, 110, 205, 0.3);"></div>
48+
<div class="legend-label">1 mm</div>
49+
</div>
50+
<div class="legend-stop">
51+
<div class="color-box" style="background-color: rgba(80, 80, 225, 0.7);"></div>
52+
<div class="legend-label">10 mm</div>
53+
</div>
54+
<div class="legend-stop">
55+
<div class="color-box" style="background-color: rgba(20, 20, 255, 0.9);"></div>
56+
<div class="legend-label">140 mm</div>
57+
</div>
58+
</div>
59+
</body>
60+
</html>

‎Geothermal/legends/pressure-legend.html

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<style>
7+
body {
8+
margin: 0;
9+
padding: 0;
10+
height: 100vh;
11+
display: flex;
12+
justify-content: flex-end;
13+
align-items: flex-end;
14+
}
15+
16+
.legend {
17+
display: flex;
18+
flex-direction: column;
19+
align-items: flex-start;
20+
margin: 10px;
21+
}
22+
23+
.legend-stop {
24+
display: flex;
25+
align-items: center;
26+
margin-bottom: 5px;
27+
}
28+
29+
.color-box {
30+
width: 20px;
31+
height: 20px;
32+
margin-right: 5px;
33+
}
34+
35+
.legend-label {
36+
font-size: 14px;
37+
}
38+
</style>
39+
</head>
40+
<body>
41+
<div class="legend">
42+
<div class="legend-stop">
43+
<div class="color-box" style="background-color: rgba(0,115,255,1);"></div>
44+
<div class="legend-label">94,000 Pa</div>
45+
</div>
46+
<div class="legend-stop">
47+
<div class="color-box" style="background-color: rgba(0,170,255,1);"></div>
48+
<div class="legend-label">96,000 Pa</div>
49+
</div>
50+
<div class="legend-stop">
51+
<div class="color-box" style="background-color: rgba(75,208,214,1);"></div>
52+
<div class="legend-label">98,000 Pa</div>
53+
</div>
54+
<div class="legend-stop">
55+
<div class="color-box" style="background-color: rgba(141,231,199,1);"></div>
56+
<div class="legend-label">100,000 Pa</div>
57+
</div>
58+
<div class="legend-stop">
59+
<div class="color-box" style="background-color: rgba(176,247,32,1);"></div>
60+
<div class="legend-label">101,000 Pa</div>
61+
</div>
62+
<div class="legend-stop">
63+
<div class="color-box" style="background-color: rgba(240,184,0,1);"></div>
64+
<div class="legend-label">102,000 Pa</div>
65+
</div>
66+
<div class="legend-stop">
67+
<div class="color-box" style="background-color: rgba(251,85,21,1);"></div>
68+
<div class="legend-label">104,000 Pa</div>
69+
</div>
70+
<div class="legend-stop">
71+
<div class="color-box" style="background-color: rgba(243,54,59,1);"></div>
72+
<div class="legend-label">106,000 Pa</div>
73+
</div>
74+
<div class="legend-stop">
75+
<div class="color-box" style="background-color: rgba(198, 0, 0, 1);"></div>
76+
<div class="legend-label">108,000 Pa</div>
77+
</div>
78+
</div>
79+
</body>
80+
</html>

0 commit comments

Comments
 (0)