154 lines
3.7 KiB
JavaScript
154 lines
3.7 KiB
JavaScript
'use strict';
|
|
/* global $ navigator google */
|
|
|
|
var newLoc;
|
|
|
|
// Get street view imagery
|
|
function getStreetViewData(loc,rad,cb) {
|
|
|
|
// Ensure that the location hasn't changed (or this is the initial setting)
|
|
if ( newLoc == null || loc.tim===newLoc.tim ) {
|
|
|
|
// Create service if it doesn't exist yet
|
|
if (!sv) { var sv=new google.maps.StreetViewService(); }
|
|
|
|
// Retrieve data
|
|
sv.getPanorama({
|
|
location: {
|
|
lat: loc.lat,
|
|
lng: loc.lon
|
|
},
|
|
radius: rad
|
|
}, function(data,status){ switch (status){
|
|
|
|
// Success
|
|
case google.maps.StreetViewStatus.OK:
|
|
cb(data);
|
|
break;
|
|
|
|
// No results in that radius
|
|
case google.maps.StreetViewStatus.ZERO_RESULTS:
|
|
// Try again with a bigger radius
|
|
getStreetViewData(loc,rad*2,cb);
|
|
break;
|
|
|
|
// Error
|
|
default:
|
|
console.error(new Error(
|
|
'❌️ Street view not available: '+status
|
|
).message);
|
|
|
|
} });
|
|
}
|
|
}
|
|
|
|
// Update street view image
|
|
function updateStreetView(loc){
|
|
|
|
// Calculate bearing between user and position of streetview image
|
|
// https://stackoverflow.com/a/26609687/3006854
|
|
function getBearing(userLoc, imageLoc) {
|
|
return 90-(
|
|
Math.atan2( userLoc.lat-imageLoc.latLng.lat(), userLoc.lon-imageLoc.latLng.lng() )
|
|
* (180/Math.PI) ) % 360;
|
|
}
|
|
|
|
// Get dimensions for sv request (images proportional to element up to 640x640)
|
|
function getDimensions(element) {
|
|
|
|
// Window is smaller than max
|
|
if ( element.width()<640 && element.height()<640 ){
|
|
return element.width()+'x'+element.height();
|
|
}
|
|
|
|
// Width must be made proportional to 640
|
|
else if (element.width()>element.height()) {
|
|
return '640x'+element.height()*640/element.width();
|
|
}
|
|
|
|
// Height must be made proportional to 640
|
|
else {
|
|
return element.width()*640/element.height()+'x640';
|
|
}
|
|
|
|
}
|
|
|
|
// Get streetview data
|
|
getStreetViewData(loc, 2, function(data){
|
|
console.log('https://maps.googleapis.com/maps/api/streetview?'+
|
|
'size='+ getDimensions($(window)) +
|
|
'&location='+ data.location.latLng.lat() +','+ data.location.latLng.lng() +
|
|
'&fov=90' + // Inclination
|
|
// Show direction if moving, point to user if stationary
|
|
'&heading='+ ( (loc.spd>2)? loc.dir: getBearing(loc,data.location) ).toString() +
|
|
'&key=AIzaSyAaDEDFAbk7Iefh9y61wuooDH2kWHRT_k8');
|
|
|
|
// Set image to streetview
|
|
$('main img').attr('src','https://maps.googleapis.com/maps/api/streetview?'+
|
|
'size='+ $('main img').width() +'x'+ $('main img').height() +
|
|
'&location='+ data.location.latLng.lat() +','+ data.location.latLng.lng() +
|
|
'&fov=90' + // Inclination
|
|
// Show direction if moving, point to user if stationary
|
|
'&heading='+ ( (loc.spd>2)? loc.dir: getBearing(loc,data.location) ).toString() +
|
|
'&key=AIzaSyAaDEDFAbk7Iefh9y61wuooDH2kWHRT_k8'
|
|
);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
// Check for geolocation
|
|
if (!navigator.geolocation){
|
|
alert("Geolocation not available!");
|
|
}
|
|
|
|
// Has geolocation
|
|
else {
|
|
|
|
// Track geolocation
|
|
navigator.geolocation.watchPosition(
|
|
|
|
// Got location
|
|
function(pos) {
|
|
newLoc = {
|
|
lat: pos.coords.latitude,
|
|
lon: pos.coords.longitude,
|
|
spd: pos.coords.speed,
|
|
dir: pos.coords.heading,
|
|
tim: new Date()
|
|
};
|
|
updateStreetView(newLoc,10);
|
|
},
|
|
|
|
// Got error
|
|
function(err) {
|
|
console.error(err.message);
|
|
|
|
// Permission denied
|
|
if (err.code==1) {
|
|
alert("You can't use this app without granting permission to access your location");
|
|
}
|
|
|
|
// Location not available
|
|
else if (err.code==2) {
|
|
alert("Location data not available.");
|
|
}
|
|
|
|
// Timeout
|
|
else if (err.code==3) {
|
|
alert("Timed out trying to determine location.");
|
|
}
|
|
|
|
// Other error
|
|
else {
|
|
alert("An unknown error occured while trying to determine location.");
|
|
}
|
|
|
|
},
|
|
|
|
// Options
|
|
{ enableHighAccuracy:true }
|
|
|
|
);
|
|
}
|