diff --git a/public/App.js b/public/App.js
new file mode 100644
index 0000000000000000000000000000000000000000..5788b4ad27835d5910f466d0f176c47b8ba35eee
--- /dev/null
+++ b/public/App.js
@@ -0,0 +1,396 @@
+ 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_Street_Map/MapServer"
+ }),
+ baseLayerPicker: true
+
+ });
+ viewer.clock.shouldAnimate = false;
+ viewer.scene.globe.enableLighting = false;
+ viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2019-09-20T13:00:00Z");
+ viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2019-09-20T13:20:00Z");
+ viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2019-09-20T13:00:00Z");
+ document.getElementById("legend").style.display = "none"; //defining legends hidden by default
+
+ //////////////////////////////////////////////////////////////////////////
+ // Configuring the camera
+ //////////////////////////////////////////////////////////////////////////
+var initialPosition = Cesium.Cartesian3.fromDegrees(16.368084, 48.183257, 360);
+ var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(249, -17, 0);
+ 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 building = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: 'https://w2.iaf.hft-stuttgart.de/CesiumData/3DTiles/Buildings/BuildingSolid/Meidling_Vienna/tileset.json'}));
+ var outdoorbuildinginstallation = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: 'https://w2.iaf.hft-stuttgart.de/CesiumData/3DTiles/Buildings/BuildingInstallation/Meidling_Vienna/tileset.json'}));
+ var roofsurface = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: 'https://w2.iaf.hft-stuttgart.de/CesiumData/3DTiles/Buildings/RoofSurface/Mediling_Vienna/tileset.json'}));
+ var roofdefaultstyle = new Cesium.Cesium3DTileStyle({color : "color('#ff5500')"});
+ roofsurface.style = roofdefaultstyle;
+ // set roof height and load roof tile
+ roofsurface.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);
+ });
+ roofsurface.show =true;
+ var landuse = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: 'https://w2.iaf.hft-stuttgart.de/CesiumData/3DTiles/LandUse/Meidling_Vienna/tileset.json'}));
+
+
+ building.show = true;
+ outdoorbuildinginstallation.show = true;
+ landuse.show = false;
+
+
+ function showbuildings() {
+ if (document.getElementById('buildings').checked) {building.show = true; outdoorbuildinginstallation.show = true;
+ roofsurface.show = false;
+ }
+ else {building.show = false; outdoorbuildinginstallation.show = false;
+ roofsurface.show = false;}
+ }
+
+ // Style landuse Tileset
+
+ var landusestyle = new Cesium.Cesium3DTileStyle({
+ color : {
+ conditions : [
+ ['Number(${LE_CODE}) === 1000', "color('#FFFF00')"],
+ ['Number(${LE_CODE}) === 2000', "color('#8B6914')"],
+ ['Number(${LE_CODE}) === 3000', "color('#808080')"],
+ ['Number(${LE_CODE}) === 4000', "color('#008000')"],
+ ['Number(${LE_CODE}) === 5000', "color('#00FFFF')"],
+ ]
+ },
+ show: true
+ });
+
+ function showlanduse() {
+ if (document.getElementById('landuse').checked) {
+ landuse.show = true;
+ landuse.style = landusestyle;
+ document.getElementById("legend").style.display = "block";
+ }
+ else {
+ landuse.show = false;
+ document.getElementById("legend").style.display = "none";
+ }
+ }
+
+ //////////////////////////////////////////////////////////////////////////
+ // Style 3D Tileset
+ //////////////////////////////////////////////////////////////////////////
+
+ var buildingdefaultstyle = new Cesium.Cesium3DTileStyle({
+ color : "color('WHITE')",
+ show: true
+ });
+
+ var heatenergydemandstyle = new Cesium.Cesium3DTileStyle({
+ color : {
+ conditions : [
+ [' Number(${nrg_epc_primaryEnergyDemandValue_s1}) >= 225', "color('red')"],
+ [' Number(${nrg_epc_primaryEnergyDemandValue_s1}) >= 125', "mix(color('yellow'), color('red'), (Number(${nrg_epc_primaryEnergyDemandValue_s1}) -125) / 125)"],
+ [' Number(${nrg_epc_primaryEnergyDemandValue_s1}) >= 1', "mix(color('green'), color('yellow'), (Number(${nrg_epc_primaryEnergyDemandValue_s1}) ) / 125)"],
+ [' Number(${nrg_epc_primaryEnergyDemandValue_s1}) < 1', 'rgb(0, 0, 0)'],
+ ['true', 'rgb(0, 0, 0)']
+ ]
+
+ },
+ show: true
+ });
+
+ var heatdemandstyle = document.getElementById('heatdemand');
+ function showheatdemand() {
+ if (document.getElementById('pvpotential').checked) {
+ alert("At a time only one analysis selection is possible. Please uncheck the current analysis selection first and then re-select this option.");
+ return false;
+}
+else
+
+ {
+ if (document.getElementById('buildings').checked) {
+ if (heatdemandstyle.checked) {
+ outdoorbuildinginstallation.show = false;
+ roofsurface.show = false;
+ building.style = heatenergydemandstyle;
+ document.getElementById("heat-demand-legend").style.display = "block";
+ }
+ else {
+ outdoorbuildinginstallation.show = true;
+ roofsurface.show = true;
+ building.style = buildingdefaultstyle;
+ roofsurface.style = roofdefaultstyle;
+ document.getElementById("heat-demand-legend").style.display = "none";
+ }
+ }
+ else {
+ alert("Please select the buildings layer under 3D city model first, and then re-select this option.");
+ return false;
+}
+ }
+ }
+
+ var roofPVstyle = new Cesium.Cesium3DTileStyle({
+ color : {
+ conditions : [
+ [' Number(${PV_yield}) >= 10', "color('green')"],
+ [' Number(${PV_yield}) >= 5', "mix(color('yellow'), color('green'), (Number(${PV_yield}) -5) /5)"],
+ [' Number(${PV_yield}) >= 1', "mix(color('red'), color('yellow'), (Number(${PV_yield}) ) /5)"],
+ [' Number(${PV_yield}) < 1', "color('red')"],
+ ['true', 'rgb(0, 0, 0)']
+ ]
+
+ },
+ show: true
+ });
+
+ var pvpotentialstyle = document.getElementById('pvpotential');
+ function showpvpotential(){
+ if (document.getElementById('heatdemand').checked) {
+ alert("At a time only one analysis selection is possible. Please uncheck the current analysis selection first and then re-select this option.");
+ return false;
+}
+else {
+ if (document.getElementById('buildings').checked) {
+ if (pvpotentialstyle.checked) {
+ outdoorbuildinginstallation.show = false;
+ roofsurface.show = true;
+ roofsurface.style = roofPVstyle;
+ document.getElementById("pv-potential-legend").style.display = "block";
+ }
+ else {
+ outdoorbuildinginstallation.show = true;
+ roofsurface.show = true;
+ roofsurface.style = roofdefaultstyle;
+ document.getElementById("pv-potential-legend").style.display = "none";
+ }
+ }
+ else {
+ alert("Please select the buildings layer under 3D city model first, and then re-select this option.");
+ return false;
+}
+ }
+ }
+
+
+ //////////////////////////////////////////////////////////////////////////
+ // Custom mouse interaction for highlighting and selecting
+ //////////////////////////////////////////////////////////////////////////
+
+
+//Selecting a Building
+var Pickers_3DTile_Activated = true;
+// Information about the currently highlighted feature
+function active3DTilePicker() {
+ var highlighted = {
+ feature: undefined,
+ originalColor: new Cesium.Color()
+ };
+ // Information about the currently selected feature
+ var selected = {
+ feature: undefined,
+ originalColor: new Cesium.Color()
+ };
+
+ // An entity object which will hold info about the currently selected feature for infobox display
+ var selectedEntity = new Cesium.Entity();
+
+ // Get default left click handler for when a feature is not picked on left click
+ var clickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+ // Color a feature yellow on hover.
+ viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
+ if (Pickers_3DTile_Activated) {
+ // If a feature was previously highlighted, undo the highlight
+ if (Cesium.defined(highlighted.feature)) {
+ highlighted.feature.color = highlighted.originalColor;
+ highlighted.feature = undefined;
+ }
+ // Pick a new feature
+ var picked3DtileFeature = viewer.scene.pick(movement.endPosition);
+
+ // Highlight the feature if it's not already selected.
+ if (picked3DtileFeature !== selected.feature) {
+ highlighted.feature = picked3DtileFeature;
+ Cesium.Color.clone(picked3DtileFeature.color, highlighted.originalColor);
+ picked3DtileFeature.color = Cesium.Color.AQUA;
+ }
+ }
+ }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+ // Color a feature on selection and show metadata in the InfoBox.
+ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
+
+ if (Pickers_3DTile_Activated) {
+ // If a feature was previously selected, undo the highlight
+ if (Cesium.defined(selected.feature)) {
+ selected.feature.color = selected.originalColor;
+ selected.feature = undefined;
+ var options = null;
+ }
+ // Pick a new feature
+ var picked3DtileFeature = viewer.scene.pick(movement.position);
+ if (!Cesium.defined(picked3DtileFeature)) {
+ clickHandler(movement);
+ return;
+ }
+ // Select the feature if it's not already selected
+ if (selected.feature === picked3DtileFeature) {
+ return;
+ }
+ selected.feature = picked3DtileFeature;
+ // Save the selected feature's original color
+ if (picked3DtileFeature === highlighted.feature) {
+ Cesium.Color.clone(highlighted.originalColor, selected.originalColor);
+ highlighted.feature = undefined;
+ } else {
+ Cesium.Color.clone(picked3DtileFeature.color, selected.originalColor);
+ }
+ // Highlight newly selected feature
+ picked3DtileFeature.color = Cesium.Color.AQUA;
+ // Set feature infobox description - if condition is for different info box for different entities such as building solids, roofs, landuse etc
+
+ if (picked3DtileFeature.getProperty('SemanticType') === "Building") {
+
+
+ var featureName = "Meidling 3D Viewer - Building";
+ selectedEntity.name = featureName;
+ selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
+
+ viewer.selectedEntity = selectedEntity;
+ selectedEntity.description =
+ '<table class="cesium-infoBox-defaultTable"><tbody>' +
+ '<tr><th>Building ID</th><td>' + picked3DtileFeature.getProperty('gml_id') + '</td></tr>' +
+ '<tr><th>Building Class Code</th><td>' + picked3DtileFeature.getProperty('citygml_class') + '</td></tr>' +
+ '<tr><th>Building Type</th><td>' + picked3DtileFeature.getProperty('buildingType') + '</td></tr>' +
+ '<tr><th>Year of Construction</th><td>' + picked3DtileFeature.getProperty('citygml_year_of_construction') + '</td></tr>' +
+ '<tr><th>Roof Type</th><td>' + picked3DtileFeature.getProperty('citygml_roof_type') + '</td></tr>' +
+ '<tr><th>Building Storeys Above Ground</th><td>' + picked3DtileFeature.getProperty('citygml_storeys_above_ground') + '</td></tr>' +
+ '<tr><th>Building Storeys Below Ground</th><td>' + picked3DtileFeature.getProperty('citygml_storeys_below_ground') + '</td></tr>' +
+ '<tr><th>Total Residents</th><td>' + picked3DtileFeature.getProperty('num_residents') + '</td></tr>' +
+ '<tr><th>Building Height</th><td>' + picked3DtileFeature.getProperty('citygml_measured_height') + ' ' + 'm' + '</td></tr>' +
+ '<tr><th>Footprint Area </th><td>' + picked3DtileFeature.getProperty('footprintArea') + ' ' + 'm²' + '</td></tr>' +
+ '<tr><th>Building Volume</th><td>' + picked3DtileFeature.getProperty('lod2Volume') + ' ' + 'm³' + '</td></tr>' +
+ '<tr><th>Specific Space Heating Demand</th><td>' + picked3DtileFeature.getProperty('nrg_epc_primaryEnergyDemandValue_s1') + ' ' + 'kWh/m²*yr' + '</td></tr>' +
+ '<tr><th>Domestic Hot Water Demand</th><td>' + picked3DtileFeature.getProperty('nrg_dhwDemandYear') + ' ' + 'kWh*yr' + '</td></tr>' +
+ '<tr><th>Electricity Domestic Hot Water Demand</th><td>' + picked3DtileFeature.getProperty('nrg_electricityDemandYear') + ' ' + 'kWh*yr' + '</td></tr>' +
+ '</tbody></table>';
+
+ console.log(picked3DtileFeature.getProperty('SemanticType'));}
+
+
+ else if (picked3DtileFeature.getProperty('SemanticType') === "RoofSurface") {
+
+
+ var featureName = "Meidling 3D Viewer - Roof Surface";
+ selectedEntity.name = featureName;
+ selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
+
+ viewer.selectedEntity = selectedEntity;
+ selectedEntity.description =
+ '<table class="cesium-infoBox-defaultTable"><tbody>' +
+ '<tr><th>Building ID</th><td>' + picked3DtileFeature.getProperty('gml_id') + '</td></tr>' +
+ '<tr><th>Building Parent ID</th><td>' + picked3DtileFeature.getProperty('gml_parent_id') + '</td></tr>' +
+ '<tr><th>Roof Type</th><td>' + picked3DtileFeature.getProperty('citygml_roof_type') + '</td></tr>' +
+ '<tr><th>Roof Area </th><td>' + picked3DtileFeature.getProperty('roofArea') + ' ' + 'm²' + '</td></tr>' +
+ '<tr><th>Photovoltaic Potential</th><td>' + picked3DtileFeature.getProperty('PV_yield') + ' ' + 'MWh/yr' + '</td></tr>' +
+ '</tbody></table>';
+
+ console.log(picked3DtileFeature.getProperty('SemanticType'));}
+
+ else if (picked3DtileFeature.getProperty('SemanticType') === "LandUse") {
+
+
+ var featureName = "Meidling 3D Viewer - LandUse";
+ selectedEntity.name = featureName;
+ selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
+
+ viewer.selectedEntity = selectedEntity;
+ selectedEntity.description =
+ '<table class="cesium-infoBox-defaultTable"><tbody>' +
+ '<tr><th>LandUse ID</th><td>' + picked3DtileFeature.getProperty('gml_id') + '</td></tr>' +
+ '<tr><th>LandUse Class</th><td>' + picked3DtileFeature.getProperty('NUTZUNG_LE') + '</td></tr>' +
+ '<tr><th>LandUse Function</th><td>' + picked3DtileFeature.getProperty('NUTZUNG_L0') + '</td></tr>' +
+ '<tr><th>LandUse Usage</th><td>' + picked3DtileFeature.getProperty('NUTZUNG_L1') + '</td></tr>' +
+ '<tr><th>LandUse Area </th><td>' + picked3DtileFeature.getProperty('Shape_Area') + ' ' + 'm²' + '</td></tr>' +
+ '</tbody></table>';
+
+ console.log(picked3DtileFeature.getProperty('SemanticType'));}
+
+
+ else
+ {
+ var featureName = "Meidling 3D Viewer - Building Installation";
+ selectedEntity.name = featureName;
+ selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
+
+ viewer.selectedEntity = selectedEntity;
+ selectedEntity.description =
+ '<table class="cesium-infoBox-defaultTable"><tbody>' +
+ '<tr><th>Building ID</th><td>' + picked3DtileFeature.getProperty('gml_id') + '</td></tr>' +
+ '<tr><th>Building Parent ID</th><td>' + picked3DtileFeature.getProperty('gml_parent_id') + '</td></tr>' +
+ '<tr><th>Installation Area </th><td>' + picked3DtileFeature.getProperty('area') + ' ' + 'm²' + '</td></tr>' +
+ '</tbody></table>';
+
+ console.log(picked3DtileFeature.getProperty('SemanticType'));}
+
+ var arrow = document.getElementById('arrow');
+ var arrowPosition = 10 + ((Number(picked3DtileFeature.getProperty('nrg_epc_primaryEnergyDemandValue_s1')) / 250) * 465);
+ if (Number(picked3DtileFeature.getProperty('nrg_epc_primaryEnergyDemandValue_s1')) >= 250) {
+ arrowPosition = 465;
+ }
+ console.log("Width: " + arrow.style.width);
+ arrow.style.left = arrowPosition + "px";
+ console.log("position left: : " + 10 + ((Number(picked3DtileFeature.getProperty('nrg_epc_primaryEnergyDemandValue_s1')) / 250) * 100) * 465 + "px");
+ arrow.style.visibility = 'visible';
+ }
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+}
+
+active3DTilePicker();
+
diff --git a/public/CSS/Images/hft.jpg b/public/CSS/Images/hft.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..00262fedc74fc53ad6eeac8f6e75ee2802769dc7
Binary files /dev/null and b/public/CSS/Images/hft.jpg differ
diff --git a/public/CSS/index.css b/public/CSS/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..a3ac2ff58597b85a61236647522c468a19f194d1
--- /dev/null
+++ b/public/CSS/index.css
@@ -0,0 +1,68 @@
+.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
diff --git a/public/CSS/meidling.css b/public/CSS/meidling.css
new file mode 100644
index 0000000000000000000000000000000000000000..0b05d2a2f4e94a25df35b6ee4a4e608ed009e8c7
--- /dev/null
+++ b/public/CSS/meidling.css
@@ -0,0 +1,247 @@
+
+
+/*
+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;
+}
+
+#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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.pv-potential-legend-container {
+ background: rgba(42, 42, 42, 0.9);
+ padding: 8px;
+ border-radius: 4px;
+ text-align: center;
+}
+
+#pv-potential-legend-title {
+ margin: 0px;
+ padding-bottom: 10px;
+}
+
+.pv-potential-Bar {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ width: 100%;
+ height: 30px;
+ background: linear-gradient(to right, #ff0000 0%, #ffff00 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;
+}
+
+.line {
+ font-size: 145%;
+}
+
+.values {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ width: 100%;
+ height: 25px;
+ color: #edffff;
+ font-size: 14px;
+ font-weight: bold;
+}
+
+
+
+
+
+
+.heat-demand-legend-container {
+ background: rgba(42, 42, 42, 0.9);
+ padding: 8px;
+ border-radius: 4px;
+ text-align: center;
+}
+
+#heat-demand-legend-title {
+ margin: 0px;
+ padding-bottom: 10px;
+}
+
+.Heat-Demand-Bar {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ width: 100%;
+ height: 30px;
+ background: linear-gradient(to right, #00ff00 0%, #ffff00 50%, #ff0000 100%);
+ color: #000;
+ font-size: 14px;
+ font-weight: bold;
+ opacity: 1;
+}
+#top {
+ border-top-left-radius: 20px;
+ border-top-right-radius: 20px;
+ border-bottom-right-radius: 0px;
+ border-bottom-left-radius: 0px;
+}
+
+#bottom {
+ border-top-left-radius: 0px;
+ border-top-right-radius: 0px;
+ border-bottom-right-radius: 20px;
+ border-bottom-left-radius: 20px;
+ font-size: 145%;
+}
+
+#arrow-slider {
+ display: block;
+ width: 100%;
+ height: 25px;
+}
+
+#arrow {
+ position: absolute;
+ top: 66%;
+ left: 0px;
+ visibility: hidden;
+ color: #000;
+ font-size: 35px;
+ font-weight: bold;
+}
+
+.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;*/
+}
+
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..ad9745d09b3161c9e408a90f5fc9307e2225f011
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,138 @@
+<!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>Meidling 3D Viewer</title>
+ <!-- The Cesium library. -->
+ <script src="https://cesiumjs.org/releases/1.57/Build/Cesium/Cesium.js"></script>
+ <link href="https://cesiumjs.org/releases/1.57/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
+ <!-- stylesheets -->
+ <link rel="stylesheet" href="./CSS/index.css" media="screen">
+ <link rel="stylesheet" type="text/css" href="./CSS/meidling.css">
+ <!-- external scripts -->
+ </head>
+ <body>
+ <!-- defining container to keep cesium viewer -->
+ <div id="cesiumContainer"></div>
+ <!-- defining menu panel -->
+ <div class="backdrop" id="menu">
+ <h2>Meidling 3D Viewer</h2>
+ <span><strong>3D City Model</strong></span>
+ <div class="nowrap">
+ <input id="buildings" type="checkbox" checked onclick="showbuildings()" />
+ <label for="buildings">Buildings</label>
+ <input id="landuse" type="checkbox" onclick="showlanduse()" />
+ <label for="landuse">LandUse</label>
+ </div>
+ <br>
+ <span><strong>Analysis</strong></span>
+ <div class="nowrap">
+ <input id="heatdemand" type="checkbox" onclick="return showheatdemand()" />
+ <label for="heatdemand">Specific Space Heating Demand</label>
+ <br>
+ <input id="pvpotential" type="checkbox" onclick="return showpvpotential()" />
+ <label for="pvpotential">Rooftop Photovoltaic Potential</label>
+ </div>
+ <br>
+
+ <!-- for legend panel -->
+ <div id=legend>
+ <hr color='white'>
+ <div class='my-legend' id="legendcontainer">
+ <div class='legend-title'>LandUse Classification</div>
+ <div class='legend-scale'>
+ <ul class='legend-labels'>
+ <li><span style='background:#FFFF00;'></span>Settlmemt Area</li>
+ <li><span style='background:#8B6914;'></span>Open Plot</li>
+ <li><span style='background:#808080;'></span>Road</li>
+ <li><span style='background:#008000;'></span>Vegetation</li>
+ <li><span style='background:#00FFFF;'></span>Water Body</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- defining container to keep cesium viewer -->
+ <div id="chartcontainer" style="visibility: hidden;"> <div class='legend-title'>Select a Building</div><button type="button" class="cesium-infoBox-close" onclick="closeChart()">×</button>
+ <div id="chart"></div>
+ </div>
+ <a href="https://www.hft-stuttgart.de/" target='_blank'>
+ <div class="credit"></div>
+ </a>
+
+
+
+
+ <div class="legends" id="pv-potential-legend">
+ <div class="pv-potential-legend-container">
+ <h3 id="pv-potential-legend-title">
+ Rooftop Photovoltaic Potential [MWh/yr]
+ </h3>
+ <div class= "pv-potential-Bar" id="bottom-round"/>
+ </div>
+ <div class="values">
+ <div class="value">0</div>
+ <div class="value">2</div>
+ <div class="value">4</div>
+ <div class="value">6</div>
+ <div class="value">8</div>
+ <div class="value">>10</div>
+ </div>
+ </div>
+ </div>
+
+ <div class="legends" id="heat-demand-legend">
+ <div class="heat-demand-legend-container">
+ <h3 id="heat-demand-legend-title">
+ Specific Space Heating Demand [kWh/(m²*yr)]
+ </h3>
+ <div class= "Heat-Demand-Bar" id ="top">
+ <div class="classes" >A+</div>
+ <div class="line" >|</div>
+ <div class="classes" >A</div>
+ <div class="line" >|</div>
+ <div class="classes" >B</div>
+ <div class="line" >|</div>
+ <div class="classes" >C</div>
+ <div class="line" >|</div>
+ <div class="classes" >D</div>
+ <div class="line" >|</div>
+ <div class="classes" >E</div>
+ <div class="line" >|</div>
+ <div class="classes" >F</div>
+ <div class="line" >|</div>
+ <div class="classes" >G</div>
+ <div class="line" >|</div>
+ <div class="classes" >H</div>
+ </div>
+ <div class="values">
+ <div class="value">0</div>
+ <div class="value">25</div>
+ <div class="value">50</div>
+ <div class="value">75</div>
+ <div class="value">100</div>
+ <div class="value">125</div>
+ <div class="value">150</div>
+ <div class="value">175</div>
+ <div class="value">200</div>
+ <div class="value">>225</div>
+ </div>
+ <div class= "Heat-Demand-Bar" id="bottom"/>
+ <div id="arrow-slider">
+ <div id="arrow">⇑</div>
+ </div>
+ </div>
+ </div>
+
+
+ <!-- javascript -->
+ <script src="./App.js"></script>
+
+ </body>
+</html>