Added Stoekack energy dashboard example

public/StoekackEnergyDashboard/CSS/EnergyDashboard.css

+/*
+html,
+body,
+*/
+
+#Navbar {
+    overflow: hidden;
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+}
+
+.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    height: 100vh;
+	background-color: #ffffff;
+}
+
+.cesium-container {
+    grid-column: 1;
+    background: #000;
+}
+
+.chart-container {
+    max-width: 800px;
+    margin: 20px auto;
+    background-color: #ffffff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+	display: flex;
+    justify-content: center;
+    align-items: center;
+}
+	
+#myChart2 {
+    max-width: 400px;
+    max-height: 400px;
+    width: 100%;
+    height: 100%;
+}
+
+.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;
+}
+
+#legend {
+    position: relative;
+    left: 5px;
+    top: 5px;
+}
+
+.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: 40px;
+    left: 10px;
+    box-shadow: 0 0 10px 1px #000;
+}

public/StoekackEnergyDashboard/CSS/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;
+}

public/StoekackEnergyDashboard/Source/App.js

+     Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxYjBlYmYyNC1kNWRhLTRiNTUtOGNlYi02NGY1YWVhNjI2MjIiLCJpZCI6MTEwNzEsImlhdCI6MTYxOTcwNjI0M30.tlpaagcH93SjaHIn7eEVpanGSiH2yDylbGJZr2gsXnY';
+
+    //////////////////////////////////////////////////////////////////////////
+    // 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		 
+     }); 
+   
+    //////////////////////////////////////////////////////////////////////////
+    // Load 3D Tileset
+    //////////////////////////////////////////////////////////////////////////
+
+	var tileset = viewer.scene.primitives.add(
+	new Cesium.Cesium3DTileset({
+	 //url: Cesium.IonResource.fromAssetId(481524)
+	url: './Source/Data/3DTiles/tileset.json'	
+	})
+	);
+	viewer.zoomTo(tileset);
+
+    //////////////////////////////////////////////////////////////////////////
+    // Style 3D Tileset
+    //////////////////////////////////////////////////////////////////////////
+
+    var defaultstyle = new Cesium.Cesium3DTileStyle({
+         color : "color('WHITE')",
+		  show: true
+     });
+	 
+	var energydemandstyle = new Cesium.Cesium3DTileStyle({
+         color : {
+            conditions : [
+					
+					['Number(${Specific_s})>= 0' && 'Number(${Specific_s})< 60', 'color("#33ACFF")'],
+					['Number(${Specific_s})>= 60' && 'Number(${Specific_s})< 120', 'color("#2AFF00")'],
+					['Number(${Specific_s})>= 120' && 'Number(${Specific_s})< 170', 'color("#FFFF00")'],
+					['Number(${Specific_s})>= 170' && 'Number(${Specific_s})< 230', 'color("#FFA200")'],
+					['true', 'color("#FF0000")']
+					
+             ]
+         },
+		 show: true
+     });
+	 
+	var colorstyle1 = document.getElementById('3dbuildings');
+	var colorstyle2 = document.getElementById('heatdemand');
+	 
+    function set3DColorStyle() {
+		if (colorstyle1.checked) {tileset.style = defaultstyle;
+			document.getElementById("legend").style.display = "none";
+		      } 
+		else if (colorstyle2.checked) {tileset.style = energydemandstyle;
+			document.getElementById("legend").style.display = "block";
+				}
+        }
+	 
+	 colorstyle1.addEventListener('change', set3DColorStyle);
+     colorstyle2.addEventListener('change', set3DColorStyle);	
+	
+	//////////////////////////////////////////////////////////////////////////
+    // Selecting geometries in 3D Tileset
+    //////////////////////////////////////////////////////////////////////////
+	
+	//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 GREY 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);
+				if (!Cesium.defined(picked3DtileFeature)) {
+					
+					return;
+				}					
+				// 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.GREY;
+				}
+			}
+		}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+		// Color a feature AQUA on selection and show info 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
+				var featureName = "Building Attributes";
+				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>gml ID</th><td>' + picked3DtileFeature.getProperty('gml_id') + '</td></tr>' +
+					'<tr><th>gml parent ID</th><td>' + picked3DtileFeature.getProperty('gml_parent_id') + '</td></tr>' +
+					'<tr><th>Sp. Heating Demand</th><td>' + picked3DtileFeature.getProperty('Specific_s') + ' ' + 'kWh/m²·a' + '</td></tr>' +
+					'</tbody></table>';   
+		}
+		}, 
+		
+		Cesium.ScreenSpaceEventType.LEFT_CLICK);
+	}
+	active3DTilePicker();
+		
+	 // Chart.js code
+	 
+	 // Fetch GeoJSON data
+	   fetch('https://ugl.hft-stuttgart.de/leaflet-stoeckach-heatdemand/building_data.json')
+      .then(response => response.json())
+      .then(data => {
+        // Extract the "Year_of_co" and "BuildingTy" values
+     		
+		var buildingYoc = data.features.map(function(feature) {
+		return feature.properties.Year_of_co;
+		});
+
+		var buildingType = data.features.map(function(feature) {
+		return feature.properties.BuildingTy;
+		});
+
+		// Count the occurrences of each year of construction
+		var yocCounts = {};
+		buildingYoc.forEach(function(Year_of_co) {
+		if (yocCounts[Year_of_co]) {
+			yocCounts[Year_of_co]++;
+			} else {
+			yocCounts[Year_of_co] = 1;
+			}
+		});
+		
+		// Count the occurrences of each building type		
+		var bldgtypeCounts = {};
+		buildingType.forEach(function(BuildingTy) {
+		if (bldgtypeCounts[BuildingTy]) {
+			bldgtypeCounts[BuildingTy]++;
+			} else {
+			bldgtypeCounts[BuildingTy] = 1;
+			}
+		});
+
+		// Prepare the chart for year of construction and building type	data
+		var yocLabels = Object.keys(yocCounts);
+		var yocData = Object.values(yocCounts);
+		
+		var bldgTypeLabels = Object.keys(bldgtypeCounts);
+		var bldgTypeData = Object.values(bldgtypeCounts);
+
+		// Create the building year of construction distribution chart using Chart.js
+		var ctx1 = document.getElementById('myChart1').getContext('2d');
+		var yocChart = new Chart(ctx1, {
+			type: 'bar',
+			data: {
+			labels: yocLabels,
+			datasets: [{
+			label: 'No. of buildings',
+			data: yocData,
+			backgroundColor: 'rgba(75, 192, 192, 0.5)',
+			borderColor: 'rgba(75, 192, 192, 1)',
+			borderWidth: 1
+			}]
+			},
+			options: {
+				responsive: true,
+				plugins: {
+				legend: {
+				position: 'bottom',
+				},
+				title: {
+				display: true,
+				text: 'Building Distribution According to its Year of Construction'
+				}
+				},
+				scales: {
+				y: {
+				beginAtZero: true,
+				stepSize: 15
+				}
+				}
+			}
+		});
+
+
+		// Create the building type distribution chart using Chart.js
+		var ctx2 = document.getElementById('myChart2').getContext('2d');
+		var bldgTypeChart = new Chart(ctx2, {
+			type: 'doughnut',
+            data: {
+            labels: bldgTypeLabels,
+            datasets: [{
+            data: bldgTypeData,
+            backgroundColor: [
+                                'rgba(255, 99, 132, 0.8)',
+                                'rgba(54, 162, 235, 0.8)',
+                                'rgba(255, 206, 86, 0.8)',
+                                'rgba(75, 192, 192, 0.8)',
+                                'rgba(153, 102, 255, 0.8)',
+                                'rgba(255, 159, 64, 0.8)',
+                            ],
+                        }]
+                },
+            options: {
+				responsive: true,
+				plugins: {
+				legend: {
+				position: 'bottom',
+				},
+				title: {
+					display: true,
+					text: 'Building Distribution According Building Type'
+					}
+					},
+				}
+                });
+            })
\ No newline at end of file

