From 3afadb506b0ca306419690ba0202087d86a37bea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Thu, 21 May 2020 12:17:18 +0200 Subject: [PATCH 1/4] MAPG-38 reset zoom in the documented way --- public/static/js/mapguesser.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/public/static/js/mapguesser.js b/public/static/js/mapguesser.js index b45208a..272d31d 100644 --- a/public/static/js/mapguesser.js +++ b/public/static/js/mapguesser.js @@ -43,7 +43,8 @@ } Core.panorama.setVisible(true); - Core.panorama.setPov({ heading: 0, pitch: 0, zoom: 0 }); + Core.panorama.setPov({ heading: 0, pitch: 0 }); + Core.panorama.setZoom(0); Core.panorama.setPano(data.location.pano); }, From cb000a58877bb784f53a18cf5097f579bd4efd07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Thu, 21 May 2020 12:17:53 +0200 Subject: [PATCH 2/4] MAPG-38 turn out motiontracking for the time being --- public/static/js/mapguesser.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/public/static/js/mapguesser.js b/public/static/js/mapguesser.js index 272d31d..d5da01b 100644 --- a/public/static/js/mapguesser.js +++ b/public/static/js/mapguesser.js @@ -164,7 +164,8 @@ Core.panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), { disableDefaultUI: true, linksControl: true, - showRoadLabels: false + showRoadLabels: false, + motionTracking: false }); Core.panorama.addListener('position_changed', function () { From 521229fc4bfa28c5a616c9299789a35803049fd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Thu, 21 May 2020 12:18:17 +0200 Subject: [PATCH 3/4] MAPG-38 fix resultMap's border-radius --- public/static/css/mapguesser.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/public/static/css/mapguesser.css b/public/static/css/mapguesser.css index c93a739..39a7326 100644 --- a/public/static/css/mapguesser.css +++ b/public/static/css/mapguesser.css @@ -114,6 +114,8 @@ div.buttonContainer.bottom { #resultMap { height: 70%; width: 100%; + border-top-left-radius: 3px; + border-top-right-radius: 3px; } #resultInfo { From 6cd777fc1b2fdfd77a57d845a77640069c965cd8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Thu, 21 May 2020 14:07:37 +0200 Subject: [PATCH 4/4] MAPG-29 draw line between the real and guess position on result map minor fixes and improvements in JS --- public/static/js/mapguesser.js | 80 ++++++++++++++++++++++------------ 1 file changed, 51 insertions(+), 29 deletions(-) diff --git a/public/static/js/mapguesser.js b/public/static/js/mapguesser.js index d5da01b..f1a087e 100644 --- a/public/static/js/mapguesser.js +++ b/public/static/js/mapguesser.js @@ -9,6 +9,7 @@ guessMarker: null, resultMap: null, resultMarkers: { guess: null, real: null }, + resultLine: null, googleLink: null, getNewPosition: function () { @@ -51,7 +52,7 @@ calculateScore: function (distance) { var goodness = 1.0 - distance / Math.sqrt(mapArea); - return Math.pow(Core.MAX_SCORE, goodness); + return Math.round(Math.pow(Core.MAX_SCORE, goodness)); }, calculateScoreBarProperties: function (score) { @@ -181,6 +182,48 @@ clickableIcons: false, }); + Core.resultMarkers.real = new google.maps.Marker({ + map: Core.resultMap, + clickable: true, + draggable: false + }); + + Core.resultMarkers.real.addListener('click', function () { + window.open('https://www.google.com/maps/search/?api=1&query=' + this.getPosition().lat() + ',' + this.getPosition().lng(), '_blank'); + }); + + Core.resultMarkers.guess = new google.maps.Marker({ + map: Core.resultMap, + clickable: false, + draggable: false, + label: { + color: '#ffffff', + fontFamily: 'Roboto', + fontSize: '18px', + fontWeight: '500', + text: '?' + } + }); + + Core.resultLine = new google.maps.Polyline({ + map: Core.resultMap, + geodesic: true, + strokeOpacity: 0, + icons: [{ + icon: { + path: 'M 0,-1 0,1', + strokeOpacity: 1, + strokeWeight: 2, + scale: 2 + }, + offset: '0', + repeat: '10px' + }], + clickable: false, + draggable: false, + editable: false + }); + Core.getNewPosition(); document.getElementById('showGuessButton').onclick = function () { @@ -215,36 +258,20 @@ Core.resultMap.fitBounds(resultBounds); - Core.resultMarkers.real = new google.maps.Marker({ - map: Core.resultMap, - position: Core.realPosition, - clickable: true, - draggable: false - }); - Core.resultMarkers.guess = new google.maps.Marker({ - map: Core.resultMap, - position: guessedPosition, - clickable: false, - draggable: false, - label: { - color: '#ffffff', - fontFamily: 'Roboto', - fontSize: '18px', - fontWeight: '500', - text: '?' - } - }); + Core.resultMarkers.real.setPosition(Core.realPosition); + Core.resultMarkers.guess.setPosition(guessedPosition); - Core.resultMarkers.real.addListener('click', function () { - window.open('https://www.google.com/maps/search/?api=1&query=' + Core.realPosition.lat + ',' + Core.realPosition.lng, '_blank'); - }); + Core.resultLine.setPath([ + Core.realPosition, + guessedPosition + ]); document.getElementById('distance').innerHTML = Util.printDistanceForHuman(distance); var score = Core.calculateScore(distance); var scoreBarProperties = Core.calculateScoreBarProperties(score); - document.getElementById('score').innerHTML = Number.parseFloat(score).toFixed(0); + document.getElementById('score').innerHTML = score; var scoreBar = document.getElementById('scoreBar'); scoreBar.style.backgroundColor = scoreBarProperties.backgroundColor; @@ -254,11 +281,6 @@ document.getElementById('continueButton').onclick = function () { document.getElementById('scoreBar').style.width = null; - Core.resultMarkers.real.setMap(null); - Core.resultMarkers.real = null; - Core.resultMarkers.guess.setMap(null); - Core.resultMarkers.guess = null; - if (Core.adaptGuess) { document.getElementById('guess').classList.remove('adapt'); }