Imported remaing Tracman logic
parent
c30572f0b2
commit
4e76e12243
88
script.js
88
script.js
|
@ -1,5 +1,8 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
/* global navigator $ */
|
/* global navigator googlemaps $ */
|
||||||
|
|
||||||
|
var pano, newLoc;
|
||||||
|
const main = document.getElementsByTagName('main')[0];
|
||||||
|
|
||||||
// Get street view imagery
|
// Get street view imagery
|
||||||
function getStreetViewData(loc,rad,cb) {
|
function getStreetViewData(loc,rad,cb) {
|
||||||
|
@ -29,60 +32,45 @@ function getStreetViewData(loc,rad,cb) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function updateStreetView(loc){
|
||||||
|
|
||||||
|
// Create panorama
|
||||||
|
if ( typeof pano == 'undefined' ){
|
||||||
|
$('main').empty();
|
||||||
|
pano = new googlemaps.StreetViewPanorama(main, {
|
||||||
|
panControl: false,
|
||||||
|
zoomControl: false,
|
||||||
|
addressControl: false,
|
||||||
|
linksControl: false,
|
||||||
|
motionTracking: false,
|
||||||
|
motionTrackingControl: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set panorama
|
||||||
|
getStreetViewData(loc, 2, function(data){
|
||||||
|
pano.setPano(data.location.pano);
|
||||||
|
pano.setPov({
|
||||||
|
pitch: 0,
|
||||||
|
// Point towards users's location from street
|
||||||
|
heading: Math.atan((loc.lon-data.location.latLng.lng())/(loc.lat-data.location.latLng.lat()))*(180/Math.PI)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
// Track GPS location
|
// Track GPS location
|
||||||
if (!navigator.geolocation){ /* Show error */ }
|
if (!navigator.geolocation){ /* Show error */ }
|
||||||
else { navigator.geolocation.watchPosition(
|
else { navigator.geolocation.watchPosition(
|
||||||
|
|
||||||
// Got location
|
// Got location
|
||||||
function(pos) {
|
function(pos) {
|
||||||
|
newLoc = {
|
||||||
// Moving (show image)
|
lat: pos.coords.latitude,
|
||||||
if (loc.spd>1) {
|
lon: pos.coords.longitude,
|
||||||
|
tim: new Date()
|
||||||
// Create image
|
};
|
||||||
const imgElem = document.getElementById('panoImg');
|
updateStreetView(newLoc,10);
|
||||||
if (!imgElem) {
|
|
||||||
pano = undefined;
|
|
||||||
$('#pano').empty();
|
|
||||||
$('#pano').append($('<img>',{
|
|
||||||
alt: 'Street view image',
|
|
||||||
src: 'https://maps.googleapis.com/maps/api/streetview?size=800x800&location='+loc.lat+','+loc.lon+'&fov=90&heading='+loc.dir+'&key={{api}}',
|
|
||||||
id: 'panoImg'
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set image
|
|
||||||
getStreetViewData(loc, 2, function(data){
|
|
||||||
$('#panoImg').attr('src','https://maps.googleapis.com/maps/api/streetview?size='+$('#pano').width()+'x'+$('#pano').height()+'&location='+data.location.latLng.lat()+','+data.location.latLng.lng()+'&fov=90&heading='+loc.dir+'&key='+mapKey);
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// Not moving and pano not set (create panoramic image)
|
|
||||||
else if (pano==null) {
|
|
||||||
|
|
||||||
// Create panorama
|
|
||||||
$('#pano').empty();
|
|
||||||
pano = new googlemaps.StreetViewPanorama(panoElem, {
|
|
||||||
panControl: false,
|
|
||||||
zoomControl: false,
|
|
||||||
addressControl: false,
|
|
||||||
linksControl: false,
|
|
||||||
motionTracking: false,
|
|
||||||
motionTrackingControl: false
|
|
||||||
});
|
|
||||||
|
|
||||||
// Set panorama
|
|
||||||
getStreetViewData(loc, 2, function(data){
|
|
||||||
pano.setPano(data.location.pano);
|
|
||||||
pano.setPov({
|
|
||||||
pitch: 0,
|
|
||||||
// Point towards users's location from street
|
|
||||||
heading: Math.atan((loc.lon-data.location.latLng.lng())/(loc.lat-data.location.latLng.lat()))*(180/Math.PI)
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// Got error
|
// Got error
|
||||||
|
@ -94,4 +82,4 @@ else { navigator.geolocation.watchPosition(
|
||||||
{ enableHighAccuracy:true }
|
{ enableHighAccuracy:true }
|
||||||
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue