Merge pull request #89 from amosproj/depth-map-dev

Include Sprint 9 changes on main (Depth map dev to main)

src/css/main.css

@@ -37,7 +37,7 @@ body {
 
 .control-OL{
     position: fixed;
-    bottom:21%;
+    bottom:20.5%;
     right: 3%;
     color: #fff;
 }

src/js/viewer/ViewerAPI.js

@@ -42,9 +42,9 @@ export class ViewerAPI {
 
             this.pano = new ViewerPanoAPI(this);
             this.map = new ViewerMapAPI(this);
-
+        }).then(() => {
             // the only html element we work with (the pano-viewer div)
-            const container = document.getElementById('pano-viewer');
+            const panoDiv = document.getElementById('pano-viewer');
 
             // create the renderer, and embed the attributed dom element in the html page
             this.renderer = new THREE.WebGLRenderer();
@@ -53,21 +53,18 @@ export class ViewerAPI {
             this.renderer.autoClear = false; // To allow render overlay on top of panorama scene
             this.renderer.sortObjects = false;
 
-            container.appendChild(this.renderer.domElement);
+            panoDiv.appendChild(this.renderer.domElement);
 
             // start animation loop
             this.animate();
         });
-
     }
 
     animate() {
         window.requestAnimationFrame(() => this.animate());
         this.pano.view(this.pano.viewerViewState.lonov, this.pano.viewerViewState.latov, this.pano.viewerViewState.fov);
         this.renderer.clear();
         this.renderer.render(this.pano.scene, this.pano.camera);
-        this.renderer.clearDepth();
-        this.renderer.render(this.map.scene, this.map.camera);
     }
 
     //Move the view to the nearest (euclidian distance) panorama to the given position. (ignore z value because only called on same floor)
@@ -139,12 +136,12 @@ export class ViewerAPI {
     // Convert the local metric three.js coordinates used by the viewer to WGS 84 coordinates [longitude, latitude, z].
     toGlobal(localCoords) {
         // localCoords : THREE.Vector3 // Local coordinates used by the viewer
-        const globalX = this.floor.origin[0] - (localCoords.x / 71.5);
-        const globalY = this.floor.origin[1] - (localCoords.y / 111.3);
-        const globalZ = localCoords.z - this.floor.currentFloor.z;
+        const globalX = this.floor.origin[0] - ((localCoords.x / 1000) / 71.5);
+        const globalY = this.floor.origin[1] - ((-localCoords.z / 1000) / 111.3);
+        const globalZ = localCoords.y - this.floor.currentFloor.z;
 
         // the three js scene sees the y axis as the up-down axis so we have to swap with z
-        return [globalX, globalZ, globalY];
+        return [globalX, globalY, globalZ];
         // Returns: [Number] : WGS 84 coordinates [longitude, latitude, z] (z value is floorZ + panoZ, where localCoords is just the panoZ)
     }
 
@@ -154,12 +151,12 @@ export class ViewerAPI {
         // Distance calculation math taken from here https://www.mkompf.com/gps/distcalc.html
         // The more accurate calculation breaks the pixel offset on the pre-created maps
         const dx = 71.5 * (this.floor.origin[0] - globalCoords[0]);
-        const dy = 111.3 * (this.floor.origin[1] - globalCoords[1]);
+        const dz = 111.3 * (this.floor.origin[1] - globalCoords[1]);
 
         return new this.THREE.Vector3(
             dx * 1000,
             globalCoords[2] + this.floor.currentFloor.z,
-            dy * 1000);
+            -dz * 1000);
     }
 
     // TODO: swap() and big(wanted)

src/js/viewer/ViewerConfig.js

@@ -8,10 +8,21 @@ export const DEFAULT_FOV = 80;
 export const MAX_FOV = 100;
 export const MIN_FOV = 10;
 
+
 // Describes how much mouse wheel scrolling is needed to zoom in the picture. 
 // A higher value means zooming is faster (also more stuttered)
 export const ZOOM_SPEED = 0.05;
 
+
 // Describes how much the mouse has to be moved for the picture to pan
 // A higher value means panning is quicker
 export const PAN_SPEED = 0.1;
+
+
+//Configurable values to change some aspects of the ViewerMapAPI
+
+// Describes the Field of View of scaling of displayed on the map. 
+export const SCALING_MAP = 0.2;
+
+// Describes the maximum zoom of the map. 
+export const MAP_ZOOM = 4;

src/js/viewer/ViewerFloorAPI.js

@@ -72,8 +72,8 @@ export class ViewerFloorAPI {
                 // display pano from new floor closest to current one
                 const newImg = this.viewerAPI.move(oldPos[0], oldPos[1], oldPos[2]); // only checks images in correct floor because FloorId is set before
 
-                // show new map
-                this.viewerMapAPI.redraw();
+                // // show new map
+                // this.viewerMapAPI.redraw();
 
                 // notify viewerAPI via event
                 this.viewerAPI.propagateEvent("floor", this.currentFloor.name, true); // changed floor