Commit b2145b0707901335e67ed15f80904953a8fd1df7
1 parent
01ae2e35
Exists in
master
and in
1 other branch
WIP
Showing
3 changed files
with
46 additions
and
47 deletions
Show diff stats
includes/images/car.png
2.19 KB
src/js/app.js
@@ -2,7 +2,7 @@ | @@ -2,7 +2,7 @@ | ||
2 | var app = angular.module('batmanDelivers', ['ngSanitize', 'ui.select']); | 2 | var app = angular.module('batmanDelivers', ['ngSanitize', 'ui.select']); |
3 | 3 | ||
4 | app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval) { | 4 | app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval) { |
5 | - | 5 | + |
6 | var map; | 6 | var map; |
7 | $scope.stops = [{ | 7 | $scope.stops = [{ |
8 | "Description": "Start typing to search...", | 8 | "Description": "Start typing to search...", |
@@ -14,11 +14,11 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval | @@ -14,11 +14,11 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval | ||
14 | valid: false, | 14 | valid: false, |
15 | id: 2 | 15 | id: 2 |
16 | }] | 16 | }] |
17 | - | 17 | + |
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 | - | 21 | + |
22 | 22 | ||
23 | initMap(); | 23 | initMap(); |
24 | $scope.timer = 0; | 24 | $scope.timer = 0; |
@@ -31,7 +31,7 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval | @@ -31,7 +31,7 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval | ||
31 | lng: -0.024640 | 31 | lng: -0.024640 |
32 | }, | 32 | }, |
33 | mapTypeId: 'roadmap', | 33 | mapTypeId: 'roadmap', |
34 | - zoom: 11, | 34 | + zoom: 14, |
35 | mapTypeControl: false, | 35 | mapTypeControl: false, |
36 | styles: [{ | 36 | styles: [{ |
37 | "featureType": "all", | 37 | "featureType": "all", |
@@ -184,11 +184,11 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval | @@ -184,11 +184,11 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval | ||
184 | } | 184 | } |
185 | ] | 185 | ] |
186 | } | 186 | } |
187 | - ] | 187 | + ] |
188 | }); | 188 | }); |
189 | $rootScope.map = map; | 189 | $rootScope.map = map; |
190 | } | 190 | } |
191 | - $scope.addStop = function () { | 191 | + $scope.addStop = function() { |
192 | $scope.stops.push({ | 192 | $scope.stops.push({ |
193 | Description: "Start typing to search..." | 193 | Description: "Start typing to search..." |
194 | }) | 194 | }) |
@@ -221,16 +221,17 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval | @@ -221,16 +221,17 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval | ||
221 | 221 | ||
222 | } | 222 | } |
223 | }); | 223 | }); |
224 | + | ||
224 | function calcRoute(start, end, waypoints) { | 225 | function calcRoute(start, end, waypoints) { |
225 | console.log(waypoints) | 226 | console.log(waypoints) |
226 | directionsService.route({ | 227 | directionsService.route({ |
227 | origin: start.$marker.getPosition(), | 228 | origin: start.$marker.getPosition(), |
228 | destination: end.$marker.getPosition(), | 229 | destination: end.$marker.getPosition(), |
229 | - waypoints: waypoints.map(function(x){ | 230 | + waypoints: waypoints.map(function(x) { |
230 | return { | 231 | return { |
231 | location: x.Description, | 232 | location: x.Description, |
232 | stopover: true | 233 | stopover: true |
233 | - }; | 234 | + }; |
234 | }), | 235 | }), |
235 | travelMode: 'DRIVING', | 236 | travelMode: 'DRIVING', |
236 | provideRouteAlternatives: false | 237 | provideRouteAlternatives: false |
@@ -248,13 +249,15 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval | @@ -248,13 +249,15 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval | ||
248 | } | 249 | } |
249 | }); | 250 | }); |
250 | } | 251 | } |
252 | + | ||
251 | function follow(overview_path, start, end) { | 253 | function follow(overview_path, start, end) { |
252 | 254 | ||
253 | var marker = new google.maps.Marker({ | 255 | var marker = new google.maps.Marker({ |
254 | position: overview_path[0], | 256 | position: overview_path[0], |
255 | - icon: { | ||
256 | - url: "../includes/images/car.svg", | ||
257 | - rotation: 0 | 257 | + icon: { |
258 | + url: "../includes/images/car3x.png", | ||
259 | + scaledSize: new google.maps.Size(32, 32), | ||
260 | + anchor: new google.maps.Point(16, 16) | ||
258 | }, | 261 | }, |
259 | map: map, | 262 | map: map, |
260 | optimized: false | 263 | optimized: false |
@@ -262,49 +265,45 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval | @@ -262,49 +265,45 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval | ||
262 | var from; | 265 | var from; |
263 | var to; | 266 | var to; |
264 | var heading; | 267 | var heading; |
265 | - var arrOfRots = []; | 268 | + var arrOfRots = []; |
266 | var pre = [0]; | 269 | var pre = [0]; |
267 | var turn; | 270 | var turn; |
268 | var c = 0; | 271 | var c = 0; |
269 | - var i = c; | 272 | + var i = 1; |
273 | + var j = 1; | ||
270 | 274 | ||
271 | - //Rotating marker/icon | ||
272 | - // $('img[src="../includes/images/car.svg"]').css({ | ||
273 | - // 'transform': 'rotate(' + heading + 'deg)' | ||
274 | - // }); | 275 | + function moveDriver() { |
276 | + setTimeout(function() { | ||
275 | 277 | ||
276 | - $interval(function(){ | ||
277 | - //Smooth Movements from turn to turn | ||
278 | - for(i ; i < overview_path.length; ){ | ||
279 | - i++; | ||
280 | - from = new google.maps.LatLng(overview_path[c].lat(), overview_path[c].lng()); | ||
281 | - to = new google.maps.LatLng(overview_path[c + i].lat(), overview_path[c + i].lng()); | ||
282 | - heading = Math.round(google.maps.geometry.spherical.computeHeading(from, to)); | ||
283 | - pre.push(heading); //Pushing the heading so the next index can compare to it. | ||
284 | - //arrOfRots.push(heading) These will be used to create the curved polyline. | ||
285 | - turn = Math.abs(pre[0] - heading); | ||
286 | - if(turn > 45 && turn < 135) { | ||
287 | - c += i; | ||
288 | - console.log(turn); | ||
289 | - break; | ||
290 | - } else { | ||
291 | - pre.splice(0, 1); //Removes the current previous heading, so a new one can be added. | ||
292 | - } | ||
293 | - c += i; | ||
294 | - } | ||
295 | - marker.setPosition(overview_path[c]); | ||
296 | - //Instead of setPosition draw a curved polyline using the array of rotations; | ||
297 | - }, 1000) | ||
298 | - //arrOfRots.push(heading); | ||
299 | - //$scope.timeTaken++; | ||
300 | 278 | ||
301 | - } | 279 | + function rotateDriver() { |
280 | + setTimeout(function() { | ||
281 | + var from = new google.maps.LatLng(overview_path[j - 1].lat(), overview_path[j - 1].lng()); | ||
282 | + var to = new google.maps.LatLng(overview_path[j].lat(), overview_path[j].lng()); | ||
283 | + var heading = Math.round(google.maps.geometry.spherical.computeHeading(from, to)); | ||
284 | + if (Math.abs(heading) > 0) { | ||
285 | + $('img[src="../includes/images/car3x.png"]').css({ 'transform': 'rotate(' + heading + 'deg)' }); | ||
286 | + } | ||
287 | + | ||
288 | + j++; | ||
289 | + if (j < 180) { | ||
290 | + rotateDriver(); | ||
291 | + } | ||
292 | + }, 500) | ||
293 | + } | ||
294 | + rotateDriver(); | ||
302 | 295 | ||
303 | - | ||
304 | - | ||
305 | -}); | ||
306 | 296 | ||
297 | + j=1; | ||
298 | + marker.setPosition(overview_path[i]); | ||
299 | + i++; | ||
300 | + if (i < overview_path.length) { | ||
301 | + moveDriver(); | ||
302 | + } | ||
303 | + }, 1000) | ||
304 | + } | ||
305 | + moveDriver(); | ||
307 | 306 | ||
308 | - | 307 | + } |
309 | 308 | ||
310 | - | 309 | +}); |
311 | \ No newline at end of file | 310 | \ No newline at end of file |