parent
35c749bea4
commit
c0ad64cbe5
@ -1,17 +1,92 @@
|
||||
Math.deg2rad = function (deg) {
|
||||
return deg * (this.PI / 180.0);
|
||||
(function () {
|
||||
var Core = {
|
||||
MAX_SCORE: 1000,
|
||||
|
||||
realPosition: null,
|
||||
panorama: null,
|
||||
guessMap: null,
|
||||
guessMarker: null,
|
||||
resultMap: null,
|
||||
resultMarkers: { guess: null, real: null },
|
||||
googleLink: null,
|
||||
|
||||
getNewPosition: function () {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.responseType = 'json';
|
||||
xhr.onreadystatechange = function () {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
Core.realPosition = this.response.position;
|
||||
|
||||
var sv = new google.maps.StreetViewService();
|
||||
sv.getPanorama({ location: this.response.position, preference: google.maps.StreetViewPreference.NEAREST }, Core.loadPano);
|
||||
}
|
||||
};
|
||||
xhr.open('GET', 'getNewPosition.json', true);
|
||||
xhr.send();
|
||||
},
|
||||
|
||||
loadPano: function (data, status) {
|
||||
if (status !== google.maps.StreetViewStatus.OK) {
|
||||
Core.getNewPosition();
|
||||
return;
|
||||
}
|
||||
|
||||
Core.panorama.setPov({ heading: 0, pitch: 0, zoom: 1 });
|
||||
Core.panorama.setPano(data.location.pano);
|
||||
},
|
||||
|
||||
calculateScore: function (distance) {
|
||||
var goodness = 1.0 - distance / Math.sqrt(mapArea);
|
||||
|
||||
return Math.pow(Core.MAX_SCORE, goodness);
|
||||
},
|
||||
|
||||
calculateScoreBarProperties: function (score) {
|
||||
var percent = Math.round((score / Core.MAX_SCORE) * 100);
|
||||
|
||||
var color;
|
||||
if (percent >= 90) {
|
||||
color = '#11ca00';
|
||||
} else if (percent >= 10) {
|
||||
color = '#ea9000';
|
||||
} else {
|
||||
color = '#ca1100';
|
||||
}
|
||||
|
||||
return { width: percent + '%', backgroundColor: color };
|
||||
},
|
||||
|
||||
rewriteGoogleLink: function () {
|
||||
if (!Core.googleLink) {
|
||||
var anchors = document.getElementById('panorama').getElementsByTagName('a');
|
||||
for (var i = 0; i < anchors.length; i++) {
|
||||
var a = anchors[i];
|
||||
if (a.href.indexOf('maps.google.com/maps') !== -1) {
|
||||
Core.googleLink = a;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(function () {
|
||||
Core.googleLink.title = 'Google Maps'
|
||||
Core.googleLink.href = 'https://maps.google.com/maps'
|
||||
}, 1);
|
||||
}
|
||||
};
|
||||
|
||||
var Util = {
|
||||
EARTH_RADIUS_IN_METER: 6371000,
|
||||
|
||||
MAX_SCORE: 1000,
|
||||
deg2rad: function (deg) {
|
||||
return deg * (Math.PI / 180.0);
|
||||
},
|
||||
|
||||
calculateDistance: function (position1, position2) {
|
||||
var lat1 = Math.deg2rad(position1.lat);
|
||||
var lng1 = Math.deg2rad(position1.lng);
|
||||
var lat2 = Math.deg2rad(position2.lat);
|
||||
var lng2 = Math.deg2rad(position2.lng);
|
||||
var lat1 = Util.deg2rad(position1.lat);
|
||||
var lng1 = Util.deg2rad(position1.lng);
|
||||
var lat2 = Util.deg2rad(position2.lat);
|
||||
var lng2 = Util.deg2rad(position2.lng);
|
||||
|
||||
var angleCos = Math.cos(lat1) * Math.cos(lat2) * Math.cos(lng2 - lng1) +
|
||||
Math.sin(lat1) * Math.sin(lat2);
|
||||
@ -35,75 +110,25 @@ var Util = {
|
||||
} else {
|
||||
return Number.parseFloat(distance / 1000).toFixed(0) + ' km';
|
||||
}
|
||||
},
|
||||
|
||||
calculateScore: function (distance) {
|
||||
var goodness = 1.0 - distance / Math.sqrt(mapArea);
|
||||
|
||||
return Math.pow(this.MAX_SCORE, goodness);
|
||||
},
|
||||
|
||||
calculateScoreBarProperties: function (score) {
|
||||
var percent = Math.round((score / this.MAX_SCORE) * 100);
|
||||
|
||||
var color;
|
||||
if (percent >= 90) {
|
||||
color = '#11ca00';
|
||||
} else if (percent >= 10) {
|
||||
color = '#ea9000';
|
||||
} else {
|
||||
color = '#ca1100';
|
||||
}
|
||||
|
||||
return { width: percent + '%', backgroundColor: color };
|
||||
}
|
||||
};
|
||||
|
||||
var MapManipulator = {
|
||||
rewriteGoogleLink: function () {
|
||||
if (!googleLink) {
|
||||
var anchors = document.getElementById('panorama').getElementsByTagName('a');
|
||||
for (var i = 0; i < anchors.length; i++) {
|
||||
var a = anchors[i];
|
||||
if (a.href.indexOf('maps.google.com/maps') !== -1) {
|
||||
googleLink = a;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(function () {
|
||||
googleLink.title = 'Google Maps'
|
||||
googleLink.href = 'https://maps.google.com/maps'
|
||||
}, 1);
|
||||
}
|
||||
};
|
||||
|
||||
var realPosition;
|
||||
var panorama;
|
||||
var guessMap;
|
||||
var guessMarker;
|
||||
var resultMap;
|
||||
var resultMarkers = { guess: null, real: null };
|
||||
var googleLink;
|
||||
|
||||
function initialize() {
|
||||
guessMap = new google.maps.Map(document.getElementById('guessMap'), {
|
||||
Core.guessMap = new google.maps.Map(document.getElementById('guessMap'), {
|
||||
disableDefaultUI: true,
|
||||
clickableIcons: false,
|
||||
draggableCursor: 'crosshair'
|
||||
});
|
||||
|
||||
guessMap.fitBounds(guessMapBounds);
|
||||
Core.guessMap.fitBounds(guessMapBounds);
|
||||
|
||||
guessMap.addListener('click', function (e) {
|
||||
if (guessMarker) {
|
||||
guessMarker.setPosition(e.latLng);
|
||||
Core.guessMap.addListener('click', function (e) {
|
||||
if (Core.guessMarker) {
|
||||
Core.guessMarker.setPosition(e.latLng);
|
||||
return;
|
||||
}
|
||||
|
||||
guessMarker = new google.maps.Marker({
|
||||
map: guessMap,
|
||||
Core.guessMarker = new google.maps.Marker({
|
||||
map: Core.guessMap,
|
||||
position: e.latLng,
|
||||
clickable: false,
|
||||
draggable: true,
|
||||
@ -119,83 +144,57 @@ function initialize() {
|
||||
document.getElementById('guessButton').disabled = false;
|
||||
});
|
||||
|
||||
panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), {
|
||||
Core.panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), {
|
||||
disableDefaultUI: true,
|
||||
linksControl: true,
|
||||
showRoadLabels: false
|
||||
});
|
||||
|
||||
panorama.addListener('position_changed', function () {
|
||||
MapManipulator.rewriteGoogleLink();
|
||||
Core.panorama.addListener('position_changed', function () {
|
||||
Core.rewriteGoogleLink();
|
||||
});
|
||||
|
||||
panorama.addListener('pov_changed', function () {
|
||||
MapManipulator.rewriteGoogleLink();
|
||||
Core.panorama.addListener('pov_changed', function () {
|
||||
Core.rewriteGoogleLink();
|
||||
});
|
||||
|
||||
resultMap = new google.maps.Map(document.getElementById('resultMap'), {
|
||||
Core.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.setPov({heading: 0, pitch: 0, zoom: 1});
|
||||
panorama.setPano(data.location.pano);
|
||||
}
|
||||
Core.getNewPosition();
|
||||
|
||||
document.getElementById('guessButton').onclick = function () {
|
||||
if (!guessMarker) {
|
||||
if (!Core.guessMarker) {
|
||||
return;
|
||||
}
|
||||
|
||||
var guessedPosition = guessMarker.getPosition();
|
||||
var guessedPosition = Core.guessMarker.getPosition();
|
||||
|
||||
this.disabled = true;
|
||||
guessMarker.setMap(null);
|
||||
guessMarker = null;
|
||||
Core.guessMarker.setMap(null);
|
||||
Core.guessMarker = null;
|
||||
|
||||
var distance = Util.calculateDistance(realPosition, { lat: guessedPosition.lat(), lng: guessedPosition.lng() });
|
||||
var distance = Util.calculateDistance(Core.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(Core.realPosition);
|
||||
resultBounds.extend(guessedPosition);
|
||||
|
||||
resultMap.fitBounds(resultBounds);
|
||||
Core.resultMap.fitBounds(resultBounds);
|
||||
|
||||
resultMarkers.real = new google.maps.Marker({
|
||||
map: resultMap,
|
||||
position: realPosition,
|
||||
Core.resultMarkers.real = new google.maps.Marker({
|
||||
map: Core.resultMap,
|
||||
position: Core.realPosition,
|
||||
clickable: true,
|
||||
draggable: false
|
||||
});
|
||||
resultMarkers.guess = new google.maps.Marker({
|
||||
map: resultMap,
|
||||
Core.resultMarkers.guess = new google.maps.Marker({
|
||||
map: Core.resultMap,
|
||||
position: guessedPosition,
|
||||
clickable: false,
|
||||
draggable: false,
|
||||
@ -208,14 +207,14 @@ document.getElementById('guessButton').onclick = function () {
|
||||
}
|
||||
});
|
||||
|
||||
resultMarkers.real.addListener('click', function () {
|
||||
window.open('https://www.google.com/maps/search/?api=1&query=' + realPosition.lat + ',' + realPosition.lng, '_blank');
|
||||
Core.resultMarkers.real.addListener('click', function () {
|
||||
window.open('https://www.google.com/maps/search/?api=1&query=' + Core.realPosition.lat + ',' + Core.realPosition.lng, '_blank');
|
||||
});
|
||||
|
||||
document.getElementById('distance').innerHTML = Util.printDistanceForHuman(distance);
|
||||
|
||||
var score = Util.calculateScore(distance);
|
||||
var scoreBarProperties = Util.calculateScoreBarProperties(score);
|
||||
var score = Core.calculateScore(distance);
|
||||
var scoreBarProperties = Core.calculateScoreBarProperties(score);
|
||||
|
||||
document.getElementById('score').innerHTML = Number.parseFloat(score).toFixed(0);
|
||||
|
||||
@ -227,15 +226,16 @@ document.getElementById('guessButton').onclick = function () {
|
||||
document.getElementById('continueButton').onclick = function () {
|
||||
document.getElementById('scoreBar').style.width = '0';
|
||||
|
||||
resultMarkers.real.setMap(null);
|
||||
resultMarkers.real = null;
|
||||
resultMarkers.guess.setMap(null);
|
||||
resultMarkers.guess = null;
|
||||
Core.resultMarkers.real.setMap(null);
|
||||
Core.resultMarkers.real = null;
|
||||
Core.resultMarkers.guess.setMap(null);
|
||||
Core.resultMarkers.guess = null;
|
||||
|
||||
document.getElementById('guess').style.visibility = 'visible';
|
||||
document.getElementById('result').style.visibility = 'hidden';
|
||||
|
||||
guessMap.fitBounds(guessMapBounds);
|
||||
Core.guessMap.fitBounds(guessMapBounds);
|
||||
|
||||
getNewPosition();
|
||||
Core.getNewPosition();
|
||||
}
|
||||
})();
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
var mapArea = <?= $bounds->calculateApproximateArea() ?>;
|
||||
var guessMapBounds = <?= $bounds->toJson() ?>;
|
||||
</script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>"></script>
|
||||
<script src="static/js/mapguesser.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>&callback=initialize"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user