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 = 31;
     });
     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();