Commit b2145b0707901335e67ed15f80904953a8fd1df7

Authored by Tarpit Grover
1 parent 01ae2e35
Exists in master and in 1 other branch template

WIP

includes/images/car.png

1.32 KB | W: | H:

1.64 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
includes/images/car3x.png 0 → 100644

2.19 KB

@@ -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