Update index.html, index.css, public/CSS/Gerlingen.css,...

Update index.html, index.css, public/CSS/Gerlingen.css, public/CSS/Images/hft.jpg, public/Source/App.js, public/Source/Data/Gerlingen_Grid5050_heat.json, public/Source/Data/Bldg/tileset.json, public/Source/Data/Bldg/data/data1.b3dm, public/Source/Data/Bldg/data/data4.b3dm, public/Source/Data/Bldg/data/data2.b3dm, public/Source/Data/Bldg/data/data10.b3dm, public/Source/Data/Bldg/data/data13.b3dm, public/Source/Data/Bldg/data/data14.b3dm, public/Source/Data/Bldg/data/data15.b3dm, public/Source/Data/Bldg/data/data16.b3dm, public/Source/Data/Bldg/data/data17.b3dm, public/Source/Data/Bldg/data/data18.b3dm, public/Source/Data/Bldg/data/data19.b3dm, public/Source/Data/Bldg/data/data20.b3dm, public/Source/Data/Bldg/data/data21.b3dm, public/Source/Data/Bldg/data/data62.b3dm, public/Source/Data/Bldg/data/data66.b3dm, public/Source/Data/Bldg/data/data22.b3dm, public/Source/Data/Bldg/data/data68.b3dm, public/Source/Data/Bldg/data/data23.b3dm, public/Source/Data/Bldg/data/data69.b3dm, public/Source/Data/Bldg/data/data24.b3dm, public/Source/Data/Bldg/data/data25.b3dm, public/Source/Data/Bldg/data/data27.b3dm, public/Source/Data/Bldg/data/data28.b3dm, public/Source/Data/Bldg/data/data79.b3dm, public/Source/Data/Bldg/data/data32.b3dm, public/Source/Data/Bldg/data/data34.b3dm, public/Source/Data/Bldg/data/data35.b3dm, public/Source/Data/Bldg/data/data38.b3dm, public/Source/Data/Bldg/data/data39.b3dm, public/Source/Data/Bldg/data/data41.b3dm, public/Source/Data/Bldg/data/data40.b3dm, public/Source/Data/Bldg/data/data42.b3dm, public/Source/Data/Bldg/data/data43.b3dm, public/Source/Data/Bldg/data/data44.b3dm, public/Source/Data/Bldg/data/data46.b3dm, public/Source/Data/Bldg/data/data47.b3dm, public/Source/Data/Bldg/data/data49.b3dm, public/Source/Data/Bldg/data/data71.b3dm, public/Source/Data/Bldg/data/data53.b3dm, public/Source/Data/Bldg/data/data52.b3dm, public/Source/Data/Bldg/data/data54.b3dm, public/Source/Data/Bldg/data/data55.b3dm, public/Source/Data/Bldg/data/data56.b3dm, public/Source/Data/Bldg/data/data57.b3dm, public/Source/Data/Bldg/data/data58.b3dm, public/Source/Data/Bldg/data/data61.b3dm, public/Source/Data/Bldg/data/data60.b3dm, public/Source/Data/Bldg/data/data59.b3dm, public/Source/Data/Bldg/data/data65.b3dm, public/Source/Data/Bldg/data/data67.b3dm, public/Source/Data/Bldg/data/data70.b3dm, public/Source/Data/Bldg/data/data73.b3dm, public/Source/Data/Bldg/data/data76.b3dm, public/Source/Data/Bldg/data/data78.b3dm, public/Source/Data/Bldg/data/data12.b3dm, public/Source/Data/Bldg/data/data77.b3dm, public/Source/Data/Bldg/data/data7.b3dm, public/Source/Data/Bldg/data/data82.b3dm, public/Source/Data/Bldg/data/data36.b3dm, public/Source/Data/Bldg/data/data80.b3dm, public/Source/Data/Bldg/data/data11.b3dm, public/Source/Data/Bldg/data/data72.b3dm, public/Source/Data/Bldg/data/data29.b3dm, public/Source/Data/Bldg/data/data64.b3dm, public/Source/Data/Bldg/data/data30.b3dm, public/Source/Data/Bldg/data/data33.b3dm, public/Source/Data/Bldg/data/data0.b3dm, public/Source/Data/Bldg/data/data50.b3dm, public/Source/Data/Bldg/data/data83.b3dm, public/Source/Data/Bldg/data/data81.b3dm, public/Source/Data/Bldg/data/data84.b3dm, public/Source/Data/Bldg/data/data85.b3dm, public/Source/Data/Bldg/data/data86.b3dm, public/Source/Data/Bldg/data/data89.b3dm, public/Source/Data/Bldg/data/data90.b3dm, public/Source/Data/Bldg/data/data91.b3dm, public/Source/Data/Bldg/data/data92.b3dm, public/Source/Data/Bldg/data/data93.b3dm, public/Source/Data/Bldg/data/data94.b3dm, public/Source/Data/Bldg/data/data95.b3dm, public/Source/Data/Bldg/data/data96.b3dm, public/Source/Data/Bldg/data/data97.b3dm, public/Source/Data/Bldg/data/data98.b3dm, public/Source/Data/Bldg/data/data99.b3dm, public/Source/Data/Bldg/data/data48.b3dm, public/Source/Data/Bldg/data/data45.b3dm, public/Source/Data/Bldg/data/data74.b3dm, public/Source/Data/Bldg/data/data26.b3dm, public/Source/Data/Bldg/data/data9.b3dm, public/Source/Data/Bldg/data/data3.b3dm, public/Source/Data/Bldg/data/data31.b3dm, public/Source/Data/Bldg/data/data88.b3dm, public/Source/Data/Bldg/data/data75.b3dm, public/Source/Data/Bldg/data/data8.b3dm, public/Source/Data/Bldg/data/data6.b3dm, public/Source/Data/Bldg/data/data87.b3dm, public/Source/Data/Bldg/data/data5.b3dm, public/Source/Data/Bldg/data/data37.b3dm, public/Source/Data/Bldg/data/data63.b3dm, public/Source/Data/Bldg/data/data51.b3dm, public/Source/Data/Bldg/data/data100.b3dm, public/Source/Data/Bldg/data/data101.b3dm, public/Source/Data/Bldg/data/data102.b3dm, public/Source/Data/Bldg/data/data103.b3dm, public/Source/Data/Bldg/data/data104.b3dm, public/Source/Data/Bldg/data/data105.b3dm, public/Source/Data/Bldg/data/data106.b3dm, public/Source/Data/Bldg/data/data107.b3dm, public/Source/Data/Bldg/data/data108.b3dm, public/Source/Data/Bldg/data/data109.b3dm, public/Source/Data/Bldg/data/data110.b3dm, public/Source/Data/Bldg/data/data111.b3dm, public/Source/Data/Bldg/data/data112.b3dm, public/Source/Data/Bldg/data/data113.b3dm, public/Source/Data/Bldg/data/data114.b3dm, public/Source/Data/Bldg/data/data115.b3dm, public/Source/Data/Bldg/data/data116.b3dm, public/Source/Data/Bldg/data/data117.b3dm, public/Source/Data/Bldg/data/data118.b3dm, public/Source/Data/Bldg/data/data119.b3dm, public/Source/Data/Bldg/data/data120.b3dm, public/Source/Data/Bldg/data/data121.b3dm, public/Source/Data/Bldg/data/data122.b3dm, public/Source/Data/Bldg/data/data123.b3dm, public/Source/Data/Bldg/data/data124.b3dm, public/Source/Data/Bldg/data/data125.b3dm, public/Source/Data/Bldg/data/data126.b3dm, public/Source/Data/Bldg/data/data127.b3dm, public/Source/Data/Bldg/data/data128.b3dm, public/Source/Data/Bldg/data/data129.b3dm, public/Source/Data/Bldg/data/data130.b3dm, public/Source/Data/Bldg/data/data131.b3dm, public/Source/Data/Bldg/data/data132.b3dm, public/Source/Data/Bldg/data/data133.b3dm, public/Source/Data/Roof/tileset.json, public/Source/Data/Roof/data/data0.b3dm, public/Source/Data/Roof/data/data1.b3dm, public/Source/Data/Roof/data/data3.b3dm, public/Source/Data/Roof/data/data4.b3dm, public/Source/Data/Roof/data/data5.b3dm, public/Source/Data/Roof/data/data6.b3dm, public/Source/Data/Roof/data/data7.b3dm, public/Source/Data/Roof/data/data2.b3dm, public/Source/Data/Roof/data/data8.b3dm, public/Source/Data/Roof/data/data9.b3dm, public/Source/Data/Roof/data/data10.b3dm, public/Source/Data/Roof/data/data11.b3dm, public/Source/Data/Roof/data/data12.b3dm, public/Source/Data/Roof/data/data13.b3dm, public/Source/Data/Roof/data/data14.b3dm, public/Source/Data/Roof/data/data15.b3dm, public/Source/Data/Roof/data/data16.b3dm, public/Source/Data/Roof/data/data17.b3dm, public/Source/Data/Roof/data/data18.b3dm, public/Source/Data/Roof/data/data19.b3dm, public/Source/Data/Roof/data/data20.b3dm, public/Source/Data/Roof/data/data21.b3dm, public/Source/Data/Roof/data/data22.b3dm, public/Source/Data/Roof/data/data23.b3dm, public/Source/Data/Roof/data/data24.b3dm, public/Source/Data/Roof/data/data25.b3dm, public/Source/Data/Roof/data/data26.b3dm, public/Source/Data/Roof/data/data27.b3dm, public/Source/Data/Roof/data/data28.b3dm, public/Source/Data/Roof/data/data29.b3dm, public/Source/Data/Roof/data/data30.b3dm, public/Source/Data/Roof/data/data31.b3dm, public/Source/Data/Roof/data/data32.b3dm, public/Source/Data/Roof/data/data33.b3dm, public/Source/Data/Roof/data/data34.b3dm, public/Source/Data/Roof/data/data35.b3dm, public/Source/Data/Roof/data/data36.b3dm, public/Source/Data/Roof/data/data37.b3dm, public/Source/Data/Roof/data/data38.b3dm, public/Source/Data/Roof/data/data39.b3dm, public/Source/Data/Roof/data/data40.b3dm, public/Source/Data/Roof/data/data41.b3dm, public/Source/Data/Roof/data/data42.b3dm, public/Source/Data/Roof/data/data43.b3dm, public/Source/Data/Roof/data/data44.b3dm, public/Source/Data/Roof/data/data45.b3dm, public/Source/Data/Roof/data/data46.b3dm, public/Source/Data/Roof/data/data47.b3dm, public/Source/Data/Roof/data/data48.b3dm, public/Source/Data/Roof/data/data49.b3dm, public/Source/Data/Roof/data/data50.b3dm, public/Source/Data/Roof/data/data51.b3dm, public/Source/Data/Roof/data/data52.b3dm, public/Source/Data/Roof/data/data53.b3dm, public/Source/Data/Roof/data/data54.b3dm, public/Source/Data/Roof/data/data55.b3dm, public/Source/Data/Roof/data/data56.b3dm, public/Source/Data/Roof/data/data59.b3dm, public/Source/Data/Roof/data/data57.b3dm, public/Source/Data/Roof/data/data58.b3dm, public/Source/Data/Roof/data/data60.b3dm, public/Source/Data/Roof/data/data61.b3dm, public/Source/Data/Roof/data/data63.b3dm, public/Source/Data/Roof/data/data62.b3dm, public/Source/Data/Roof/data/data64.b3dm, public/Source/Data/Roof/data/data65.b3dm, public/Source/Data/Roof/data/data66.b3dm, public/Source/Data/Roof/data/data67.b3dm, public/Source/Data/Roof/data/data68.b3dm, public/Source/Data/Roof/data/data69.b3dm, public/Source/Data/Roof/data/data70.b3dm, public/Source/Data/Roof/data/data71.b3dm, public/Source/Data/Roof/data/data72.b3dm, public/Source/Data/Roof/data/data73.b3dm, public/Source/Data/Roof/data/data74.b3dm, public/Source/Data/Roof/data/data75.b3dm, public/Source/Data/Roof/data/data76.b3dm, public/Source/Data/Roof/data/data77.b3dm, public/Source/Data/Roof/data/data78.b3dm, public/Source/Data/Roof/data/data80.b3dm, public/Source/Data/Roof/data/data79.b3dm, public/Source/Data/Roof/data/data81.b3dm, public/Source/Data/Roof/data/data82.b3dm, public/Source/Data/Roof/data/data83.b3dm, public/Source/Data/Roof/data/data84.b3dm, public/Source/Data/Roof/data/data85.b3dm, public/Source/Data/Roof/data/data86.b3dm, public/Source/Data/Roof/data/data88.b3dm, public/Source/Data/Roof/data/data87.b3dm, public/Source/Data/Roof/data/data89.b3dm, public/Source/Data/Roof/data/data90.b3dm, public/Source/Data/Roof/data/data91.b3dm, public/Source/Data/Roof/data/data92.b3dm, public/Source/Data/Roof/data/data93.b3dm, public/Source/Data/Roof/data/data94.b3dm, public/Source/Data/Roof/data/data95.b3dm, public/Source/Data/Roof/data/data96.b3dm, public/Source/Data/Roof/data/data97.b3dm, public/Source/Data/Roof/data/data98.b3dm, public/Source/Data/Roof/data/data99.b3dm, public/Source/Data/Roof/data/data100.b3dm, public/Source/Data/Roof/data/data101.b3dm, public/Source/Data/Roof/data/data102.b3dm, public/Source/Data/Roof/data/data103.b3dm, public/Source/Data/Roof/data/data104.b3dm, public/Source/Data/Roof/data/data105.b3dm, public/Source/Data/Roof/data/data106.b3dm, public/Source/Data/Roof/data/data107.b3dm, public/Source/Data/Roof/data/data108.b3dm, public/Source/Data/Roof/data/data109.b3dm, public/Source/Data/Roof/data/data110.b3dm, public/Source/Data/Roof/data/data111.b3dm, public/Source/Data/Roof/data/data112.b3dm, public/Source/Data/Roof/data/data113.b3dm, public/Source/Data/Roof/data/data114.b3dm, public/Source/Data/Roof/data/data115.b3dm, public/Source/Data/Roof/data/data116.b3dm, public/Source/Data/Roof/data/data117.b3dm, public/Source/Data/Roof/data/data118.b3dm, public/Source/Data/Roof/data/data119.b3dm, public/Source/Data/Roof/data/data120.b3dm, public/Source/Data/Roof/data/data121.b3dm, public/Source/Data/Roof/data/data122.b3dm, public/Source/Data/Roof/data/data123.b3dm, public/Source/Data/Roof/data/data124.b3dm, public/Source/Data/Roof/data/data125.b3dm, public/Source/Data/Roof/data/data126.b3dm, public/Source/Data/Roof/data/data127.b3dm, public/Source/Data/Roof/data/data128.b3dm files

