viewer added

40bd40c6 · Rushikesh Padsala · 79ec5751 · 40bd40c6 · 40bd40c6 · 40bd40c6
Commit 40bd40c6 authored Jul 26, 2022 by Rushikesh Padsala
--- a/public/CSS/Images/CU.jpg
+++ b/public/CSS/Images/CU.jpg
--- a/public/CSS/Images/MontrealTerrain.png
+++ b/public/CSS/Images/MontrealTerrain.png
--- a/public/CSS/Images/email.jpg
+++ b/public/CSS/Images/email.jpg
--- a/public/CSS/Images/hft.jpg
+++ b/public/CSS/Images/hft.jpg
--- a/public/CSS/Images/loading.gif
+++ b/public/CSS/Images/loading.gif
--- a/public/CSS/Images/stt.png
+++ b/public/CSS/Images/stt.png
--- a/public/CSS/Montreal3DViewer.css
+++ b/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
--- a/public/CSS/index.css
+++ b/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
--- a/public/CSS/widgets.css
+++ b/public/CSS/widgets.css
+.cesium-svgPath-svg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.cesium-button{display:inline-block;position:relative;background:#303336;border:1px solid #444;color:#edffff;fill:#edffff;border-radius:4px;padding:5px 12px;margin:2px 3px;cursor:pointer;overflow:hidden;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.cesium-button:focus{color:#fff;fill:#fff;border-color:#ea4;outline:0}.cesium-button:hover{color:#fff;fill:#fff;background:#48b;border-color:#aef;box-shadow:0 0 8px #fff}.cesium-button:active{color:#000;fill:#000;background:#adf;border-color:#fff;box-shadow:0 0 8px #fff}.cesium-button-disabled,.cesium-button-disabled:active,.cesium-button-disabled:focus,.cesium-button-disabled:hover,.cesium-button:disabled{background:#303336;border-color:#444;color:#646464;fill:#646464;box-shadow:none;cursor:default}.cesium-button option{background-color:#000;color:#eee}.cesium-button option:disabled{color:#777}.cesium-button input,.cesium-button label{cursor:pointer}.cesium-button input{vertical-align:sub}.cesium-toolbar-button{box-sizing:border-box;width:32px;height:32px;border-radius:14%;padding:0;vertical-align:middle;z-index:0}.cesium-performanceDisplay-defaultContainer{position:absolute;top:50px;right:10px;text-align:right}.cesium-performanceDisplay{background-color:rgba(40,40,40,.7);padding:7px;border-radius:5px;border:1px solid #444;font:bold 12px sans-serif}.cesium-performanceDisplay-fps{color:#e52}.cesium-performanceDisplay-throttled{color:#a42}.cesium-performanceDisplay-ms{color:#de3}.cesium-animation-theme{visibility:hidden;display:block;position:absolute;z-index:-100}.cesium-animation-themeNormal{color:#222}.cesium-animation-themeHover{color:#4488b0}.cesium-animation-themeSelect{color:#242}.cesium-animation-themeDisabled{color:#333}.cesium-animation-themeKnob{color:#222}.cesium-animation-themePointer{color:#2e2}.cesium-animation-themeSwoosh{color:#8ac}.cesium-animation-themeSwooshHover{color:#aef}.cesium-animation-svgText{fill:#edffff;font-family:Sans-Serif;font-size:15px;text-anchor:middle}.cesium-animation-blank{fill:#000;fill-opacity:.01;stroke:none}.cesium-animation-rectButton{cursor:pointer;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.cesium-animation-rectButton .cesium-animation-buttonGlow{fill:#fff;stroke:none;display:none}.cesium-animation-rectButton:hover .cesium-animation-buttonGlow{display:block}.cesium-animation-rectButton .cesium-animation-buttonPath{fill:#edffff}.cesium-animation-rectButton .cesium-animation-buttonMain{stroke:#444;stroke-width:1.2}.cesium-animation-rectButton:hover .cesium-animation-buttonMain{stroke:#aef}.cesium-animation-rectButton:active .cesium-animation-buttonMain{fill:#abd6ff}.cesium-animation-buttonDisabled{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.cesium-animation-buttonDisabled .cesium-animation-buttonMain{stroke:#555}.cesium-animation-buttonDisabled .cesium-animation-buttonPath{fill:#818181}.cesium-animation-buttonDisabled .cesium-animation-buttonGlow{display:none}.cesium-animation-buttonToggled .cesium-animation-buttonGlow{display:block;fill:#2e2}.cesium-animation-buttonToggled .cesium-animation-buttonMain{stroke:#2e2}.cesium-animation-buttonToggled:hover .cesium-animation-buttonGlow{fill:#fff}.cesium-animation-buttonToggled:hover .cesium-animation-buttonMain{stroke:#2e2}.cesium-animation-shuttleRingG{cursor:pointer}.cesium-animation-shuttleRingPointer{cursor:pointer}.cesium-animation-shuttleRingPausePointer{cursor:pointer}.cesium-animation-shuttleRingBack{fill:#181818;fill-opacity:.8;stroke:#333;stroke-width:1.2}.cesium-animation-shuttleRingSwoosh line{stroke:#8ac;stroke-width:3;stroke-opacity:.2;stroke-linecap:round}.cesium-animation-knobOuter{cursor:pointer;stroke:#444;stroke-width:1.2}.cesium-animation-knobInner{cursor:pointer}.cesium-baseLayerPicker-selected{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.cesium-baseLayerPicker-dropDown{display:block;position:absolute;box-sizing:content-box;top:auto;right:0;width:320px;max-height:500px;margin-top:5px;background-color:rgba(38,38,38,.75);border:1px solid #444;padding:6px;overflow:auto;border-radius:10px;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;transform:translate(0,-20%);visibility:hidden;opacity:0;transition:visibility 0s .2s,opacity .2s ease-in,transform .2s ease-in}.cesium-baseLayerPicker-dropDown-visible{transform:translate(0,0);visibility:visible;opacity:1;transition:opacity .2s ease-out,transform .2s ease-out}.cesium-baseLayerPicker-sectionTitle{display:block;font-family:sans-serif;font-size:16pt;text-align:left;color:#edffff;margin-bottom:4px}.cesium-baseLayerPicker-choices{margin-bottom:5px}.cesium-baseLayerPicker-categoryTitle{color:#edffff;font-size:11pt}.cesium-baseLayerPicker-choices{display:block;border:1px solid #888;border-radius:5px;padding:5px 0}.cesium-baseLayerPicker-item{display:inline-block;vertical-align:top;margin:2px 5px;width:64px;text-align:center;cursor:pointer}.cesium-baseLayerPicker-itemLabel{display:block;font-family:sans-serif;font-size:8pt;text-align:center;vertical-align:middle;color:#edffff;cursor:pointer;word-wrap:break-word}.cesium-baseLayerPicker-item:focus .cesium-baseLayerPicker-itemLabel,.cesium-baseLayerPicker-item:hover .cesium-baseLayerPicker-itemLabel{text-decoration:underline}.cesium-baseLayerPicker-itemIcon{display:inline-block;position:relative;width:inherit;height:auto;background-size:100% 100%;border:solid 1px #444;border-radius:9px;color:#edffff;margin:0;padding:0;cursor:pointer;box-sizing:border-box}.cesium-baseLayerPicker-item:hover .cesium-baseLayerPicker-itemIcon{border-color:#fff;box-shadow:0 0 8px #fff,0 0 8px #fff}.cesium-baseLayerPicker-selectedItem .cesium-baseLayerPicker-itemLabel{color:#bdecf8}.cesium-baseLayerPicker-selectedItem .cesium-baseLayerPicker-itemIcon{border:double 4px #bdecf8}.cesium-widget{position:relative}.cesium-widget,.cesium-widget canvas{width:100%;height:100%;touch-action:none}.cesium-widget-credits{display:block;position:absolute;bottom:0;left:0;color:#fff;font-size:10px;text-shadow:0 0 2px #000;padding-right:5px}.cesium-widget-credits a,.cesium-widget-credits a:visited{color:#fff}.cesium-widget-errorPanel{position:absolute;top:0;right:0;bottom:0;left:0;text-align:center;background:rgba(0,0,0,.7);z-index:99999}.cesium-widget-errorPanel:before{display:inline-block;vertical-align:middle;height:100%;content:""}.cesium-widget-errorPanel-content{width:75%;max-width:500px;display:inline-block;text-align:left;vertical-align:middle;border:1px solid #510c00;border-radius:7px;background-color:#f0d9d5;font-size:14px;color:#510c00}.cesium-widget-errorPanel-content.expanded{max-width:75%}.cesium-widget-errorPanel-header{font-size:18px;font-family:"Open Sans",Verdana,Geneva,sans-serif;background:#d69d93;border-bottom:2px solid #510c00;padding-bottom:10px;border-radius:3px 3px 0 0;padding:15px}.cesium-widget-errorPanel-scroll{overflow:auto;font-family:"Open Sans",Verdana,Geneva,sans-serif;white-space:pre-wrap;padding:0 15px;margin:10px 0 20px 0}.cesium-widget-errorPanel-buttonPanel{padding:0 15px;margin:10px 0 20px 0;text-align:right}.cesium-widget-errorPanel-buttonPanel button{border-color:#510c00;background:#d69d93;color:#202020;margin:0}.cesium-widget-errorPanel-buttonPanel button:focus{border-color:#510c00;background:#f0d9d5;color:#510c00}.cesium-widget-errorPanel-buttonPanel button:hover{border-color:#510c00;background:#f0d9d5;color:#510c00}.cesium-widget-errorPanel-buttonPanel button:active{border-color:#510c00;background:#b17b72;color:#510c00}.cesium-widget-errorPanel-more-details{text-decoration:underline;cursor:pointer}.cesium-widget-errorPanel-more-details:hover{color:#2b0700}.cesium-cesiumInspector{border-radius:5px;transition:width ease-in-out .25s;background:rgba(48,51,54,.8);border:1px solid #444;color:#edffff;display:inline-block;position:relative;padding:4px 12px;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden}.cesium-cesiumInspector-button{text-align:center;font-size:11pt}.cesium-cesiumInspector-visible .cesium-cesiumInspector-button{border-bottom:1px solid #aaa;padding-bottom:3px}.cesium-cesiumInspector input:enabled,.cesium-cesiumInspector-button{cursor:pointer}.cesium-cesiumInspector-visible{width:185px;height:auto}.cesium-cesiumInspector-hidden{width:122px;height:17px}.cesium-cesiumInspector-sectionContent{max-height:500px}.cesium-cesiumInspector-section-collapsed .cesium-cesiumInspector-sectionContent{max-height:0;padding:0!important;overflow:hidden}.cesium-cesiumInspector-dropDown{margin:5px 0;font-family:sans-serif;font-size:10pt;width:185px}.cesium-cesiumInspector-frustumStatistics{padding-left:10px;padding:5px;background-color:rgba(80,80,80,.75)}.cesium-cesiumInspector-pickButton{background-color:rgba(0,0,0,.3);border:1px solid #444;color:#edffff;border-radius:5px;padding:3px 7px;cursor:pointer;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;margin:0 auto}.cesium-cesiumInspector-pickButton:focus{outline:0}.cesium-cesiumInspector-pickButton:active,.cesium-cesiumInspector-pickButtonHighlight{color:#000;background:#adf;border-color:#fff;box-shadow:0 0 8px #fff}.cesium-cesiumInspector-center{text-align:center}.cesium-cesiumInspector-sectionHeader{font-weight:700;font-size:10pt;margin:0;cursor:pointer}.cesium-cesiumInspector-pickSection{border:1px solid #aaa;border-radius:5px;padding:3px;margin-bottom:5px}.cesium-cesiumInspector-sectionContent{margin-bottom:10px;transition:max-height .25s}.cesium-cesiumInspector-tileText{padding-bottom:10px;border-bottom:1px solid #aaa}.cesium-cesiumInspector-relativeText{padding-top:10px}.cesium-cesiumInspector-sectionHeader::before{margin-right:5px;content:"-";width:1ch;display:inline-block}.cesium-cesiumInspector-section-collapsed .cesium-cesiumInspector-sectionHeader::before{content:"+"}ul.cesium-cesiumInspector-statistics{margin:0;padding-top:3px;padding-bottom:3px}ul.cesium-cesiumInspector-statistics+ul.cesium-cesiumInspector-statistics{border-top:1px solid #aaa}.cesium-cesiumInspector-slider{margin-top:5px}.cesium-cesiumInspector-slider input[type=number]{text-align:left;background-color:#222;outline:0;border:1px solid #444;color:#edffff;width:100px;border-radius:3px;padding:1px;margin-left:10px;cursor:auto}.cesium-cesiumInspector-slider input[type=number]::-webkit-inner-spin-button,.cesium-cesiumInspector-slider input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.cesium-cesiumInspector-slider input[type=range]{margin-left:5px;vertical-align:middle}.cesium-cesiumInspector-hide .cesium-cesiumInspector-styleEditor{display:none}.cesium-cesiumInspector-styleEditor{padding:10px;border-radius:5px;background:rgba(48,51,54,.8);border:1px solid #444}.cesium-cesiumInspector-styleEditor textarea{width:100%;height:300px;background:0 0;color:#edffff;border:none;padding:0;white-space:pre;overflow-wrap:normal;overflow-x:auto}.cesium-3DTilesInspector{width:300px;pointer-events:all}.cesium-3DTilesInspector-statistics{font-size:11px}.cesium-3DTilesInspector div,.cesium-3DTilesInspector input[type=range]{width:100%;box-sizing:border-box}.cesium-cesiumInspector-error{color:#ff9e9e;overflow:auto}.cesium-3DTilesInspector .cesium-cesiumInspector-section{margin-top:3px}.cesium-3DTilesInspector .cesium-cesiumInspector-sectionHeader+.cesium-cesiumInspector-show{border-top:1px solid #fff}input.cesium-cesiumInspector-url{overflow:hidden;white-space:nowrap;overflow-x:scroll;background-color:transparent;color:#fff;outline:0;border:none;height:1em;width:100%}.cesium-cesiumInspector .field-group{display:table}.cesium-cesiumInspector .field-group>label{display:table-cell;font-weight:700}.cesium-cesiumInspector .field-group>.field{display:table-cell;width:100%}.cesium-button.cesium-fullscreenButton{display:block;width:100%;height:100%;margin:0;border-radius:0}.cesium-button.cesium-vrButton{display:block;width:100%;height:100%;margin:0;border-radius:0}.cesium-viewer-geocoderContainer .cesium-geocoder-input{visibility:hidden;border:solid 1px #444;background-color:rgba(40,40,40,.7);color:#fff;display:inline-block;vertical-align:middle;width:0;height:32px;margin:0;padding:0 32px 0 0;border-radius:0;box-sizing:border-box;transition:width ease-in-out .25s,background-color .2s ease-in-out;-webkit-appearance:none}.cesium-viewer-geocoderContainer:hover .cesium-geocoder-input{border-color:#aef;box-shadow:0 0 8px #fff}.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus{border-color:#ea4;background-color:rgba(15,15,15,.9);box-shadow:none;outline:0}.cesium-viewer-geocoderContainer .cesium-geocoder-input-wide,.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus,.cesium-viewer-geocoderContainer:hover .cesium-geocoder-input{padding-left:4px;width:250px}.cesium-viewer-geocoderContainer .search-results{position:absolute;background-color:#000;color:#eee;overflow-y:auto;opacity:.8;width:100%}.cesium-viewer-geocoderContainer .search-results ul{list-style-type:none;margin:0;padding:0}.cesium-viewer-geocoderContainer .search-results ul li{font-size:14px;padding:3px 10px}.cesium-viewer-geocoderContainer .search-results ul li:hover{cursor:pointer}.cesium-viewer-geocoderContainer .search-results ul li.active{background:#48b}.cesium-geocoder-searchButton{visibility:hidden;background-color:#303336;display:inline-block;position:absolute;cursor:pointer;width:32px;top:1px;right:1px;height:30px;vertical-align:middle;fill:#edffff}.cesium-geocoder-searchButton:hover{background-color:#48b}.cesium-infoBox{display:block;position:absolute;top:50px;right:0;width:40%;max-width:480px;background:rgba(38,38,38,.95);color:#edffff;border:1px solid #444;border-right:none;border-top-left-radius:7px;border-bottom-left-radius:7px;box-shadow:0 0 10px 1px #000;transform:translate(100%,0);visibility:hidden;opacity:0;transition:visibility 0s .2s,opacity .2s ease-in,transform .2s ease-in}.cesium-infoBox-visible{transform:translate(0,0);visibility:visible;opacity:1;transition:opacity .2s ease-out,transform .2s ease-out}.cesium-infoBox-title{display:block;height:20px;padding:5px 30px 5px 25px;background:#545454;border-top-left-radius:7px;text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;box-sizing:content-box}.cesium-infoBox-bodyless .cesium-infoBox-title{border-bottom-left-radius:7px}button.cesium-infoBox-camera{display:block;position:absolute;top:4px;left:4px;width:22px;height:22px;background:0 0;border-color:transparent;border-radius:3px;padding:0 5px;margin:0}button.cesium-infoBox-close{display:block;position:absolute;top:5px;right:5px;height:20px;background:0 0;border:none;border-radius:2px;font-weight:700;font-size:16px;padding:0 5px;margin:0;color:#edffff}button.cesium-infoBox-close:focus{background:rgba(238,136,0,.44);outline:0}button.cesium-infoBox-close:hover{background:#888;color:#000}button.cesium-infoBox-close:active{background:#a00;color:#000}.cesium-infoBox-bodyless .cesium-infoBox-iframe{display:none}.cesium-infoBox-iframe{border:none;width:100%;width:calc(100% - 2px)}span.cesium-sceneModePicker-wrapper{display:inline-block;position:relative;margin:0 3px}.cesium-sceneModePicker-visible{visibility:visible;opacity:1;transition:opacity .25s linear}.cesium-sceneModePicker-hidden{visibility:hidden;opacity:0;transition:visibility 0s .25s,opacity .25s linear}.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-none{display:none}.cesium-sceneModePicker-slide-svg{transition:left 2s;top:0;left:0}.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon{box-sizing:border-box;padding:0;margin:3px 0}.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button2D,.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button3D,.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-buttonColumbusView{margin:0 0 3px 0}.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button3D .cesium-sceneModePicker-icon2D{left:100%}.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button3D .cesium-sceneModePicker-iconColumbusView{left:200%}.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-buttonColumbusView .cesium-sceneModePicker-icon3D{left:-200%}.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-buttonColumbusView .cesium-sceneModePicker-icon2D{left:-100%}.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button2D .cesium-sceneModePicker-icon3D{left:-100%}.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button2D .cesium-sceneModePicker-iconColumbusView{left:100%}.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-selected{border-color:#2e2;box-shadow:0 0 8px #fff,0 0 8px #fff}span.cesium-projectionPicker-wrapper{display:inline-block;position:relative;margin:0 3px}.cesium-projectionPicker-visible{visibility:visible;opacity:1;transition:opacity .25s linear}.cesium-projectionPicker-hidden{visibility:hidden;opacity:0;transition:visibility 0s .25s,opacity .25s linear}.cesium-projectionPicker-wrapper .cesium-projectionPicker-none{display:none}.cesium-projectionPicker-wrapper .cesium-projectionPicker-dropDown-icon{box-sizing:border-box;padding:0;margin:3px 0}.cesium-projectionPicker-wrapper .cesium-projectionPicker-buttonOrthographic,.cesium-projectionPicker-wrapper .cesium-projectionPicker-buttonPerspective{margin:0 0 3px 0}.cesium-projectionPicker-wrapper .cesium-projectionPicker-buttonPerspective .cesium-projectionPicker-iconOrthographic{left:100%}.cesium-projectionPicker-wrapper .cesium-projectionPicker-buttonOrthographic .cesium-projectionPicker-iconPerspective{left:-100%}.cesium-projectionPicker-wrapper .cesium-projectionPicker-selected{border-color:#2e2;box-shadow:0 0 8px #fff,0 0 8px #fff}.cesium-performance-watchdog-message-area{position:relative;background-color:#ff0;color:#000;padding:10px}.cesium-performance-watchdog-message{margin-right:30px}.cesium-performance-watchdog-message-dismiss{position:absolute;right:0;margin:0 10px 0 0}.cesium-navigationHelpButton-wrapper{position:relative;display:inline-block}.cesium-navigation-help{visibility:hidden;position:absolute;top:38px;right:2px;width:250px;border-radius:10px;transform:scale(.01);transform-origin:234px -10px;transition:visibility 0s .25s,transform .25s ease-in}.cesium-navigation-help-visible{visibility:visible;transform:scale(1);transition:transform .25s ease-out}.cesium-navigation-help-instructions{border:1px solid #444;background-color:rgba(38,38,38,.75);padding-bottom:5px;border-radius:0 0 10px 10px}.cesium-click-navigation-help{display:none}.cesium-touch-navigation-help{display:none;padding-top:5px}.cesium-click-navigation-help-visible{display:block}.cesium-touch-navigation-help-visible{display:block}.cesium-navigation-help-pan{color:#6cf;font-weight:700}.cesium-navigation-help-zoom{color:#65fd00;font-weight:700}.cesium-navigation-help-rotate{color:#ffd800;font-weight:700}.cesium-navigation-help-tilt{color:#d800d8;font-weight:700}.cesium-navigation-help-details{color:#fff}.cesium-navigation-button{color:#fff;background-color:transparent;border-bottom:none;border-top:1px solid #444;border-right:1px solid #444;margin:0;width:50%;cursor:pointer}.cesium-navigation-button-icon{vertical-align:middle;padding:5px 1px}.cesium-navigation-button:focus{outline:0}.cesium-navigation-button-left{border-radius:10px 0 0 0;border-left:1px solid #444}.cesium-navigation-button-right{border-radius:0 10px 0 0;border-left:none}.cesium-navigation-button-selected{background-color:rgba(38,38,38,.75)}.cesium-navigation-button-unselected{background-color:rgba(0,0,0,.75)}.cesium-navigation-button-unselected:hover{background-color:rgba(76,76,76,.75)}.cesium-selection-wrapper{position:absolute;width:160px;height:160px;pointer-events:none;visibility:hidden;opacity:0;transition:visibility 0s .2s,opacity .2s ease-in}.cesium-selection-wrapper-visible{visibility:visible;opacity:1;transition:opacity .2s ease-out}.cesium-selection-wrapper svg{fill:#2e2;stroke:#000;stroke-width:1.1px}.cesium-timeline-main{position:relative;left:0;bottom:0;overflow:hidden;border:solid 1px #888}.cesium-timeline-trackContainer{width:100%;overflow:auto;border-top:solid 1px #888;position:relative;top:0;left:0}.cesium-timeline-tracks{position:absolute;top:0;left:0;width:100%}.cesium-timeline-needle{position:absolute;left:0;top:1.7em;bottom:0;width:1px;background:red}.cesium-timeline-bar{position:relative;left:0;top:0;overflow:hidden;cursor:pointer;width:100%;height:1.7em;background:linear-gradient(to bottom,rgba(116,117,119,.8) 0,rgba(58,68,82,.8) 11%,rgba(46,50,56,.8) 46%,rgba(53,53,53,.8) 81%,rgba(53,53,53,.8) 100%)}.cesium-timeline-ruler{visibility:hidden;white-space:nowrap;font-size:80%;z-index:-200}.cesium-timeline-highlight{position:absolute;bottom:0;left:0;background:#08f}.cesium-timeline-ticLabel{position:absolute;top:0;left:0;white-space:nowrap;font-size:80%;color:#eee}.cesium-timeline-ticMain{position:absolute;bottom:0;left:0;width:1px;height:50%;background:#eee}.cesium-timeline-ticSub{position:absolute;bottom:0;left:0;width:1px;height:33%;background:#aaa}.cesium-timeline-ticTiny{position:absolute;bottom:0;left:0;width:1px;height:25%;background:#888}.cesium-timeline-icon16{display:block;position:absolute;width:16px;height:16px;background-image:url(Images/TimelineIcons.png);background-repeat:no-repeat}.cesium-viewer{font-family:sans-serif;font-size:16px;overflow:hidden;display:block;position:relative;top:0;left:0;width:100%;height:100%}.cesium-viewer-cesiumWidgetContainer{width:100%;height:100%}.cesium-viewer-bottom{display:block;position:absolute;bottom:0;left:0;padding-right:5px}.cesium-viewer .cesium-widget-credits{display:inline;bottom:auto;left:auto;padding-right:0;color:#fff;font-size:10px;text-shadow:0 0 2px #000}.cesium-viewer-timelineContainer{position:absolute;bottom:0;left:169px;right:29px;height:27px;padding:0;margin:0;overflow:hidden;font-size:14px}.cesium-viewer-animationContainer{position:absolute;bottom:0;left:0;padding:0;width:169px;height:112px}.cesium-viewer-fullscreenContainer{position:absolute;bottom:0;right:0;padding:0;width:29px;height:29px;overflow:hidden}.cesium-viewer-vrContainer{position:absolute;bottom:0;right:0;padding:0;width:29px;height:29px;overflow:hidden}.cesium-viewer-toolbar{display:block;position:absolute;top:5px;right:5px}.cesium-viewer-cesiumInspectorContainer{display:block;position:absolute;top:50px;right:10px}.cesium-viewer-geocoderContainer{position:relative;display:inline-block;margin:0 3px}.cesium-viewer-cesium3DTilesInspectorContainer{display:block;position:absolute;top:50px;right:10px;max-height:calc(100% - 120px);box-sizing:border-box;overflow-y:auto;overflow-x:hidden}
\ No newline at end of file
--- a/public/Source/App.js
+++ b/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
--- a/public/Source/AppSkeleton.js
+++ b/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';
+    // });
+
+}());
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/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>