viewer added

public/CSS/Montreal3DViewer.css

+#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;
+}
+table {
+    display: table;
+    border-collapse: separate;
+    border-spacing: 1px;
+    border-color: grey;
+}
+.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;
+}
+.credit1 { 
+   	width: 75px;
+	height: 75px;
+	overflow: hidden;
+    position: fixed;
+    z-index: 99999;
+    background: url(Images/hft.jpg) no-repeat;
+    background-size: 75px;
+    bottom: 0px;
+    left: 10px;
+	box-shadow: 0 0 10px 1px #000;    
+}
+.credit2 {
+   	width: 75px;
+	height: 75px;
+	overflow: hidden;
+    position: fixed;
+    z-index: 99999;
+    background: url(Images/CU.jpg) no-repeat;
+    background-size: 75px;
+    bottom: 80px;
+    left: 10px;
+	box-shadow: 0 0 10px 1px #000;
+} 
+.credit3 {   
+	width: 75px;
+	height: 75px;
+	overflow: hidden;
+    position: fixed;
+    z-index: 99999;
+    background: url(Images/stt.png) no-repeat;
+    background-size: 75px;
+    bottom: 0px;
+    left: 90px;
+	box-shadow: 0 0 10px 1px #000;
+}  
+.credit4 {   
+	width: 75px;
+	height: 75px;
+	overflow: hidden;
+    position: fixed;
+    z-index: 99999;
+    background: url(Images/email.jpg) no-repeat;
+    background-size: 75px;
+    bottom: 80px;
+    left: 90px;
+	box-shadow: 0 0 10px 1px #000;  
+}
+#spinner {
+   width: 287px;
+	height: 141px;
+	overflow: hidden;
+    position: fixed;
+    z-index: 99999;
+    background-color: white;    
+	top: 50%;
+	left: 50%;
+	margin-top: -50px;
+	margin-left: -100px;
+	box-shadow: 0 0 10px 1px #000;
+}
\ No newline at end of file

public/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;
+}
\ No newline at end of file

public/Source/App.js

