From 78844bc80f201173d80e30dca702ff782aae1314 Mon Sep 17 00:00:00 2001
From: Sven Schneider <sven.schneider@hft-stuttgart.de>
Date: Thu, 16 Dec 2021 12:46:03 +0100
Subject: [PATCH] added fellbach data sets and adjusted menu

---
 public/HFT.js           |  52 +++++-
 public/Testgebiete.html | 159 +++++++++++++++++
 public/Testgebiete.js   | 378 ++++++++++++++++++++++++++++++++++++++++
 public/css/index.css    |  32 +++-
 4 files changed, 617 insertions(+), 4 deletions(-)
 create mode 100644 public/Testgebiete.html
 create mode 100644 public/Testgebiete.js

diff --git a/public/HFT.js b/public/HFT.js
index 01ed0b5..93331ca 100644
--- a/public/HFT.js
+++ b/public/HFT.js
@@ -18,7 +18,9 @@ var viewer = new Cesium.Viewer("cesiumContainer", {
 
 
 // set home button extend
-var extent = Cesium.Rectangle.fromDegrees(9.162794728779428, 48.78605872069245, 9.181827683763427, 48.77616123564855);
+// this is the HFT 
+// var extent = Cesium.Rectangle.fromDegrees(9.162794728779428, 48.78605872069245, 9.181827683763427, 48.77616123564855);
+var extent = Cesium.Rectangle.fromDegrees(9.29859441939518, 48.814434070664696, 9.30346531111649, 48.813176496066895);
 Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
 Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;
 
@@ -88,6 +90,10 @@ var zoomAll = function (tileset) {
 	}
 	load3DTiles()
 
+
+
+	
+
 	//////// important value. to find the correct value trail and error is needed for a perfect fit
 	const BUILDIG_TILESET_HEIGHT_OFFSET = 54;
 	
@@ -114,7 +120,7 @@ var zoomAll = function (tileset) {
 		// now shift / translate the tileset by the translation vector defined above
 		tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
 
-		return zoomAll(tileset); // zoom or rather go to the translated tileset
+		// return zoomAll(tileset); // zoom or rather go to the translated tileset
 	});
 
 	tileset.show = false;
@@ -156,7 +162,7 @@ hftLargePC.readyPromise.then(function (hftLargePC) {
 	// now shift / translate the tileset by the translation vector defined above
 	hftLargePC.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
 
-	return zoomAll(hftLargePC); // zoom or rather go to the translated tileset
+	// return zoomAll(hftLargePC); // zoom or rather go to the translated tileset
 });
 
 hftLargePC.style = new Cesium.Cesium3DTileStyle({
@@ -229,4 +235,44 @@ var togglePrettyBuildingTiles = function () {
 }
 
 
+////////////////////////////////////////////////////
+	// Fellbach building tiles
+	fellbachBuildings = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
+		url: "buildingTiles/fellbachTiles/tileset.json",
+		show: true,
+	}));
+
+	fellbachBuildings.readyPromise.then(function (fellbachBuildings) {
+		var height = 51;
+		var cartographic = Cesium.Cartographic.fromCartesian(
+			fellbachBuildings.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()
+		);
+		// now shift / translate the tileset by the translation vector defined above
+		fellbachBuildings.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
+		return zoomAll(fellbachBuildings);
+
+		
+	});
 
