diff --git a/script.js b/script.js index eeca4fa..ec848e8 100644 --- a/script.js +++ b/script.js @@ -1,5 +1,8 @@ 'use strict'; -/* global navigator $ */ +/* global navigator googlemaps $ */ + +var pano, newLoc; +const main = document.getElementsByTagName('main')[0]; // Get street view imagery 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 if (!navigator.geolocation){ /* Show error */ } else { navigator.geolocation.watchPosition( // Got location function(pos) { - - // Moving (show image) - if (loc.spd>1) { - - // Create image - const imgElem = document.getElementById('panoImg'); - if (!imgElem) { - pano = undefined; - $('#pano').empty(); - $('#pano').append($('',{ - 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) - }); - }); - } - + newLoc = { + lat: pos.coords.latitude, + lon: pos.coords.longitude, + tim: new Date() + }; + updateStreetView(newLoc,10); }, // Got error @@ -94,4 +82,4 @@ else { navigator.geolocation.watchPosition( { enableHighAccuracy:true } ); -} \ No newline at end of file +}