+     Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxYjBlYmYyNC1kNWRhLTRiNTUtOGNlYi02NGY1YWVhNjI2MjIiLCJpZCI6MTEwNzEsImlhdCI6MTYxOTcwNjI0M30.tlpaagcH93SjaHIn7eEVpanGSiH2yDylbGJZr2gsXnY';
+     //////////////////////////////////////////////////////////////////////////
+     // Loading Montreal Terrain
+     //////////////////////////////////////////////////////////////////////////
+     var montrealterrain = new Cesium.CesiumTerrainProvider({
+         url: 'https://w2.iaf-ex.hft-stuttgart.de/CesiumData/QuantizedMesh/Montreal/',
+     });
+     var terrainProviderViewModels = [];
+     terrainProviderViewModels.push(new Cesium.ProviderViewModel({
+             name: 'Montreal Terrain',
+             iconUrl: Cesium.buildModuleUrl('https://w2.iaf-ex.hft-stuttgart.de/CesiumData/Images/TerrainProviders/MontrealTerrain.png'),
+             tooltip: 'Terrain of Montreal 5m x 5m',
+             creationFunction: function () {
+                 return montrealterrain;
+             }
+         }));
+     //////////////////////////////////////////////////////////////////////////
+     // Creating the Viewer
+     //////////////////////////////////////////////////////////////////////////
+     var viewer = new Cesium.Viewer('cesiumContainer', {
+         scene3DOnly: true,
+         selectionIndicator: false,
+         timeline: false,
+         animation: false,
+         shadow: false,
+         imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
+             url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
+             enablePickFeatures: false
+         }),
+         baseLayerPicker: true,
+         terrainProviderViewModels: terrainProviderViewModels
+     });
+     viewer.clock.shouldAnimate = false;
+     viewer.scene.globe.enableLighting = true;
+     //////////////////////////////////////////////////////////////////////////
+     // Load 3D Tileset
+     //////////////////////////////////////////////////////////////////////////
+     var bldgtileset = viewer.scene.primitives.add(
+             new Cesium.Cesium3DTileset({                
+                 url: 'https://w2.iaf-ex.hft-stuttgart.de/CesiumData/3DTiles/Buildings/BuildingSolid/Montreal/tileset.json'                 
+             }));	 
+    bldgtileset.readyPromise.then(function (tileset) {
+         height = 4;
+         viewer.scene.primitives.add(tileset);
+		 var spinner = document.getElementById("spinner");
+		 spinner.style.display = "none";
+         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);
+     });
+     var bldgdefaultstyle = new Cesium.Cesium3DTileStyle({
+         color: "color('#ffffff')"
+     });
+     bldgtileset.style = bldgdefaultstyle;
+     //////////////////////////////////////////////////////////////////////////
+     // Configuring the camera
+     //////////////////////////////////////////////////////////////////////////
+     var initialPosition = Cesium.Cartesian3.fromDegrees(-73.593335, 45.503595, 300);
+     var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(101, -5, 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);
+         document.getElementById("selectscenario").selectedIndex = 5;
+     });
+     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)
+     });
+	 var geocoder = viewer.geocoder.viewModel;
+var selectscenario = document.getElementById('selectscenario');
+    function setscenario() {
+	 var selectedscenario = selectscenario.options[selectscenario.selectedIndex].value;
+	 if (selectedscenario === 'Ahuntsic-Cartierville') {
+geocoder.searchText = "-73.680319, 45.541892, 700";
+geocoder.flightDuration = 5;
+geocoder.search();} 
+	 else if (selectedscenario === 'Anjou') {
+geocoder.searchText = "-73.546672, 45.604898, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Baie-dUrfé') {
+geocoder.searchText = "-73.91608, 45.416456, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Beaconsfield') {
+geocoder.searchText = "-73.852930, 45.433455, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Côte-des-Neiges-Notre-Dame-de-Grâce') {
+geocoder.searchText = "-73.627539, 45.498587, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Côte-Saint-Luc') {
+geocoder.searchText = "-73.663752, 45.477272, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Dollard-des-Ormeaux') {
+geocoder.searchText = "-73.806455, 45.48423, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Dorval') {
+geocoder.searchText = "-73.751089, 45.445308, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Hampstead') {
+geocoder.searchText = "-73.646991, 45.481155, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Kirkland') {
+geocoder.searchText = "-73.864756, 45.452919, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Lachine') {
+geocoder.searchText = "-73.711186, 45.448668, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'LaSalle') {
+geocoder.searchText = "-73.629267, 45.432514, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Le-Plateau-Mont-Royal') {
+geocoder.searchText = "-73.574066, 45.531365, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Le-Sud-Ouest') {
+geocoder.searchText = "-73.588565, 45.467991, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'LÎle-Bizard-Sainte-Geneviève') {
+geocoder.searchText = "-73.890756, 45.494889, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'LÎle-Dorval') {
+geocoder.searchText = "-73.742947, 45.43244, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Mercier-Hochelaga-Maisonneuve') {
+geocoder.searchText = "-73.525846, 45.574106, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Montréal-Est') {
+geocoder.searchText = "-73.497744, 45.63098, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Montréal-Nord') {
+geocoder.searchText = "-73.627658, 45.604753, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Montréal-Ouest') {
+geocoder.searchText = "-73.644244, 45.452855, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Mont-Royal') {
+geocoder.searchText = "-73.645477, 45.515008, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Outremont') {
+geocoder.searchText = "-73.611145, 45.522466, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Pierrefonds-Roxboro') {
+geocoder.searchText = "-73.847175, 45.495508, 700"; 
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Pointe-Claire') {
+geocoder.searchText = "-73.806744, 45.456677, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Rivière-des-Prairies-Pointe-aux-Trembles') {
+geocoder.searchText = "-73.560902, 45.661352, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Rosemont-La-Petite-Patrie') {
+geocoder.searchText = "-73.576036, 45.553384, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Sainte-Anne-de-Bellevue') {
+geocoder.searchText = "-73.952398, 45.403856, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Saint-Laurent') {
+geocoder.searchText = "-73.705215, 45.505384, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Saint-Léonard') {
+geocoder.searchText = "-73.596949, 45.58671, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Senneville') {
+geocoder.searchText = "-73.960325, 45.414543, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Verdun') {
+geocoder.searchText = "-73.557587, 45.460131, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Ville-Marie') {
+viewer.scene.camera.setView(homeCameraView);
+geocoder.flightDuration = 5;
+}	
+ else if (selectedscenario === 'Villeray-Saint-Michel-Parc-Extension') {
+geocoder.searchText = "-73.627625, 45.541465, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	
+ else if (selectedscenario === 'Westmount') {
+geocoder.searchText = "-73.596395, 45.485733, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}	 					
+	 }
+	selectscenario.addEventListener('change', setscenario);
+
+     //////////////////////////////////////////////////////////////////////////
+     // Selecting geometries in 3D Tileset
+     //////////////////////////////////////////////////////////////////////////
+     var nameOverlay = document.createElement('div');
+     viewer.container.appendChild(nameOverlay);
+     nameOverlay.className = 'backdrop';
+     nameOverlay.style.display = 'none';
+     nameOverlay.style.position = 'absolute';
+     nameOverlay.style.bottom = '0';
+     nameOverlay.style.left = '0';
+     nameOverlay.style['pointer-events'] = 'none';
+     nameOverlay.style.padding = '4px';
+     nameOverlay.style.backgroundColor = 'black';
+     nameOverlay.style.fontFamily = 'Fira Sans, sans-serif';
+     //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);
+                 if (!Cesium.defined(picked3DtileFeature)) {
+                     nameOverlay.style.display = 'none';
+                     return;
+                 }
+                 // A feature was picked, so show it's overlay content
+                 nameOverlay.style.display = 'block';
+                 nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + 'px';
+                 nameOverlay.style.left = movement.endPosition.x + 'px';
+                 var name = picked3DtileFeature.getProperty('LIBELLE_EN');
+                 if (!Cesium.defined(name)) {
+                     name = picked3DtileFeature.getProperty('LIBELLE_EN');
+                 }
+                 nameOverlay.textContent = name;
+                 // 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 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
+                 var featureName = "Montreal 3D Viewer";
+                 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>Original Building ID</th><td>' + picked3DtileFeature.getProperty('ori_bldgID') + '</td></tr>' +
+                     '<tr><th>Parcel ID</th><td>' + picked3DtileFeature.getProperty('ID_UEV') + '</td></tr>' +
+                     '<tr><th>Level of Detail</th><td>' + picked3DtileFeature.getProperty('gml_lod') + '</td></tr>' +
+                     '<tr><th>Maximum Building Height</th><td>' + picked3DtileFeature.getProperty('citygml_measured_height') + ' ' + 'm' + '</td></tr>' +
+                     '<tr><th>Building Function Code</th><td>' + picked3DtileFeature.getProperty('CODE_UTILI') + '</td></tr>' +
+                     '<tr><th>Building Function Description (FR)</th><td>' + picked3DtileFeature.getProperty('LIBELLE_UT') + '</td></tr>' +
+                     '<tr><th>Building Function Description (EN)</th><td>' + picked3DtileFeature.getProperty('LIBELLE_EN') + '</td></tr>' +
+                     '<tr><th>Building Category</th><td>' + picked3DtileFeature.getProperty('CATEGORIE') + '</td></tr>' +
+                     '<tr><th>Year of Construction</th><td>' + picked3DtileFeature.getProperty('ANNEE_CONS') + '</td></tr>' +
+                     '<tr><th>Neighborhood</th><td>' + picked3DtileFeature.getProperty('NOM') + '</td></tr>' +
+                     '</tbody></table>';
+             }
+         }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+     }
+     active3DTilePicker();
\ No newline at end of file

