MAPG-4 show real position after guess

make workflow better

public/static/js/mapguesser.js

@@ -22,6 +22,18 @@ var Util = {
         );
 
         return angle * Util.EARTH_RADIUS_IN_METER;
+    },
+
+    printDistanceForHuman: function (distance) {
+        if (distance < 1000) {
+            return Number.parseFloat(distance).toFixed(0) + ' m';
+        } else if (distance < 10000) {
+            return Number.parseFloat(distance / 1000).toFixed(2) + ' km';
+        } else if (distance < 100000) {
+            return Number.parseFloat(distance / 1000).toFixed(1) + ' km';
+        } else {
+            return Number.parseFloat(distance / 1000).toFixed(0) + ' km';
+        }
     }
 };
 
@@ -49,11 +61,11 @@ var realPosition;
 var panorama;
 var guessMap;
 var guessMarker;
+var resultMap;
+var resultMarkers = { guess: null, real: null };
 var googleLink;
 
 function initialize() {
-    getNewPosition();
-
     guessMap = new google.maps.Map(document.getElementById('guessMap'), {
         disableDefaultUI: true,
         clickableIcons: false,
@@ -71,41 +83,21 @@ function initialize() {
         guessMarker = new google.maps.Marker({
             map: guessMap,
             position: e.latLng,
-            draggable: true
+            clickable: false,
+            draggable: true,
+            label: {
+                color: '#ffffff',
+                fontFamily: 'Roboto',
+                fontSize: '18px',
+                fontWeight: '500',
+                text: '?'
+            }
         });
 
         document.getElementById('guessButton').disabled = false;
     });
-}
-
-function getNewPosition() {
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.onreadystatechange = function () {
-        if (this.readyState == 4 && this.status == 200) {
-            realPosition = this.response.position;
-
-            var sv = new google.maps.StreetViewService();
-            sv.getPanorama({ location: this.response.position, preference: google.maps.StreetViewPreference.BEST }, loadPano);
-        }
-    };
-    xhr.open('GET', 'getNewPosition.json', true);
-    xhr.send();
-}
-
-function loadPano(data, status) {
-    if (status !== google.maps.StreetViewStatus.OK) {
-        getNewPosition();
-        return;
-    }
-
-    if (panorama) {
-        panorama.setPano(data.location.pano);
-        return;
-    }
 
     panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), {
-        pano: data.location.pano,
         disableDefaultUI: true,
         linksControl: true,
         showRoadLabels: false
@@ -118,6 +110,37 @@ function loadPano(data, status) {
     panorama.addListener('pov_changed', function () {
         MapManipulator.rewriteGoogleLink();
     });
+
+    resultMap = new google.maps.Map(document.getElementById('resultMap'), {
+        disableDefaultUI: true,
+        clickableIcons: false,
+    });
+
+    getNewPosition();
+}
+
+function getNewPosition() {
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = 'json';
+    xhr.onreadystatechange = function () {
+        if (this.readyState == 4 && this.status == 200) {
+            realPosition = this.response.position;
+
+            var sv = new google.maps.StreetViewService();
+            sv.getPanorama({ location: this.response.position, preference: google.maps.StreetViewPreference.NEAREST }, loadPano);
+        }
+    };
+    xhr.open('GET', 'getNewPosition.json', true);
+    xhr.send();
+}
+
+function loadPano(data, status) {
+    if (status !== google.maps.StreetViewStatus.OK) {
+        getNewPosition();
+        return;
+    }
+
+    panorama.setPano(data.location.pano);
 }
 
 document.getElementById('guessButton').onclick = function () {
@@ -126,14 +149,58 @@ document.getElementById('guessButton').onclick = function () {
     }
 
     var guessedPosition = guessMarker.getPosition();
-    var distance = Util.calculateDistance(realPosition, { lat: guessedPosition.lat(), lng: guessedPosition.lng() });
-
-    alert('You were ' + (Math.round(distance) / 1000) + ' km close!');
 
     this.disabled = true;
     guessMarker.setMap(null);
     guessMarker = null;
-    //TODO: fit to the same size as on init
+
+    var distance = Util.calculateDistance(realPosition, { lat: guessedPosition.lat(), lng: guessedPosition.lng() });
+
+    document.getElementById('guess').style.visibility = 'hidden';
+    document.getElementById('result').style.visibility = 'visible';
+
+    var resultBounds = new google.maps.LatLngBounds();
+    resultBounds.extend(realPosition);
+    resultBounds.extend(guessedPosition);
+
+    resultMap.fitBounds(resultBounds);
+
+    resultMarkers.real = new google.maps.Marker({
+        map: resultMap,
+        position: realPosition,
+        clickable: true,
+        draggable: false
+    });
+    resultMarkers.guess = new google.maps.Marker({
+        map: resultMap,
+        position: guessedPosition,
+        clickable: false,
+        draggable: false,
+        label: {
+            color: '#ffffff',
+            fontFamily: 'Roboto',
+            fontSize: '18px',
+            fontWeight: '500',
+            text: '?'
+        }
+    });
+
+    resultMarkers.real.addListener('click', function () {
+        window.open('https://www.google.com/maps/search/?api=1&query=' + realPosition.lat + ',' + realPosition.lng, '_blank');
+    });
+
+    document.getElementById('distance').innerHTML = Util.printDistanceForHuman(distance);
+}
+
+document.getElementById('continueButton').onclick = function () {
+    resultMarkers.real.setMap(null);
+    resultMarkers.real = null;
+    resultMarkers.guess.setMap(null);
+    resultMarkers.guess = null;
+
+    document.getElementById('guess').style.visibility = 'visible';
+    document.getElementById('result').style.visibility = 'hidden';
+
     guessMap.fitBounds(guessMapBounds);
 
     getNewPosition();