WIP

Tarpit Grover
1 parent 01ae2e35
Showing 3 changed files with 46 additions and 47 deletions Show diff stats
includes/images/car.png
includes/images/car3x.png
src/js/app.js
@@ -2,7 +2,7 @@
 var app = angular.module('batmanDelivers', ['ngSanitize', 'ui.select']);
 app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval) {
-    
+
     var map;
     $scope.stops = [{
         "Description": "Start typing to search...",
@@ -14,11 +14,11 @@ app.controller(&#39;myCtrl&#39;, function($scope, $http, $timeout, $rootScope, $interval
         valid: false,
         id: 2
     }]
-    
+
     var directionsService = new google.maps.DirectionsService;
     var directionsDisplay = new google.maps.DirectionsRenderer();
-    
+
     initMap();
     $scope.timer = 0;
@@ -31,7 +31,7 @@ app.controller(&#39;myCtrl&#39;, function($scope, $http, $timeout, $rootScope, $interval
                 lng: -0.024640
             },
             mapTypeId: 'roadmap',
-            zoom: 11,
+            zoom: 14,
             mapTypeControl: false,
             styles: [{
                     "featureType": "all",
@@ -184,11 +184,11 @@ app.controller(&#39;myCtrl&#39;, function($scope, $http, $timeout, $rootScope, $interval
                         }
                     ]
                 }
-            ] 
+            ]
         });
         $rootScope.map = map;
     }
-    $scope.addStop = function () {
+    $scope.addStop = function() {
         $scope.stops.push({
             Description: "Start typing to search..."
         })
@@ -221,16 +221,17 @@ app.controller(&#39;myCtrl&#39;, function($scope, $http, $timeout, $rootScope, $interval
         }
     });
+
     function calcRoute(start, end, waypoints) {
         console.log(waypoints)
         directionsService.route({
             origin: start.$marker.getPosition(),
             destination: end.$marker.getPosition(),
-            waypoints: waypoints.map(function(x){
+            waypoints: waypoints.map(function(x) {
                 return {
                     location: x.Description,
                     stopover: true
-                  };
+                };
             }),
             travelMode: 'DRIVING',
             provideRouteAlternatives: false
@@ -248,13 +249,15 @@ app.controller(&#39;myCtrl&#39;, function($scope, $http, $timeout, $rootScope, $interval
             }
         });
     }
+
     function follow(overview_path, start, end) {
         var marker = new google.maps.Marker({
             position: overview_path[0],
-            icon: {   
-                url: "../includes/images/car.svg",
-                rotation: 0  
+            icon: {
+                url: "../includes/images/car3x.png",
+                scaledSize: new google.maps.Size(32, 32),
+                anchor: new google.maps.Point(16, 16)
             },
             map: map,
             optimized: false
@@ -262,49 +265,45 @@ app.controller(&#39;myCtrl&#39;, function($scope, $http, $timeout, $rootScope, $interval
         var from;
         var to;
         var heading;
-        var arrOfRots  = [];
+        var arrOfRots = [];
         var pre = [0];
         var turn;
         var c = 0;
-        var i = c;
+        var i = 1;
+        var j = 1;
-        //Rotating marker/icon
-        // $('img[src="../includes/images/car.svg"]').css({
-        //     'transform': 'rotate(' + heading + 'deg)'
-        // });
+        function moveDriver() {
+            setTimeout(function() {
-        $interval(function(){
-            //Smooth Movements from turn to turn
-            for(i ; i < overview_path.length; ){
-                i++;
-                from = new google.maps.LatLng(overview_path[c].lat(), overview_path[c].lng());
-                to = new google.maps.LatLng(overview_path[c + i].lat(), overview_path[c + i].lng()); 
-                heading = Math.round(google.maps.geometry.spherical.computeHeading(from, to));
-                pre.push(heading); //Pushing the heading so the next index can compare to it.
-                //arrOfRots.push(heading) These will be used to create the curved polyline.
-                turn = Math.abs(pre[0] - heading);
-                if(turn > 45 && turn < 135) {
-                    c += i;
-                    console.log(turn);
-                    break;
-                } else {
-                    pre.splice(0, 1); //Removes the current previous heading, so a new one can be added.
-                }
-                c += i;
-            }
-            marker.setPosition(overview_path[c]); 
-             //Instead of setPosition draw a curved polyline using the array of rotations;
-        }, 1000)
-        //arrOfRots.push(heading);
-        //$scope.timeTaken++;
-    }
+                function rotateDriver() {
+                    setTimeout(function() {
+                        var from = new google.maps.LatLng(overview_path[j - 1].lat(), overview_path[j - 1].lng());
+                        var to = new google.maps.LatLng(overview_path[j].lat(), overview_path[j].lng());
+                        var heading = Math.round(google.maps.geometry.spherical.computeHeading(from, to));
+                        if (Math.abs(heading) > 0) {
+                            $('img[src="../includes/images/car3x.png"]').css({ 'transform': 'rotate(' + heading + 'deg)' });
+                        }
+
+                        j++;
+                        if (j < 180) {
+                            rotateDriver();
+                        }
+                    }, 500)
+                }
+                rotateDriver();
-	
-     
-});
+                j=1;
+                marker.setPosition(overview_path[i]);
+                i++;
+                if (i < overview_path.length) {
+                    moveDriver();
+                }
+            }, 1000)
+        }
+        moveDriver();
-    
+    }
-    
+});
 \ No newline at end of file