diff --git a/public/CSS/rotterdam3d.css b/public/CSS/rotterdam3d.css
index b40d7458b8f90732ba217604889337ff3165dc21..ff320273c33e943e89062bef7f9946cfa34d816a 100644
--- a/public/CSS/rotterdam3d.css
+++ b/public/CSS/rotterdam3d.css
@@ -1,10 +1,4 @@
-
-/*
-html,
-body,
-*/
-
#Navbar {
overflow: hidden;
}
@@ -22,13 +16,6 @@ body,
overflow: hidden;
z-index: -1;
}
-
-#legend {
- position: relative;
- left: 5px;
- top: 5px;
-}
-
.backdrop {
display: inline-block;
background: rgba(42, 42, 42, 0.7);
@@ -43,7 +30,6 @@ body,
button.cesium-infoBox-camera {
display: none;
}
-
.cesium-infoBox {
width: 80%;
@@ -57,52 +43,91 @@ button.cesium-infoBox-camera {
font: 1em "Fira Sans", sans-serif;
float: right;
}
-
.cesium-infoBox-title {
background: rgba(0, 0, 0, 0);
font: 1em "Fira Sans", sans-serif;
}
-
.cesium-infoBox-close {
z-index: 99999;
}
-
-.my-legend .legend-title {
- text-align: left;
- margin-bottom: 5px;
- font-weight: bold;
- font-size: 90%;
+.legends {
+ transform: translate(0, 0);
+ display: none;
+ bottom: 35px;
+ right: 10px;
+ width: 70%;
+ max-width: 480px;
+ color: #edffff;
+ border: 1px solid #444;
+ border-right: none;
+ border-top-left-radius: 7px;
+ border-bottom-left-radius: 7px;
+ box-shadow: 0 0 10px 1px #000;
+ opacity: 0.9;
+ transition: visibility 0s 0.3s, opacity 0.3s ease-in, transform 0.3s ease-in;
+ background: rgba(42, 42, 42, 0.9);
+ position: absolute;
+ padding: 8px;
+ border-radius: 10px;
}
-
-.my-legend .legend-scale ul {
- margin: 0;
- margin-bottom: 5px;
- padding: 0;
- float: left;
- list-style: none;
+.irradianceLegend-container {
+ background: rgba(42, 42, 42, 0.9);
+ padding: 8px;
+ border-radius: 4px;
+ text-align: center;
}
-
-.my-legend .legend-scale ul li {
- list-style: none;
- margin-left: 0;
- line-height: 18px;
- margin-bottom: 2px;
+#irradianceLegend-title {
+ margin: 0px;
+ padding-bottom: 10px;
}
-
-.my-legend ul.legend-labels li span {
- display: block;
- float: left;
- height: 16px;
- width: 30px;
- margin-right: 5px;
- margin-left: 0;
- border: 1px solid #999;
+.irradianceLegend-Bar {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ width: 100%;
+ height: 30px;
+ background: linear-gradient(to right, #0D0887 0%, #8305A7 25%, #D04D73 50%, #FBA139 75%, #F0F921 100%);
+ color: #000;
+ font-size: 14px;
+ font-weight: bold;
}
-
-.my-legend a {
- color: #777;
+.pvLegend-container {
+ background: rgba(42, 42, 42, 0.9);
+ padding: 8px;
+ border-radius: 4px;
+ text-align: center;
+}
+#pvLegend-title {
+ margin: 0px;
+ padding-bottom: 10px;
+}
+.pvLegend-Bar {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ width: 100%;
+ height: 30px;
+ background: linear-gradient(to right, #ff0000 0%, #e29700 50%, #00ff00 100%);
+ color: #000;
+ font-size: 14px;
+ font-weight: bold;
+}
+#bottom-round {
+ border-top-left-radius: 20px;
+ border-top-right-radius: 20px;
+ border-bottom-right-radius: 20px;
+ border-bottom-left-radius: 20px;
+}
+.values {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ width: 100%;
+ height: 25px;
+ color: #edffff;
+ font-size: 14px;
+ font-weight: bold;
}
-
.credit {
width: 100px;
@@ -115,6 +140,5 @@ button.cesium-infoBox-camera {
bottom: 70px;
left: 10px;
box-shadow: 0 0 10px 1px #000;
- /* left: 5px;*/
-}
+ }
diff --git a/public/Source/App.js b/public/Source/App.js
index e7f853bce22a6e447b7a078e8a46e5d4af32f6bc..d2f39b3cd2b293866a575ea96d65cffa5370fb00 100644
--- a/public/Source/App.js
+++ b/public/Source/App.js
@@ -82,12 +82,31 @@
var irradiancestyle = new Cesium.Cesium3DTileStyle({
color : {
conditions : [
- ["(${Irr_kWh} > 0) && (${Irr_kWh} < 200)", "color('#6495ED')"],
- ["(${Irr_kWh} >= 200) && (${Irr_kWh} < 450)", "color('#9370DB')"],
- ["(${Irr_kWh} >= 450) && (${Irr_kWh} < 700)", "color('#8B0000')"],
- ["(${Irr_kWh} >= 700) && (${Irr_kWh} < 950)", "color('#D2691E')"],
- ["(${Irr_kWh} >= 950) && (${Irr_kWh} < 1250)", "color('#FFEBCD')"],
- ["(${Irr_kWh} >= 1250)", "color('#EC1414')"],
+ ["(${Irr_kWh} > 0) && (${Irr_kWh} < 50)", "color('#0D0887')"],
+ ["(${Irr_kWh} >= 50) && (${Irr_kWh} < 100)", "color('#280592')"],
+ ["(${Irr_kWh} >= 100) && (${Irr_kWh} < 150)", "color('#3C049B')"],
+ ["(${Irr_kWh} >= 150) && (${Irr_kWh} < 200)", "color('#4E02A2')"],
+ ["(${Irr_kWh} >= 200) && (${Irr_kWh} < 250)", "color('#6001A6')"],
+ ["(${Irr_kWh} >= 250) && (${Irr_kWh} < 300)", "color('#7100A8')"],
+ ["(${Irr_kWh} >= 300) && (${Irr_kWh} < 350)", "color('#8305A7')"],
+ ["(${Irr_kWh} >= 350) && (${Irr_kWh} < 400)", "color('#920FA3')"],
+ ["(${Irr_kWh} >= 400) && (${Irr_kWh} < 450)", "color('#A11B9B')"],
+ ["(${Irr_kWh} >= 450) && (${Irr_kWh} < 500)", "color('#AE2892')"],
+ ["(${Irr_kWh} >= 500) && (${Irr_kWh} < 550)", "color('#BB3488')"],
+ ["(${Irr_kWh} >= 550) && (${Irr_kWh} < 600)", "color('#C6417D')"],
+ ["(${Irr_kWh} >= 600) && (${Irr_kWh} < 650)", "color('#D04D73')"],
+ ["(${Irr_kWh} >= 650) && (${Irr_kWh} < 700)", "color('#DA5A6A')"],
+ ["(${Irr_kWh} >= 700) && (${Irr_kWh} < 750)", "color('#E26660')"],
+ ["(${Irr_kWh} >= 750) && (${Irr_kWh} < 800)", "color('#EA7457')"],
+ ["(${Irr_kWh} >= 800) && (${Irr_kWh} < 850)", "color('#F1814D')"],
+ ["(${Irr_kWh} >= 850) && (${Irr_kWh} < 900)", "color('#F79044')"],
+ ["(${Irr_kWh} >= 900) && (${Irr_kWh} < 950)", "color('#FBA139')"],
+ ["(${Irr_kWh} >= 950) && (${Irr_kWh} < 1000)", "color('#FDB130')"],
+ ["(${Irr_kWh} >= 1000) && (${Irr_kWh} < 1050)", "color('#FDC229')"],
+ ["(${Irr_kWh} >= 1050) && (${Irr_kWh} < 1100)", "color('#FBD324')"],
+ ["(${Irr_kWh} >= 1100) && (${Irr_kWh} < 1150)", "color('#F6E626')"],
+ ["(${Irr_kWh} >= 1150) && (${Irr_kWh} < 1200)", "color('#F0F921')"],
+ ["(${Irr_kWh} >= 1200)", "color('#F0F921')"],
["true", "color('#000000')"]
]
},
diff --git a/public/index.html b/public/index.html
index dc58bebc3bdb321208c36fd8a38ed163fb6e94cf..0def2ac71142969d48457ac120fa74e5802a4e8e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -35,44 +35,44 @@
<input id="pv" name="source" type="radio"/>
<label for="pv">Photovoltaic Potential</label>
</div>
- <br>
+ </div>
- <!-- for legend panel -->
- <div id=irradianceLegend>
- <hr color='white'>
- <div class='my-legend' id="legendcontainer">
- <div class='legend-title'>Solar Irradiance (kWh/(m².a))</div>
- <div class='legend-scale'>
- <ul class='legend-labels'>
- <li><span style='background:#6495ED;'></span>Less than 200</li>
- <li><span style='background:#9370DB;'></span>200 to 450</li>
- <li><span style='background:#8B0000;'></span>450 to 700</li>
- <li><span style='background:#D2691E;'></span>700 to 950</li>
- <li><span style='background:#FFEBCD;'></span>950 to 1250</li>
- <li><span style='background:#EC1414;'></span>More than 1250</li>
- </ul>
- </div>
+ <div class="legends" id="irradianceLegend">
+ <div class="irradianceLegend-container">
+ <h3 id="irradianceLegend-title">
+ Solar Irradiance (kWh/(m².a))
+ </h3>
+ <div class= "irradianceLegend-Bar" id="bottom-round"/>
</div>
- </div>
- <div id=pvLegend>
- <hr color='white'>
- <div class='my-legend' id="legendcontainer">
- <div class='legend-title'>Photovoltaic Potential (MWh/a)</div>
- <div class='legend-scale'>
- <ul class='legend-labels'>
- <li><span style='background:#ff0000;'></span>No Photovoltaic Potential</li>
- <li><span style='background:#fc4f00;'></span>Less than 5</li>
- <li><span style='background:#f27600;'></span>5 to 10</li>
- <li><span style='background:#e29700;'></span>10 to 15</li>
- <li><span style='background:#cab500;'></span>15 to 20</li>
- <li><span style='background:#aad000;'></span>20 to 25</li>
- <li><span style='background:#7de800;'></span>25 to 30</li>
- <li><span style='background:#00ff00;'></span>More than 30</li>
- </ul>
- </div>
+ <div class="values">
+ <div class="value">0</div>
+ <div class="value">200</div>
+ <div class="value">400</div>
+ <div class="value">800</div>
+ <div class="value">1000</div>
+ <div class="value">>1200</div>
</div>
</div>
</div>
+
+ <div class="legends" id="pvLegend">
+ <div class="pvLegend-container">
+ <h3 id="pvLegend-title">
+ Photovoltaic Potential (MWh/a)
+ </h3>
+ <div class= "pvLegend-Bar" id="bottom-round"/>
+ </div>
+ <div class="values">
+ <div class="value">0</div>
+ <div class="value">5</div>
+ <div class="value">10</div>
+ <div class="value">15</div>
+ <div class="value">20</div>
+ <div class="value">25</div>
+ <div class="value">>30</div>
+ </div>
+ </div>
+ </div>
<a href="https://www.hft-stuttgart.de/" target='_blank'>
<div class="credit"></div>
</a>