Commit 26ced8676b8b0d02793f15a64239e550f41f62de
1 parent
5b416886
Exists in
master
and in
1 other branch
New commit
Showing
4 changed files
with
35 additions
and
120 deletions
Show diff stats
2.64 KB
index.html
| @@ -12,8 +12,8 @@ | @@ -12,8 +12,8 @@ | ||
| 12 | <div class="container-fluid"> | 12 | <div class="container-fluid"> |
| 13 | <div class="left"> | 13 | <div class="left"> |
| 14 | <!-- <span>{{timer}}</span> | 14 | <!-- <span>{{timer}}</span> |
| 15 | - <span>{{timeTaken}}</span> | ||
| 16 | - <span class="add-stop" ng-click="addStop()">add</span> --> | 15 | + <span>{{timeTaken}}</span> --> |
| 16 | + <span class="add-stop" ng-click="addStop()">add</span> | ||
| 17 | <form> | 17 | <form> |
| 18 | <div class="" ng-repeat="stop in stops"> | 18 | <div class="" ng-repeat="stop in stops"> |
| 19 | <!-- lbl="($first)? 'Pickup':($last)?'Drop':'Via'" --> | 19 | <!-- lbl="($first)? 'Pickup':($last)?'Drop':'Via'" --> |
src/js/app.js
| @@ -18,8 +18,6 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval | @@ -18,8 +18,6 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval | ||
| 18 | var directionsService = new google.maps.DirectionsService; | 18 | var directionsService = new google.maps.DirectionsService; |
| 19 | var directionsDisplay = new google.maps.DirectionsRenderer(); | 19 | var directionsDisplay = new google.maps.DirectionsRenderer(); |
| 20 | 20 | ||
| 21 | - | ||
| 22 | - | ||
| 23 | initMap(); | 21 | initMap(); |
| 24 | $scope.timer = 0; | 22 | $scope.timer = 0; |
| 25 | $scope.timeTaken = 0; | 23 | $scope.timeTaken = 0; |
| @@ -213,6 +211,7 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval | @@ -213,6 +211,7 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval | ||
| 213 | 211 | ||
| 214 | 212 | ||
| 215 | if (validstops.length == $scope.stops.length) { | 213 | if (validstops.length == $scope.stops.length) { |
| 214 | + //Set Markers as null **** | ||
| 216 | var waypoints = []; | 215 | var waypoints = []; |
| 217 | if ($scope.stops.length > 2) { | 216 | if ($scope.stops.length > 2) { |
| 218 | waypoints = $scope.stops.slice(1, $scope.stops.length - 1); | 217 | waypoints = $scope.stops.slice(1, $scope.stops.length - 1); |
| @@ -242,16 +241,15 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval | @@ -242,16 +241,15 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval | ||
| 242 | directionsDisplay.setOptions({ | 241 | directionsDisplay.setOptions({ |
| 243 | suppressMarkers: true | 242 | suppressMarkers: true |
| 244 | }); | 243 | }); |
| 245 | - $scope.timer = response.routes[0].overview_path.length; | ||
| 246 | - follow(response.routes[0].overview_path, start, end); | 244 | + //$scope.timer = response.routes[0].overview_path.length; |
| 245 | + follow(response.routes[0].overview_path); | ||
| 247 | } else { | 246 | } else { |
| 248 | console.log("Need more Stops", start, end, waypoints) | 247 | console.log("Need more Stops", start, end, waypoints) |
| 249 | } | 248 | } |
| 250 | }); | 249 | }); |
| 251 | } | 250 | } |
| 252 | 251 | ||
| 253 | - function follow(overview_path, start, end) { | ||
| 254 | - | 252 | + function follow(overview_path) { |
| 255 | var marker = new SlidingMarker({ | 253 | var marker = new SlidingMarker({ |
| 256 | position: overview_path[0], | 254 | position: overview_path[0], |
| 257 | icon: { | 255 | icon: { |
| @@ -264,45 +262,42 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval | @@ -264,45 +262,42 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval | ||
| 264 | duration: 0, | 262 | duration: 0, |
| 265 | easing: "linear" | 263 | easing: "linear" |
| 266 | }); | 264 | }); |
| 267 | - // var from; | ||
| 268 | - // var to; | ||
| 269 | - // var heading; | ||
| 270 | - // var arrOfRots = []; | ||
| 271 | - // var pre = [0]; | ||
| 272 | - // var turn; | ||
| 273 | - var j = 0; | ||
| 274 | - | ||
| 275 | //Distances and Measurements | 265 | //Distances and Measurements |
| 276 | - var from; | ||
| 277 | - var to; | 266 | + var j = 0; |
| 278 | var MPH = 50; //Or x miles per 60 minutes | 267 | var MPH = 50; //Or x miles per 60 minutes |
| 279 | - | 268 | + var rotateTime; |
| 280 | function moveDriver() { | 269 | function moveDriver() { |
| 281 | - | ||
| 282 | - from = new google.maps.LatLng(overview_path[j].lat(), overview_path[j].lng()); | ||
| 283 | - to = new google.maps.LatLng(overview_path[j + 1].lat(), overview_path[j + 1].lng()); | ||
| 284 | - | 270 | + |
| 271 | + map.setZoom(15); | ||
| 272 | + map.panTo(marker.getPosition()); | ||
| 273 | + | ||
| 274 | + var from = new google.maps.LatLng(overview_path[j].lat(), overview_path[j].lng()); | ||
| 275 | + var to = new google.maps.LatLng(overview_path[j + 1].lat(), overview_path[j + 1].lng()); | ||
| 285 | var heading = Math.round(google.maps.geometry.spherical.computeHeading(from, to)); | 276 | var heading = Math.round(google.maps.geometry.spherical.computeHeading(from, to)); |
| 286 | - //if (Math.abs(heading) > 0) { | ||
| 287 | - $('img[src="../includes/images/car3x.png"]').css({ 'transform': 'rotate(' + heading + 'deg)' }); | ||
| 288 | - //} | ||
| 289 | 277 | ||
| 290 | - //Getting Distance to milliseconds | ||
| 291 | - var a = google.maps.geometry.spherical.computeDistanceBetween( from, to );//Metres | ||
| 292 | - var b = a * 0.000621371; //Miles | ||
| 293 | - var c = MPH / b; //Difference | ||
| 294 | - var d = 60 / c; //Work out the minutes based on the difference | ||
| 295 | - var e = d * 60000; // Convert to milliseconds | 278 | + if (Math.abs(heading) > 75 && Math.abs(heading) < 105) { |
| 279 | + console.log('yes', heading); | ||
| 280 | + $('img[src="../includes/images/car3x.png"]').css({ 'transition-duration': '3s' }); | ||
| 281 | + } | ||
| 282 | + | ||
| 283 | + $('img[src="../includes/images/car3x.png"]').css({ 'transform': 'rotate(' + heading + 'deg)' }); | ||
| 284 | + //Getting Distance to milliseconds | ||
| 285 | + var metres = google.maps.geometry.spherical.computeDistanceBetween( from, to );//Metres | ||
| 286 | + var miles = metres * 0.000621371; //Miles | ||
| 287 | + var speed = MPH / miles; //Difference | ||
| 288 | + var speedPerHour = 60 / speed; //Work out the minutes based on the difference | ||
| 289 | + var speedPerMilli = speedPerHour * 60000; // Convert to milliseconds | ||
| 296 | 290 | ||
| 297 | - j++; | 291 | + j++; |
| 298 | 292 | ||
| 299 | - marker.duration = e; | ||
| 300 | - marker.setPosition(overview_path[j]); | ||
| 301 | - if (j < overview_path.length) { | ||
| 302 | - setTimeout(function(){ | ||
| 303 | - moveDriver(); | ||
| 304 | - }, e) | ||
| 305 | - } | 293 | + marker.duration = speedPerMilli; |
| 294 | + marker.setPosition(overview_path[j]); | ||
| 295 | + if (j < overview_path.length) { | ||
| 296 | + setTimeout(function(){ | ||
| 297 | + moveDriver(); | ||
| 298 | + }, speedPerMilli) | ||
| 299 | + } | ||
| 300 | + | ||
| 306 | } | 301 | } |
| 307 | moveDriver(); | 302 | moveDriver(); |
| 308 | 303 |
unused
| @@ -1,80 +0,0 @@ | @@ -1,80 +0,0 @@ | ||
| 1 | -THIS IS CODE THAT HAS BEEN REMOVED | ||
| 2 | - | ||
| 3 | - | ||
| 4 | - | ||
| 5 | - var line = new google.maps.Polyline({ | ||
| 6 | - path: [{lat: response.routes[0].overview_path[0].lat(), lng: response.routes[0].overview_path[0].lng()}, {lat: response.routes[0].overview_path[1].lat(), lng: response.routes[0].overview_path[1].lng()}], | ||
| 7 | - icons: [{ | ||
| 8 | - icon: lineSymbol, | ||
| 9 | - offset: '100%' | ||
| 10 | - }], | ||
| 11 | - map: map | ||
| 12 | - }); | ||
| 13 | - response.routes[0].overview_path.forEach(function(x, i){ | ||
| 14 | - if (i % 2 == 0){ | ||
| 15 | - curvedLine({LatStart: x.lat(), LngStart: x.lng(), LatEnd: response.routes[0].overview_path[i + 2].lat(), LngEnd: response.routes[0].overview_path[i + 2].lng()}) | ||
| 16 | - } | ||
| 17 | - var line = new google.maps.Polyline({ | ||
| 18 | - path: [{lat: x.lat(), lng: x.lng()}, {lat: response.routes[0].overview_path[i + 1].lat(), lng: response.routes[0].overview_path[i + 1].lng()}], | ||
| 19 | - map: map | ||
| 20 | - }); | ||
| 21 | - }) | ||
| 22 | - function animateCircle(line) { | ||
| 23 | - var count = 0; | ||
| 24 | - window.setInterval(function() { | ||
| 25 | - count = (count + 1) % 200; | ||
| 26 | - | ||
| 27 | - var icons = line.get('icons'); | ||
| 28 | - console.log(icons); | ||
| 29 | - icons[0].offset = (count / 2) + '%'; | ||
| 30 | - line.set('icons', icons); | ||
| 31 | - }, 20); | ||
| 32 | - } | ||
| 33 | - animateCircle(line); | ||
| 34 | - | ||
| 35 | - $scope.stops.forEach(function(x) { | ||
| 36 | - try{ | ||
| 37 | - //Car Sensors in concept | ||
| 38 | - if(x.Latitude.toFixed(3) == overview_path[overview_path.length - 1].lat().toFixed(3) && x.Longitude.toFixed(3) == overview_path[overview_path.length - 1].lng().toFixed(3)){ | ||
| 39 | - var m = x.$marker; | ||
| 40 | - m.setMap(null); | ||
| 41 | - } | ||
| 42 | - } | ||
| 43 | - catch(e){ | ||
| 44 | - console.log(e); | ||
| 45 | - var m = x.$marker; | ||
| 46 | - m.setMap(null); | ||
| 47 | - clearInterval($scope.drive); | ||
| 48 | - } | ||
| 49 | - finally{ | ||
| 50 | - console.log('I am alerted regardless of the outcome above') | ||
| 51 | - } | ||
| 52 | - }); | ||
| 53 | - | ||
| 54 | - | ||
| 55 | - function calcDistance(p1, p2) { | ||
| 56 | - return (google.maps.geometry.spherical.computeDistanceBetween(p1, p2) / 1000).toFixed(2); | ||
| 57 | - } | ||
| 58 | - | ||
| 59 | - var p1 = new google.maps.LatLng(overview_path[counter].lat(), overview_path[counter].lng()); | ||
| 60 | - var p2 = new google.maps.LatLng(overview_path[counter + 1].lat(), overview_path[counter + 1].lng()); | ||
| 61 | - var difference = calcDistance(p1, p2); | ||
| 62 | - | ||
| 63 | - | ||
| 64 | - p1 = new google.maps.LatLng(overview_path[counter].lat(), overview_path[counter].lng()); | ||
| 65 | - p2 = new google.maps.LatLng(overview_path[counter + 1].lat(), overview_path[counter + 1].lng()); | ||
| 66 | - | ||
| 67 | - <script src="https://gist.github.com/glebcha/e16abf1fa73d835e9422.js"></script> | ||
| 68 | - | ||
| 69 | - | ||
| 70 | - if (difference < 0.09){ | ||
| 71 | - setTimeout(function(){ | ||
| 72 | - | ||
| 73 | - }, 500) | ||
| 74 | - } else { | ||
| 75 | - setTimeout(function(){ | ||
| 76 | - marker.setPosition(overview_path[counter]); | ||
| 77 | - map.panTo(marker.getPosition()); | ||
| 78 | - counter++; | ||
| 79 | - }, 1000) | ||
| 80 | - } | ||
| 81 | \ No newline at end of file | 0 | \ No newline at end of file |