index.css

+.backdrop {
+    display: inline-block;
+    background: rgba(42, 42, 42, 0.7);
+    border-radius: 5px;
+    border: 1px solid #444;
+    padding: 5px 10px;
+    color: #fff;
+    line-height: 150%;
+    font-size: small;
+}
+
+#heightSliderLabel, #heightValue {
+    vertical-align: top;
+}
+
+.backdrop a:link, .backdrop a:visited, .backdrop a:hover {
+    color: #fff
+}
+
+.loadingIndicator {
+    display: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -33px;
+    margin-left: -33px;
+    width: 66px;
+    height: 66px;
+    background: url(Source/Images/ajax-loader.gif) center no-repeat;
+}
+
+.cover {
+    display: none;
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.75);
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+#menu {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+}
+
+.nowrap {
+    white-space: nowrap;
+}
+
+html, body, #cesiumContainer {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    font-family: sans-serif;
+    background: #000;
+}
+
+button.cesium-infoBox-camera {
+    display: none;
+}
+
+#3DTiles {
+    padding-top: 10px;
+}
\ No newline at end of file

index.html

+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <!-- Use correct character set. -->
+        <meta charset="utf-8">
+        <!-- Tell IE to use the latest, best version. -->
+        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+        <!-- Make the app on mobile take up the full browser screen and disable user scaling. -->
+        <meta name="viewport"
+            content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+        <title>Gerlingen 3D Viewer</title>
+        <!-- The Cesium library. -->
+        <script src="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Cesium.js"></script>
+        <link href="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
+        <!-- stylesheets -->
+        <link rel="stylesheet" href="index.css" media="screen">
+		<link rel="stylesheet" type="text/css" href="./CSS/Gerlingen.css">
+	</head>
+    <body>
+        <!-- defining container to keep cesium viewer -->
+        <div id="cesiumContainer"></div>
+        <!-- defining menu panel -->
+        <div class="backdrop" id="menu">
+            <h2>Gerlingen 3D Viewer</h2>
+            <span><strong>Show</strong></span>
+            <div class="nowrap">
+                <input id="3dbuildings" name="source" type="radio" checked/>
+                <label for="3dbuildings">3D Buildings</label>
+            </div>
+            <div class="nowrap">
+                <input id="heatdemand" name="source" type="radio"/>
+                <label for="heatdemand">Avg. Sp. Heating Demand</label>
+            </div>
+			<div class="nowrap">
+                <input id="pvpotential" name="source" type="radio"/>
+                <label for="pvpotential">Avg. Photovoltaic Potenial</label>
+            </div>
+            <br>
+				 
+			<!-- for legend panel -->
+			<div id=heatdemandlegend>
+				<hr color='white'>
+				<div class='my-legend' id="legendcontainer">
+					<div class='legend-title'>Avg. Sp. Heating Demand (kWh/(m².a))</div>
+					<div class='legend-scale'>
+						<ul class='legend-labels'>
+							<li><span style='background:#61B949;'></span>Less than 25</li>
+							<li><span style='background:#A4C711;'></span>25 to 50</li>
+							<li><span style='background:#B2D531;'></span>50 to 75</li>
+							<li><span style='background:#D1E023;'></span>75 to 100</li>
+							<li><span style='background:#F6EC00;'></span>100 to 125</li>
+							<li><span style='background:#FECE02;'></span>125 to 150</li>
+							<li><span style='background:#F9A717;'></span>150 to 200</li>
+							<li><span style='background:#F56D1F;'></span>200 to 250</li>
+							<li><span style='background:#F22E22;'></span>More than 250</li>
+							<li><span style='background:#FFFFFF;'></span>None Heated / No Data</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+			<div id=pvpotentialLegend>
+				<hr color='white'>
+				<div class='my-legend' id="legendcontainer">
+					<div class='legend-title'>Avg. Photovoltaic Potenial (MWh/a)</div>
+					<div class='legend-scale'>
+						<ul class='legend-labels'>
+							<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>
+							<li><span style='background:#ffffff;'></span>No Data</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+		</div>
+		<a href="https://www.hft-stuttgart.de/" target='_blank'>
+        <div class="credit"></div>
+        </a>
+		<!-- javascript -->
+        <script src="./Source/App.js"></script>
+    </body>
+</html>

