diff --git a/public/CSS/Images/CU.jpg b/public/CSS/Images/CU.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5cebb9bb612cd370665ab8bf007cb80e1a3d1836
Binary files /dev/null and b/public/CSS/Images/CU.jpg differ
diff --git a/public/CSS/Images/MontrealTerrain.png b/public/CSS/Images/MontrealTerrain.png
new file mode 100644
index 0000000000000000000000000000000000000000..16343ec24135b6250935b07399c51a4eeb214620
Binary files /dev/null and b/public/CSS/Images/MontrealTerrain.png differ
diff --git a/public/CSS/Images/email.jpg b/public/CSS/Images/email.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a875a0b0f0bb94fb5e03a24fb5bdfb866546000e
Binary files /dev/null and b/public/CSS/Images/email.jpg differ
diff --git a/public/CSS/Images/hft.jpg b/public/CSS/Images/hft.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..00262fedc74fc53ad6eeac8f6e75ee2802769dc7
Binary files /dev/null and b/public/CSS/Images/hft.jpg differ
diff --git a/public/CSS/Images/loading.gif b/public/CSS/Images/loading.gif
new file mode 100644
index 0000000000000000000000000000000000000000..ef0650ae18ac4b43ff5e434d5e980844c0c22d21
Binary files /dev/null and b/public/CSS/Images/loading.gif differ
diff --git a/public/CSS/Images/stt.png b/public/CSS/Images/stt.png
new file mode 100644
index 0000000000000000000000000000000000000000..ad6aee8adb21755a336ab66b20c2fec0a5a823b0
Binary files /dev/null and b/public/CSS/Images/stt.png differ
diff --git a/public/CSS/Montreal3DViewer.css b/public/CSS/Montreal3DViewer.css
new file mode 100644
index 0000000000000000000000000000000000000000..c239ea6f254ff6afefd298d2346520339905bb3a
--- /dev/null
+++ b/public/CSS/Montreal3DViewer.css
@@ -0,0 +1,116 @@
+#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
diff --git a/public/CSS/index.css b/public/CSS/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..a3ac2ff58597b85a61236647522c468a19f194d1
--- /dev/null
+++ b/public/CSS/index.css
@@ -0,0 +1,68 @@
+.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
diff --git a/public/CSS/widgets.css b/public/CSS/widgets.css
new file mode 100644
index 0000000000000000000000000000000000000000..02a5e471b32e052c904d2379255e37cc6e759da9
--- /dev/null
+++ b/public/CSS/widgets.css
@@ -0,0 +1 @@
+.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
diff --git a/public/Source/App.js b/public/Source/App.js
new file mode 100644
index 0000000000000000000000000000000000000000..c74f249b0ae15a851b925cde1ad944b8f867f1ba
--- /dev/null
+++ b/public/Source/App.js
@@ -0,0 +1,343 @@
+ 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
diff --git a/public/Source/AppSkeleton.js b/public/Source/AppSkeleton.js
new file mode 100644
index 0000000000000000000000000000000000000000..1d01f2d07a798c9e57a71f71f54bd2c7358adb31
--- /dev/null
+++ b/public/Source/AppSkeleton.js
@@ -0,0 +1,342 @@
+(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';
+ // });
+
+}());
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..945bb039ace0aa98b8b93d1885e52ce5e42523c4
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..8418f6bc73a09052d0c06aaa49c6c5b428cd1bd2
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,85 @@
+<!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>