+	// var fellbachBuildings = viewer.scene.primitives.add(
+	// 	new Cesium.Cesium3DTileset({
+	// 	//   url: Cesium.IonResource.fromAssetId(679236),  // in wgs84 srs
+	// 	  url: Cesium.IonResource.fromAssetId(679239),   // in erts89Z32 srs
+	// 	})
+	//   );
+	  
diff --git a/public/Testgebiete.html b/public/Testgebiete.html
new file mode 100644
index 0000000..9159dcc
--- /dev/null
+++ b/public/Testgebiete.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Pointcloud Demo at HFT</title>
+
+    <link
+      href="https://cesium.com/downloads/cesiumjs/releases/1.69/Build/Cesium/Widgets/widgets.css"
+      rel="stylesheet"
+    />
+        
+
+    <script
+      src="https://code.jquery.com/jquery-2.2.4.min.js"
+      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"
+      integrity="sha256-1A78rJEdiWTzco6qdn3igTBv9VupN3Q1ozZNTR4WE/Y="
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"
+      integrity="sha256-0rguYS0qgS6L4qVzANq4kjxPLtvnp5nn2nB5G1lWRv4="
+      crossorigin="anonymous"
+    ></script>
+    <script src="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Cesium.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.1.1/css/all.css"
+      integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ"
+      crossorigin="anonymous"
+    />
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+
+    <link rel="stylesheet" href="css/index.css" media="screen">
+    <link rel="stylesheet" href="css/form_joeStyle.css" media="screen">
+    <link rel="stylesheet" href="css/roundedButton.css" media="screen">
+    
+   
+   
+
+
+
+</head>
+
+  <body>
+    
+   
+    <style>
+      @import url(templates/bucket.css);
+    </style>
+
+
+
+    <div id="cesiumContainer" class="">   </div>
+    <script src="Testgebiete.js"></script>
+
+  <div class="backdrop mainbackdrop" id="DCMO" style="display:show">    
+    
+    
+    <button style="margin: 5px 0px 5px 0px;" type="button" class="btn btn-danger btnMod" onclick="gotoHFT()">HFT</button>
+    
+    <div class="backdrop mainbackdrop"> 
+      <h6 style="color: rgb(8, 228, 118);"> Pointclouds </h6>
+    <table>
+      <tbody>
+        <tr>
+          <td style=" padding-bottom: 10px;"><strong>RGB PointCloud</strong> </td>
+          <td style=" padding-bottom: 10px; padding-left: 15px;"><label class="switch">
+            <input type="checkbox" onclick="toggleRGBPC()" checked>
+            <span class="slider round"></span>
+          </label>
+        </td>
+        </tr>
+        <tr>
+          <td style=" padding-bottom: 10px;"><strong>Blue PointCloud</strong> </td>
+          <td style=" padding-bottom: 10px; padding-left: 15px;"><label class="switch">
+            <input type="checkbox" onclick="toggleLargePC()" checked>
+            <span class="slider round"></span>
+          </label>
+        </td>
+        </tr>
+      </tbody>
+    </table>  
+  </div>
+
+    <div class="backdrop mainbackdrop">   
+      <h6 style="color: rgb(8, 228, 118);"> CityGML Buildings </h6>
+      <table>  
+        <tbody>       
+        <tr>
+          <td style=" padding-bottom: 10px;"><strong>LOD1 Buildings </strong> </td>
+          <td style=" padding-bottom: 10px; padding-left: 15px;"><label class="switch">
+            <input id="simpleBuildingsCheckbox" type="checkbox" onclick="toggleBuildingTiles()" unchecked>
+            <span class="slider round"></span>
+          </label>
+        </td>
+        </tr>
+      </tr>
+      <tr>
+        <td style=" padding-bottom: 10px;"><strong>LOD3 Buildings </strong> </td>
+        <td style=" padding-bottom: 10px; padding-left: 15px;"><label class="switch">
+          <input id="prettyBuildingsCheckbox" type="checkbox" onclick="togglePrettyBuildingTiles()" checked>
+          <span class="slider round"></span>
+        </label>
+      </td>
+      </tr>
+     </tbody>
+    </table>  
+         
+      </div>
+
+      <button style="margin: 20px 0px 5px 0px;" type="button" class="btn btn-warning btnMod" onclick="gotoFellbach()">Fellbach</button>
+    
+        
+      <div class="backdrop mainbackdrop">   
+        <h6 style="color: rgb(8, 228, 118);">CityGML Buildings </h6>
+        <table>  
+          <tbody>     
+         <tr>
+          <td style=" padding-bottom: 10px;"><strong>LOD2 Buildings </strong> </td>
+          <td style=" padding-bottom: 10px; padding-left: 15px;"><label class="switch">
+            <input id="FellbachBuildingsCheckbox" type="checkbox" onclick="toggleFellbachTiles()" unchecked>
+            <span class="slider round"></span>
+          </label>
+        </td>        
+        </tr>
+        <tr>
+          <td style=" padding-bottom: 10px;"><strong>LOD2 Textured </strong> </td>
+          <td style=" padding-bottom: 10px; padding-left: 15px;"><label class="switch">
+            <input id="FellbachTexturedBuildingsCheckbox" type="checkbox" onclick="toggleFellbachTexturedTiles()" checked>
+            <span class="slider round"></span>
+          </label>
+        </td>        
+        </tr>
+       </tbody>
+      </table>  
+           
+        </div>
+
+
+
+</div>
+            
+      
+    
+    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> -->
+    <!-- JavaScript Bundle with Popper -->
+
+   
+    <!-- CSS only -->
+
+  </body>
+</html>
diff --git a/public/Testgebiete.js b/public/Testgebiete.js
new file mode 100644
index 0000000..232b364
--- /dev/null
+++ b/public/Testgebiete.js
@@ -0,0 +1,378 @@
+
+// specifiy credentials and assets from Cesium ION account
+Cesium.Ion.defaultAccessToken =
+	"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiYjY5ZTAxNy03YTc0LTQyZTYtYjJlMC0xYzYwNTAzNDQ0ZjUiLCJpZCI6MjkwNCwiaWF0IjoxNjM1NDEzOTI0fQ.Xhmt0sD4Dda4Q46FBYew4wPbqlJ4T8U9n1nNNwGyH7o";
+
+// setting up Cesium Viewer
+var viewer = new Cesium.Viewer("cesiumContainer", {
+	imageryProvider: new Cesium.IonImageryProvider({ assetId: 3 }), //3 bing maps with labels // use Sentinel2 imagery as default assetID:3954
+	/////////////////////////////////////////
+	// Note the next 3 lines specify that the Cesium Terrain should be used. ION account is needed
+	// For a 'flat' Earth the z-offsets below for each of the tilesets needs to be adjusted
+	// comment the next 3 lines to remove the Cesium terrain (Resulution approx. 30m)
+	/////////////////////////////////////////
+	terrainProvider: new Cesium.CesiumTerrainProvider({
+		url: Cesium.IonResource.fromAssetId(1),
+	}),
+});
+
+
+// set home button extend
+// this is the HFT 
+// var extent = Cesium.Rectangle.fromDegrees(9.162794728779428, 48.78605872069245, 9.181827683763427, 48.77616123564855);
+var extent = Cesium.Rectangle.fromDegrees(9.29859441939518, 48.814434070664696, 9.30346531111649, 48.813176496066895);
+Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
+Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;
+
+viewer.scene.globe.enableLighting = true; // set lighting to true
+
+// load 3d Tile set of HFT from Cesium ION.
+var tileset = viewer.scene.primitives.add(
+	new Cesium.Cesium3DTileset({
+		url: Cesium.IonResource.fromAssetId(656401),
+	})
+);
+
+// define a function to zoom to the tileset (invoke later)
+var zoomAll = function (tileset) {
+	return new Promise(function (resolve, reject) {
+		if (!tileset) {
+			reject("Tileset is undifined");
+		}
+		viewer.camera.viewBoundingSphere(
+			tileset.boundingSphere,
+			new Cesium.HeadingPitchRange(0, -0.5, 400)
+		);
+		viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
+		resolve();
+	});
+};
+
+
+
+
+	
+	var load3DTiles = function () {
+		tilesetLOD1 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
+			url: "https://steinbeis-3dps.eu/3DGeoVolumes/collections/Stuttgart/HFTBuildings_3DModel_noTexture/3dtiles/tileset.json", //Cesium.IonResource.fromAssetId(656401),
+		}));
+	
+		
+	
+		Cesium.when(tilesetLOD1.readyPromise).then(function (tilesetLOD1) {
+			viewer.flyTo(tilesetLOD1)
+			tilesetLOD1.style = new Cesium.Cesium3DTileStyle({
+				color: {
+					conditions: [
+						["${featureType} === 'Window'", "color('blue')"],
+						["${featureType} === 'WallSurface'", "color('gray')"],
+						["${featureType} === 'RoofSurface'", "color('red')"],
+						["${featureType} === 'OuterFloorSurface'", "color('white')"],
+						["true", "color('white')"],
+					],
+				},
+				show: true
+			});
+			// tilesetLOD1.style = new Cesium.Cesium3DTileStyle({
+			//     color: "color('BLACK', 0.3)",
+			//     show: true
+			// });
+	
+			var heightOffset = 50.0;
+			var boundingSphere = tilesetLOD1.boundingSphere;
+			var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
+			var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
+			var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
+			var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
+			tilesetLOD1.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
+		})
+	
+	}
+	load3DTiles()
+
+
+
+	
+
+	//////// important value. to find the correct value trail and error is needed for a perfect fit
+	const BUILDIG_TILESET_HEIGHT_OFFSET = 54;
+	
+	tileset.readyPromise.then(function (tileset) {
+		var height = BUILDIG_TILESET_HEIGHT_OFFSET;
+		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()
+		);
+		// now shift / translate the tileset by the translation vector defined above
+		tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
+
+		// return zoomAll(tileset); // zoom or rather go to the translated tileset
+	});
+
+	tileset.show = false;
+
+
+////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////
+// HFT PointCloud Tileset.
+////////////////////////////////////////////////////////////////////////////////////
+
+const PCOFFSET = 0;
+
+var hftLargePC = viewer.scene.primitives.add(
+	new Cesium.Cesium3DTileset({
+		url: Cesium.IonResource.fromAssetId(655879),
+	})
+);
+
+hftLargePC.readyPromise.then(function (hftLargePC) {
+	var height = PCOFFSET;
+	var cartographic = Cesium.Cartographic.fromCartesian(
+		hftLargePC.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()
+	);
+	// now shift / translate the tileset by the translation vector defined above
+	hftLargePC.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
+
+	// return zoomAll(hftLargePC); // zoom or rather go to the translated tileset
+});
+
+hftLargePC.style = new Cesium.Cesium3DTileStyle({
+	color: "color('blue',0.3)",
+	// color: "color('red')" ,
+	pointSize: 3
+});
+
+
+
+
+///////////////////////////// innenhof PC
+
+var hftInnehofRGB_PC = viewer.scene.primitives.add(
+	new Cesium.Cesium3DTileset({
+		url: Cesium.IonResource.fromAssetId(656854),
+	})
+);
+
+hftInnehofRGB_PC.style = new Cesium.Cesium3DTileStyle({
+	// color: "color('blue',0.3)",	
+	// color: "color('red')" ,
+	pointSize: 3
+});
+
+
+
+////////////////////////// Control Pointclouds and Tileset with switches
+
+var toggleLargePC = function () {
+	if (hftLargePC.show === true) {
+		hftLargePC.show = false
+	}
+	else {
+		hftLargePC.show = true
+	}
+}
+// or use tenrary operator as for the other two 
+var toggleRGBPC = function () {
+	hftInnehofRGB_PC.show = hftInnehofRGB_PC.show ? false : true;
+}
+
+var toggleBuildingTiles = function () {
+	if (tileset.show === true) {
+		tileset.show = false
+	}
+	else {
+		tileset.show = true	
+		if (tilesetLOD1.show === true){
+			$('#prettyBuildingsCheckbox').prop('checked', false);
+			tilesetLOD1.show = false
+		}						
+	}
+}
+
+var toggleFellbachTiles = function () {
+	if (fellbachBuildings.show === true) {
+		fellbachBuildings.show = false
+	}
+	else {
+		fellbachBuildings.show = true;
+		if (fellbachBuildingsTextured.show === true){
+			$('#FellbachTexturedBuildingsCheckbox').prop('checked', false);
+			fellbachBuildingsTextured.show = false;
+		}							
+	}
+}
+
+
+var toggleFellbachTexturedTiles = function () {
+	if (fellbachBuildingsTextured.show === true) {
+		fellbachBuildingsTextured.show = false
+	}
+	else {
+		fellbachBuildingsTextured.show = true;	
+		if (fellbachBuildings.show === true){
+			$('#FellbachBuildingsCheckbox').prop('checked', false);
+			fellbachBuildings.show = false;
+		}					
+	}
+}
+
+var togglePrettyBuildingTiles = function () {
+	// tilesetLOD1.show = tilesetLOD1.show ? false : true;
+	if (tilesetLOD1.show === true) {
+		tilesetLOD1.show = false		
+	}
+	else {
+		tilesetLOD1.show = true				
+		if (tileset.show === true){
+			$('#simpleBuildingsCheckbox').prop('checked', false);
+			tileset.show = false
+		}
+	}
+	// $('#prettyBuildingsCheckbox').prop('checked', true); // Checks it
+//$('#myCheckbox').prop('checked', false); // Unchecks it
+}
+
+
+
+
+////////////////////////////////////////////////////
+	// Fellbach building tiles
+	fellbachBuildings = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
+		url: "https://3dps.gis.lrg.tum.de/geovolumes/collections/Fellbach/all_buildings_lod2/3dtiles/",
+		// url: "https://3dps.gis.lrg.tum.de/geovolumes/collections/Fellbach/all_buildings_lod2_textured/3dtiles/tileset.json?bbox=9.27193208236,48.8200709939,-10,9.2900117958,48.8164019664,500",
+		show: true,
+	}));
+
+	fellbachBuildings.readyPromise.then(function (fellbachBuildings) {
+		var height = 51;
+		var cartographic = Cesium.Cartographic.fromCartesian(
+			fellbachBuildings.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()
+		);
+		// now shift / translate the tileset by the translation vector defined above
+		fellbachBuildings.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
+		return zoomAll(fellbachBuildings);
+
+		
+	});
+
+
+	fellbachBuildings.show = false;
+	////////////////////////////////////////////////////
+	// Fellbach building tiles
+	fellbachBuildingsTextured = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({		
+		url: "https://3dps.gis.lrg.tum.de/geovolumes/collections/Fellbach/all_buildings_lod2_textured/3dtiles/tileset.json?bbox=9.27193208236,48.8200709939,-10,9.2900117958,48.8164019664,500",
+		show: true,
+	}));
+
+	fellbachBuildingsTextured.readyPromise.then(function (fellbachBuildingsTextured) {
+		var height = 51;
+		var cartographic = Cesium.Cartographic.fromCartesian(
+			fellbachBuildingsTextured.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()
+		);
+		// now shift / translate the tileset by the translation vector defined above
+		fellbachBuildingsTextured.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
+		return zoomAll(fellbachBuildingsTextured);
+
+		
+	});
+
+
+		  
+
+	var gotoFellbach = function () {
+
+		// var extent = Cesium.Rectangle.fromDegrees(9.26530042893943,48.818436808301705, 9.275552393133086,  48.81387520377022);
+		// Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
+		// Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;
+
+
+		viewer.camera.flyTo({
+			destination : Cesium.Cartesian3.fromDegrees(9.269968312784966, 48.815644351028965, 600.0),
+			orientation : {
+				heading : Cesium.Math.toRadians(-30.0),
+				pitch : Cesium.Math.toRadians(-45),
+				roll : 0
+			}
+		});
+		new Cesium.HeadingPitchRange(0, -0.5, 400)
+		
+		// viewer.camera.viewBoundingSphere(Cesium.Cartesian3.fromDegrees(9.26530042893943,48.818436808301705, 1500.0),		);
+		// viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
+
+		// viewer.canera.setView({
+		// 	destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
+		// });
+		// zoomAll(fellbachBuildings);
+		// viewer.scene.camera.lookAt(fellbachBuildings.position.getValue(viewer.clock.currentTime), new Cesium.Cartesian3(0,0,200));
+	}
+
+	var gotoHFT = function () {
+
+		var extent = Cesium.Rectangle.fromDegrees(9.29859441939518, 48.814434070664696, 9.30346531111649, 48.813176496066895);
+		Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
+		Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;
+
+		viewer.flyTo(tilesetLOD1);
+
+
+		
+	}
\ No newline at end of file
diff --git a/public/css/index.css b/public/css/index.css
index 36d2adf..cccb54c 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -5,7 +5,7 @@
     border: 1px solid #444;
     padding: 10px 10px;
     color: #fff;
-    width: 170px;
+    width: 210px;
     /* font: 1em "Fira Sans", sans-serif; */
 }
 
@@ -34,10 +34,40 @@ h3 {
 	font-family: 'Lato', sans-serif;
     color: rgb(179, 245, 209);
 }
+
+.h1c {
+	/* font-family: 'Lato', sans-serif; */
+	font-family: 0.75em 'Lato', sans-serif;																											
+	font-style: bold;
+    color: red;
+	background-color: rgba(42, 42, 42, 0);
+	text-shadow: 3px 3px #000000
+}
+.h2c {
+	font-family: 0.75em 'Lato', sans-serif;
+	font-weight: bold;
+    color: rgb(8, 228, 118);
+}
+.h3c {
+	/* font: 1em 'Lato', sans-serif;
+	font-style: bold; */
+	font-family: 'Lato', sans-serif;
+    color: rgb(179, 245, 209);
+}
+
 strong{
 	font-family: 'Lato', sans-serif;
 }
 
+
+.btnMod{
+	width: 100px;
+	height: 25px;
+	font-size: 1;
+	font-weight: bold;
+	padding: 0 0;
+}
+
 #heightSliderLabel, #heightValue {
     vertical-align: top;
 }
-- 
GitLab