public/CSS/Gerlingen.css

+
+
+/*
+html,
+body,
+*/
+
+#Navbar {
+    overflow: hidden;
+}
+
+html,
+body,
+#cesiumContainer {
+    top: 0px;
+    left: 0px;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    z-index: -1;
+}
+
+/*for chart*/
+
+
+#chart {
+    padding: 5px 10px;
+    color: #fff;
+    font: 1em "Fira Sans", sans-serif;
+    display: block;
+}
+
+#chartcontainer {
+	width: 481px;
+    right: 5px;
+    top: 382px;
+    background: rgba(0, 0, 0, 0.65);
+    border-radius: 10px;
+    border: 1px solid #444;
+    padding: 5px 10px;
+    color: #fff;
+    font: 1em "Fira Sans", sans-serif;
+    position: absolute;
+    display: block;
+    visibility: hidden;
+    box-shadow: 0 0 10px 1px #000;
+}
+
+table {
+    display: table;
+    border-collapse: separate;
+    border-spacing: 1px;
+    border-color: grey;
+}
+
+.apexcharts-tooltip {
+    background: #C0C0C0 !important;
+    color: black;
+}
+
+
+/*for chart*/
+
+#legend {
+    position: relative;
+    left: 5px;
+    top: 5px;
+}
+
+.backdrop {
+    display: inline-block;
+    background: rgba(42, 42, 42, 0.7);
+    border-radius: 5px;
+    border: 1px solid #444;
+    color: #fff;
+    line-height: 150%;
+    font-size: small;
+	box-shadow: 0 0 10px 1px #000;
+}
+
+button.cesium-infoBox-camera {
+    display: none;
+}
+
+.cesium-infoBox {
+
+    width: 80%;
+    height: auto;
+    right: 5px;
+    background: rgba(0, 0, 0, 0.65);
+    border-radius: 10px;
+    border: 1px solid #444;
+    padding: 5px 10px;
+    color: #fff;
+    font: 1em "Fira Sans", sans-serif;
+    float: right;
+	visibility: hidden;
+}
+
+.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%;
+}
+
+.my-legend .legend-scale ul {
+    margin: 0;
+    margin-bottom: 5px;
+    padding: 0;
+    float: left;
+    list-style: none;
+}
+
+.my-legend .legend-scale ul li {
+    list-style: none;
+    margin-left: 0;
+    line-height: 18px;
+    margin-bottom: 2px;
+}
+
+.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;
+}
+
+.my-legend a {
+    color: #777;
+}
+
+.credit {
+   
+	width: 100px;
+	height: 100px;
+	overflow: hidden;
+    position: fixed;
+    z-index: 99999;
+    background: url(Images/hft.jpg) no-repeat;
+    background-size: 100px;
+    bottom: 70px;
+    left: 10px;
+	box-shadow: 0 0 10px 1px #000;
+    /*    left: 5px;*/
+}
+

