esoko/mapguesser
esoko/mapguesser
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

MAPG-10 query new position with AJAX

Browse Source 
check if pano at position exists
load new pano after guess
This commit is contained in:
Bence Pőcze 2020-05-19 03:25:42 +02:00
parent 9555a43cf9
commit ef95f5b986
1 changed files with 52 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
public/static/js/mapguesser.js
View File

@ -45,26 +45,14 @@ var MapManipulator = {
}
};
var realPosition;
var panorama;
var guessMap;
var guessMarker;
var googleLink;
function initialize() {
panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), {
position: realPosition,
disableDefaultUI: true,
linksControl: true,
showRoadLabels: false
});
panorama.addListener('position_changed', function () {
MapManipulator.rewriteGoogleLink();
});
panorama.addListener('pov_changed', function () {
MapManipulator.rewriteGoogleLink();
});
getNewPosition();
guessMap = new google.maps.Map(document.getElementById('guessMap'), {
disableDefaultUI: true,
@ -90,6 +78,48 @@ function initialize() {
});
}
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
});
panorama.addListener('position_changed', function () {
MapManipulator.rewriteGoogleLink();
});
panorama.addListener('pov_changed', function () {
MapManipulator.rewriteGoogleLink();
});
}
document.getElementById('guessButton').onclick = function () {
if (!guessMarker) {
return;
@ -98,7 +128,13 @@ document.getElementById('guessButton').onclick = function () {
var guessedPosition = guessMarker.getPosition();
var distance = Util.calculateDistance(realPosition, { lat: guessedPosition.lat(), lng: guessedPosition.lng() });
alert('You were ' + distance + 'm close!');
alert('You were ' + (Math.round(distance) / 1000) + ' km close!');
this.blur();
this.disabled = true;
guessMarker.setMap(null);
guessMarker = null;
//TODO: fit to the same size as on init
guessMap.fitBounds(guessMapBounds);
getNewPosition();
}