public/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';
+    // });
+
+}());

public/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>Montreal 3D Viewer</title>
+        <!-- The Cesium library. -->
+<script src="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Cesium.js"></script>
+      <link href="./CSS/widgets.css" rel="stylesheet">
+        <!-- stylesheets -->
+        <link rel="stylesheet" href="CSS/index.css" media="screen">
+		<link rel="stylesheet" type="text/css" href="CSS/Montreal3DViewer.css">
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+	    
+	</head>
+    <body>
+        <!-- defining container to keep cesium viewer -->
+        <div id="cesiumContainer"></div>
+        <!-- defining menu panel -->
+        <div class="backdrop" id="menu">
+            <h2>Montreal 3D Viewer <i class="fa fa-info-circle" style="font-size:15px;color:yellow" onclick="window.open('https://donnees.montreal.ca/ville-de-montreal/batiment-3d-2016-maquette-citygml-lod2-avec-textures2')"> </i></h2>
+			<span><strong>Select Neighborhood</strong></span>
+            <div class="nowrap">
+                <select id="selectscenario">
+                    <option value="Ahuntsic-Cartierville">Ahuntsic-Cartierville</option>
+                    <option value="Anjou">Anjou</option>
+					<option value="Baie-dUrfé">Baie-d'Urfé</option>
+                    <option value="Beaconsfield">Beaconsfield</option>
+					<option value="Côte-des-Neiges-Notre-Dame-de-Grâce">Côte-des-Neiges-Notre-Dame-de-Grâce</option>
+                    <option value="Côte-Saint-Luc">Côte-Saint-Luc</option>
+					<option value="Dollard-des-Ormeaux">Dollard-des-Ormeaux</option>
+                    <option value="Dorval">Dorval</option>
+					<option value="Hampstead">Hampstead</option>
+                    <option value="Kirkland">Kirkland</option>
+					<option value="Lachine">Lachine</option>
+                    <option value="LaSalle">LaSalle</option>
+					<option value="Le-Plateau-Mont-Royal">Le-Plateau-Mont-Royal</option>
+                    <option value="Le-Sud-Ouest">Le-Sud-Ouest</option>
+					<option value="LÎle-Bizard-Sainte-Geneviève">L'Île-Bizard-Sainte-Geneviève</option>
+                    <option value="LÎle-Dorval">L'Île-Dorval</option>
+					<option value="Mercier-Hochelaga-Maisonneuve">Mercier-Hochelaga-Maisonneuve</option>
+                    <option value="Montréal-Est">Montréal-Est</option>
+					<option value="Montréal-Nord">Montréal-Nord</option>
+                    <option value="Montréal-Ouest">Montréal-Ouest</option>
+					<option value="Mont-Royal">Mont-Royal</option>
+                    <option value="Outremont">Outremont</option>
+					<option value="Pierrefonds-Roxboro">Pierrefonds-Roxboro</option>
+                    <option value="Pointe-Claire">Pointe-Claire</option>
+					<option value="Rivière-des-Prairies-Pointe-aux-Trembles">Rivière-des-Prairies-Pointe-aux-Trembles</option>
+                    <option value="Rosemont-La-Petite-Patrie">Rosemont-La-Petite-Patrie</option>
+					<option value="Sainte-Anne-de-Bellevue">Sainte-Anne-de-Bellevue</option>
+                    <option value="Saint-Laurent">Saint-Laurent</option>
+					<option value="Saint-Léonard">Saint-Léonard</option>
+                    <option value="Senneville">Senneville</option>
+					<option value="Verdun">Verdun</option>
+                    <option value="Ville-Marie" selected>Ville-Marie</option>
+					<option value="Villeray-Saint-Michel-Parc-Extension">Villeray-Saint-Michel-Parc-Extension</option>
+                    <option value="Westmount">Westmount</option>		
+				</select>
+			</div>         
+		</div>		
+		<div id = "spinner">
+  <img src="./CSS/Images/loading.gif" />
+</div>		
+		<a href = "mailto: rushikesh.padsala@hft-stuttgart.de" target='_blank'>
+        <div class="credit4"></div>
+        </a>
+		<a href="https://steinbeis-3dps.eu/" target='_blank'>
+        <div class="credit3"></div>
+        </a>
+		<a href="https://www.concordia.ca/research/chairs/smart-cities.html" target='_blank'>
+        <div class="credit2"></div>
+        </a>
+		<a href="https://ugl.hft-stuttgart.de/" target='_blank'>
+        <div class="credit1"></div>
+        </a>
+		<!-- javascript -->
+        <script src="./Source/App.js"></script>
+    </body>
+</html>