public/Source/App.js

+     Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiNWFjZDJiMy1hYzk3LTQ2YWUtYWVjYi01MDk1OGVlZGI0NTgiLCJpZCI6MTEwNzEsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NTgwMjE1Mjh9.lF6TGAJrX3qMGBt5egdAA7SJYNnaYX17mhURwGg_Kbg';
+
+    //////////////////////////////////////////////////////////////////////////
+    // Creating the Viewer
+    //////////////////////////////////////////////////////////////////////////
+
+     var viewer = new Cesium.Viewer('cesiumContainer', {
+         scene3DOnly: true,
+         selectionIndicator: false,
+		 timeline: false,
+		 animation: false,
+		 shadow: false,
+		 // // Set default basemap
+            imageryProvider : Cesium.ArcGisMapServerImageryProvider({url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'}),
+		 baseLayerPicker: true
+		 
+     });
+     viewer.clock.shouldAnimate = false;
+	 viewer.scene.globe.enableLighting = false;
+     viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2019-09-20T16:00:00Z");
+     viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2019-09-20T16:20:00Z");
+     viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2019-09-20T16:00:00Z");
+	 document.getElementById("heatdemandlegend").style.display = "none"; //defining legends hidden by default
+	 document.getElementById("pvpotentialLegend").style.display = "none"; //defining legends hidden by default
+	 
+    //////////////////////////////////////////////////////////////////////////
+    // Configuring the camera
+    //////////////////////////////////////////////////////////////////////////
+    // // Create an initial camera view
+     var initialPosition = Cesium.Cartesian3.fromDegrees(9.116678, 48.822745, 2000);
+     var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(235, -23, 360);
+     var homeCameraView = {
+         destination : initialPosition,
+         orientation : {
+            heading : initialOrientation.heading,
+            pitch : initialOrientation.pitch,
+            roll : initialOrientation.roll
+         }
+      };
+    // // Set the initial view
+     viewer.scene.camera.setView(homeCameraView);
+		// set home button to initial view 
+	 
+	 viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
+        e.cancel = true;
+         viewer.scene.camera.flyTo(homeCameraView);
+     });
+	 viewer.camera.changed.addEventListener(function() {
+
+  var deg = Math.round( Cesium.Math.toDegrees(viewer.camera.heading))
+  console.log('Heading:', deg)
+
+  var deg = Math.round( Cesium.Math.toDegrees(viewer.camera.pitch))
+  console.log('Pitch:', deg)
+  
+  var deg = Math.round( Cesium.Math.toDegrees(viewer.camera.roll))
+  console.log('Roll:', deg)
+});
+    //////////////////////////////////////////////////////////////////////////
+    // Load 3D Tileset
+    //////////////////////////////////////////////////////////////////////////
+    var gerlingenbldgsld = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: './Source/Data/Bldg/tileset.json'}));
+	var gerlingenroof = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: './Source/Data/Roof/tileset.json'}));
+	gerlingenroof.readyPromise.then(function(tileset) {
+                 height = 0.02;
+                 viewer.scene.primitives.add(tileset);
+                 var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
+                 var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
+                 var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
+                 var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
+                 tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
+					console.log(error);
+             });
+			gerlingenbldgsld.show=true;
+			gerlingenroof.show =false;
+
+
+    //////////////////////////////////////////////////////////////////////////
+    // Style 3D Tileset
+    //////////////////////////////////////////////////////////////////////////
+	
+	var defaultstyle = new Cesium.Cesium3DTileStyle({
+         color : "color('WHITE')",
+		  show: true
+     });
+	 
+	 var pvpotentialstyle = new Cesium.Cesium3DTileStyle({
+         color : {
+            conditions : [
+					["(${AvgPV} === 0)", "color('#FFFFFF')"],
+					["(${AvgPV} > 0)  && (${AvgPV} < 5)", "color('#fc4f00')"],
+					["(${AvgPV} >= 5)  && (${AvgPV} < 10)", "color('#f27600')"],
+                    ["(${AvgPV} >= 10) && (${AvgPV} < 15)", "color('#e29700')"],
+                    ["(${AvgPV} >= 15) && (${AvgPV} < 20)", "color('#cab500')"],
+                    ["(${AvgPV} >= 20) && (${AvgPV} < 25)", "color('#aad000')"],
+					["(${AvgPV} >= 25) && (${AvgPV} < 30)", "color('#7de800')"],
+                    ["(${AvgPV} >= 30)", "color('#00ff00')"]
+			 ]
+         },
+		 show: true
+     });
+	 
+	 var colorstyle1 = document.getElementById('3dbuildings');	 
+	 var colorstyle2 = document.getElementById('heatdemand');
+	 var colorstyle3 = document.getElementById('pvpotential');
+     function set3DColorStyle() {
+        if (colorstyle1.checked) {
+			gerlingenbldgsld.show=true;
+			gerlingenroof.show =false;
+			viewer.dataSources.removeAll();
+             gerlingenbldgsld.style = defaultstyle;
+			 document.getElementById("heatdemandlegend").style.display = "none";
+			 document.getElementById("pvpotentialLegend").style.display = "none";
+			  } 
+		else if (colorstyle2.checked) {
+			gerlingenbldgsld.show=true;
+			gerlingenroof.show =false;
+			var promise = Cesium.GeoJsonDataSource.load(
+    './Source/Data/Gerlingen_Grid5050_heat.json'
+  );
+		promise
+    .then(function (dataSource1) {
+      viewer.dataSources.add(dataSource1);
+
+      //Get the array of entities
+      var entities = dataSource1.entities.values;
+
+      var colorHash = {};
+      for (var i = 0; i < entities.length; i++) {
+        //For each entity, create a random color based on the state name.
+        //Some states have multiple entities, so we store the color in a
+        //hash so that we use the same color for the entire state.
+        var entity = entities[i];
+        var name = entity.name;
+        var color = colorHash[name];
+		var grdcode = entity.properties.Avg_Sp_Ht;
+        if (!color) { if (grdcode == 0) {
+                        color = Cesium.Color.fromCssColorString('#FFFFFF8C');
+                        } 
+						else if (grdcode < 25) {
+                        color = Cesium.Color.fromCssColorString('#61B9498C');
+                        }
+						else if (grdcode < 50) {
+                        color = Cesium.Color.fromCssColorString('#A4C7118C');
+                        }
+						else if (grdcode < 75) {
+                        color = Cesium.Color.fromCssColorString('#B2D5318C');
+                        }
+						else if (grdcode < 100) {
+                        color = Cesium.Color.fromCssColorString('#D1E0238C');
+                        }else if (grdcode < 125) {
+                        color = Cesium.Color.fromCssColorString('#F6EC008C');
+                        }else if (grdcode < 150) {
+                        color = Cesium.Color.fromCssColorString('#FECE028C');
+                        }else if (grdcode < 200) {
+                        color = Cesium.Color.fromCssColorString('#F9A7178C');
+                        }else if (grdcode < 250) {
+                        color = Cesium.Color.fromCssColorString('#F56D1F8C');
+                        }
+					
+					else {
+                        color = Cesium.Color.fromCssColorString('#F22E228C');
+                        }
+        }
+
+        //Set the polygon material to our random color.
+        entity.polygon.material = color;
+        //Remove the outlines.
+        entity.polygon.outline = true;
+
+        //Extrude the polygon based on the state's population.  Each entity
+        //stores the properties for the GeoJSON feature it was created from
+        //Since the population is a huge number, we divide by 50.
+        entity.polygon.extrudedHeight =
+         grdcode ;
+      }
+    })
+	 
+    
+			 document.getElementById("heatdemandlegend").style.display = "block";
+			 document.getElementById("pvpotentialLegend").style.display = "none";
+		}
+		else if (colorstyle3.checked) {
+			gerlingenbldgsld.show=true;
+			gerlingenroof.show =true;
+			viewer.dataSources.removeAll();
+			gerlingenbldgsld.style = defaultstyle;
+             gerlingenroof.style = pvpotentialstyle;
+			 document.getElementById("heatdemandlegend").style.display = "none";
+			 document.getElementById("pvpotentialLegend").style.display = "block";
+		      }
+        }
+	 
+	 colorstyle1.addEventListener('change', set3DColorStyle);
+     colorstyle2.addEventListener('change', set3DColorStyle);
+	 colorstyle3.addEventListener('change', set3DColorStyle);
+	
\ No newline at end of file