public/StoekackEnergyDashboard/Source/AppSkeleton.js

+(function () {
+    "use strict";
+
+    // TODO: Add your ion access token from cesium.com/ion/
+    // Cesium.Ion.defaultAccessToken = '<YOUR ACCESS TOKEN HERE>';
+
+    //////////////////////////////////////////////////////////////////////////
+    // Creating the Viewer
+    //////////////////////////////////////////////////////////////////////////
+
+    // var viewer = new Cesium.Viewer('cesiumContainer', {
+    //     scene3DOnly: true,
+    //     selectionIndicator: false,
+    //     baseLayerPicker: false
+    // });
+
+    //////////////////////////////////////////////////////////////////////////
+    // Loading Imagery
+    //////////////////////////////////////////////////////////////////////////
+
+    // // Remove default base layer
+    // viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
+
+    // // Add Sentinel-2 imagery
+    // viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({ assetId: 3954 }));
+
+    //////////////////////////////////////////////////////////////////////////
+    // Loading Terrain
+    //////////////////////////////////////////////////////////////////////////
+
+    // // Load Cesium World Terrain
+    // viewer.terrainProvider = Cesium.createWorldTerrain({
+    //     requestWaterMask : true, // required for water effects
+    //     requestVertexNormals : true // required for terrain lighting
+    // });
+    // // Enable depth testing so things behind the terrain disappear.
+    // viewer.scene.globe.depthTestAgainstTerrain = true;
+
+    //////////////////////////////////////////////////////////////////////////
+    // Configuring the Scene
+    //////////////////////////////////////////////////////////////////////////
+
+    // // Enable lighting based on sun/moon positions
+    // viewer.scene.globe.enableLighting = true;
+
+    // // Create an initial camera view
+    // var initialPosition = new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.082799425431);
+    // var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
+    // var homeCameraView = {
+    //     destination : initialPosition,
+    //     orientation : {
+    //         heading : initialOrientation.heading,
+    //         pitch : initialOrientation.pitch,
+    //         roll : initialOrientation.roll
+    //     }
+    // };
+    // // Set the initial view
+    // viewer.scene.camera.setView(homeCameraView);
+
+    // // Add some camera flight animation options
+    // homeCameraView.duration = 2.0;
+    // homeCameraView.maximumHeight = 2000;
+    // homeCameraView.pitchAdjustHeight = 2000;
+    // homeCameraView.endTransform = Cesium.Matrix4.IDENTITY;
+    // // Override the default home button
+    // viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
+    //     e.cancel = true;
+    //     viewer.scene.camera.flyTo(homeCameraView);
+    // });
+
+    // // Set up clock and timeline.
+    // viewer.clock.shouldAnimate = true; // default
+    // viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
+    // viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:20:00Z");
+    // viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
+    // viewer.clock.multiplier = 2; // sets a speedup
+    // viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // tick computation mode
+    // viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // loop at the end
+    // viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); // set visible range
+
+    //////////////////////////////////////////////////////////////////////////
+    // Loading and Styling Entity Data
+    //////////////////////////////////////////////////////////////////////////
+
+    // var kmlOptions = {
+    //     camera : viewer.scene.camera,
+    //     canvas : viewer.scene.canvas,
+    //     clampToGround : true
+    // };
+    // // Load geocache points of interest from a KML file
+    // // Data from : http://catalog.opendata.city/dataset/pediacities-nyc-neighborhoods/resource/91778048-3c58-449c-a3f9-365ed203e914
+    // var geocachePromise = Cesium.KmlDataSource.load('./Source/SampleData/sampleGeocacheLocations.kml', kmlOptions);
+
+    // // Add geocache billboard entities to scene and style them
+    // geocachePromise.then(function(dataSource) {
+    //     // Add the new data as entities to the viewer
+    //     viewer.dataSources.add(dataSource);
+
+    //     // Get the array of entities
+    //     var geocacheEntities = dataSource.entities.values;
+
+    //     for (var i = 0; i < geocacheEntities.length; i++) {
+    //         var entity = geocacheEntities[i];
+    //         if (Cesium.defined(entity.billboard)) {
+    //             // Adjust the vertical origin so pins sit on terrain
+    //             entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
+    //             // Disable the labels to reduce clutter
+    //             entity.label = undefined;
+    //             // Add distance display condition
+    //             entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
+    //             // Compute latitude and longitude in degrees
+    //             var cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));
+    //             var latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
+    //             var longitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
+    //             // Modify description
+    //             var description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +
+    //                 '<tr><th>' + "Longitude" + '</th><td>' + longitude.toFixed(5) + '</td></tr>' +
+    //                 '<tr><th>' + "Latitude" + '</th><td>' + latitude.toFixed(5) + '</td></tr>' +
+    //                 '</tbody></table>';
+    //             entity.description = description;
+    //         }
+    //     }
+    // });
+
+    // var geojsonOptions = {
+    //     clampToGround : true
+    // };
+    // // Load neighborhood boundaries from a GeoJson file
+    // // Data from : https://data.cityofnewyork.us/City-Government/Neighborhood-Tabulation-Areas/cpf4-rkhq
+    // var neighborhoodsPromise = Cesium.GeoJsonDataSource.load('./Source/SampleData/sampleNeighborhoods.geojson', geojsonOptions);
+
+    // // Save an new entity collection of neighborhood data
+    // var neighborhoods;
+    // neighborhoodsPromise.then(function(dataSource) {
+    //     // Add the new data as entities to the viewer
+    //     viewer.dataSources.add(dataSource);
+    //     neighborhoods = dataSource.entities;
+
+    //     // Get the array of entities
+    //     var neighborhoodEntities = dataSource.entities.values;
+    //     for (var i = 0; i < neighborhoodEntities.length; i++) {
+    //         var entity = neighborhoodEntities[i];
+
+    //         if (Cesium.defined(entity.polygon)) {
+    //             // Use kml neighborhood value as entity name
+    //             entity.name = entity.properties.neighborhood;
+    //             // Set the polygon material to a random, translucent color
+    //             entity.polygon.material = Cesium.Color.fromRandom({
+    //                 red : 0.1,
+    //                 maximumGreen : 0.5,
+    //                 minimumBlue : 0.5,
+    //                 alpha : 0.6
+    //             });
+    //             // Tells the polygon to color the terrain. ClassificationType.CESIUM_3D_TILE will color the 3D tileset, and ClassificationType.BOTH will color both the 3d tiles and terrain (BOTH is the default)
+    //             entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;
+    //             // Generate Polygon center
+    //             var polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
+    //             var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
+    //             polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
+    //             entity.position = polyCenter;
+    //             // Generate labels
+    //             entity.label = {
+    //                 text : entity.name,
+    //                 showBackground : true,
+    //                 scale : 0.6,
+    //                 horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
+    //                 verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
+    //                 distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 8000.0),
+    //                 disableDepthTestDistance : 100.0
+    //             };
+    //         }
+    //     }
+    // });
+
+    // // Load a drone flight path from a CZML file
+    // var dronePromise = Cesium.CzmlDataSource.load('./Source/SampleData/SampleFlight.czml');
+
+    // // Save a new drone model entity
+    // var drone;
+    // dronePromise.then(function(dataSource) {
+    //     viewer.dataSources.add(dataSource);
+    //     // Get the entity using the id defined in the CZML data
+    //     drone = dataSource.entities.getById('Aircraft/Aircraft1');
+    //     // Attach a 3D model
+    //     drone.model = {
+    //         uri : './Source/SampleData/Models/CesiumDrone.gltf',
+    //         minimumPixelSize : 128,
+    //         maximumScale : 1000,
+    //         silhouetteColor : Cesium.Color.WHITE,
+    //         silhouetteSize : 2
+    //     };
+    //     // Add computed orientation based on sampled positions
+    //     drone.orientation = new Cesium.VelocityOrientationProperty(drone.position);
+
+    //     // Smooth path interpolation
+    //     drone.position.setInterpolationOptions({
+    //         interpolationAlgorithm : Cesium.HermitePolynomialApproximation,
+    //         interpolationDegree : 2
+    //     });
+    //     drone.viewFrom = new Cesium.Cartesian3(-30, 0, 0);
+    // });
+
+    //////////////////////////////////////////////////////////////////////////
+    // Load 3D Tileset
+    //////////////////////////////////////////////////////////////////////////
+
+    // // Load the NYC buildings tileset
+    // var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) }));
+
+    // // Adjust the tileset height so it's not floating above terrain
+    // var heightOffset = -32;
+    // city.readyPromise.then(function(tileset) {
+    //     // Position tileset
+    //     var boundingSphere = tileset.boundingSphere;
+    //     var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
+    //     var surfacePosition = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
+    //     var offsetPosition = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
+    //     var translation = Cesium.Cartesian3.subtract(offsetPosition, surfacePosition, new Cesium.Cartesian3());
+    //     tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
+    // });
+
+    //////////////////////////////////////////////////////////////////////////
+    // Style 3D Tileset
+    //////////////////////////////////////////////////////////////////////////
+
+    // // Define a white, opaque building style
+    // var defaultStyle = new Cesium.Cesium3DTileStyle({
+    //     color : "color('white')",
+    //     show : true
+    // });
+
+    // // Set the tileset style to default
+    // city.style = defaultStyle;
+
+    // // Define a white, transparent building style
+    // var transparentStyle = new Cesium.Cesium3DTileStyle({
+    //     color : "color('white', 0.3)",
+    //     show : true
+    // });
+
+    // // Define a style in which buildings are colored by height
+    // var heightStyle = new Cesium.Cesium3DTileStyle({
+    //     color : {
+    //         conditions : [
+    //             ["${height} >= 300", "rgba(45, 0, 75, 0.5)"],
+    //             ["${height} >= 200", "rgb(102, 71, 151)"],
+    //             ["${height} >= 100", "rgb(170, 162, 204)"],
+    //             ["${height} >= 50", "rgb(224, 226, 238)"],
+    //             ["${height} >= 25", "rgb(252, 230, 200)"],
+    //             ["${height} >= 10", "rgb(248, 176, 87)"],
+    //             ["${height} >= 5", "rgb(198, 106, 11)"],
+    //             ["true", "rgb(127, 59, 8)"]
+    //         ]
+    //     }
+    // });
+
+    // var tileStyle = document.getElementById('tileStyle');
+    // function set3DTileStyle() {
+    //     var selectedStyle = tileStyle.options[tileStyle.selectedIndex].value;
+    //     if (selectedStyle === 'none') {
+    //         city.style = defaultStyle;
+    //     } else if (selectedStyle === 'height') {
+    //         city.style = heightStyle;
+    //     } else if (selectedStyle === 'transparent') {
+    //         city.style = transparentStyle;
+    //     }
+    // }
+    // tileStyle.addEventListener('change', set3DTileStyle);
+
+    //////////////////////////////////////////////////////////////////////////
+    // Custom mouse interaction for highlighting and selecting
+    //////////////////////////////////////////////////////////////////////////
+
+    // // If the mouse is over a point of interest, change the entity billboard scale and color
+    // var previousPickedEntity;
+    // var handler = viewer.screenSpaceEventHandler;
+    // handler.setInputAction(function (movement) {
+    //     var pickedPrimitive = viewer.scene.pick(movement.endPosition);
+    //     var pickedEntity = Cesium.defined(pickedPrimitive) ? pickedPrimitive.id : undefined;
+    //     // Unhighlight the previously picked entity
+    //     if (Cesium.defined(previousPickedEntity)) {
+    //         previousPickedEntity.billboard.scale = 1.0;
+    //         previousPickedEntity.billboard.color = Cesium.Color.WHITE;
+    //     }
+    //     // Highlight the currently picked entity
+    //     if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.billboard)) {
+    //         pickedEntity.billboard.scale = 2.0;
+    //         pickedEntity.billboard.color = Cesium.Color.ORANGERED;
+    //         previousPickedEntity = pickedEntity;
+    //     }
+    // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+    //////////////////////////////////////////////////////////////////////////
+    // Setup Camera Modes
+    //////////////////////////////////////////////////////////////////////////
+
+    // var freeModeElement = document.getElementById('freeMode');
+    // var droneModeElement = document.getElementById('droneMode');
+
+    // // Create a follow camera by tracking the drone entity
+    // function setViewMode() {
+    //     if (droneModeElement.checked) {
+    //         viewer.trackedEntity = drone;
+    //     } else {
+    //         viewer.trackedEntity = undefined;
+    //         viewer.scene.camera.flyTo(homeCameraView);
+    //     }
+    // }
+
+    // freeModeElement.addEventListener('change', setViewMode);
+    // droneModeElement.addEventListener('change', setViewMode);
+
+    // viewer.trackedEntityChanged.addEventListener(function() {
+    //     if (viewer.trackedEntity === drone) {
+    //         freeModeElement.checked = false;
+    //         droneModeElement.checked = true;
+    //     }
+    // });
+
+    //////////////////////////////////////////////////////////////////////////
+    // Setup Display Options
+    //////////////////////////////////////////////////////////////////////////
+
+    // var shadowsElement = document.getElementById('shadows');
+    // var neighborhoodsElement =  document.getElementById('neighborhoods');
+
+    // shadowsElement.addEventListener('change', function (e) {
+    //     viewer.shadows = e.target.checked;
+    // });
+
+    // neighborhoodsElement.addEventListener('change', function (e) {
+    //     neighborhoods.show = e.target.checked;
+    // });
+
+    // // Finally, wait for the initial city to be ready before removing the loading indicator.
+    // var loadingIndicator = document.getElementById('loadingIndicator');
+    // loadingIndicator.style.display = 'block';
+    // city.readyPromise.then(function () {
+    //     loadingIndicator.style.display = 'none';
+    // });
+
+}());