From 5b41688684b37ff26df324690c46f55111328af9 Mon Sep 17 00:00:00 2001
From: sean wills <swills044@gmail.com>
Date: Sat, 21 Jul 2018 12:28:58 +0100
Subject: [PATCH] Move and rotate

---
 index.html    |  4 ++--
 src/js/app.js | 66 ++++++++++++++++++++++++++++++++++--------------------------------
 2 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/index.html b/index.html
index fbe76d9..57a176b 100644
--- a/index.html
+++ b/index.html
@@ -38,9 +38,9 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/marker-animate-unobtrusive/0.2.8/vendor/markerAnimate.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/marker-animate-unobtrusive/0.2.8/SlidingMarker.min.js"></script>
-    <script>
+    <!-- <script>
         SlidingMarker.initializeGlobally();
-    </script>
+    </script> -->
 
 </body>
 </html>
diff --git a/src/js/app.js b/src/js/app.js
index ecb422c..9545339 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -252,7 +252,7 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval
 
     function follow(overview_path, start, end) {
 
-        var marker = new google.maps.Marker({
+        var marker = new SlidingMarker({
             position: overview_path[0],
             icon: {
                 url: "../includes/images/car3x.png",
@@ -260,47 +260,49 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval
                 anchor: new google.maps.Point(16, 16)
             },
             map: map,
-            optimized: false
+            optimized: false,
+            duration: 0,
+            easing: "linear"
         });
+        // var from;
+        // var to;
+        // var heading;
+        // var arrOfRots = [];
+        // var pre = [0];
+        // var turn;
+        var j = 0;
+
+        //Distances and Measurements
         var from;
         var to;
-        var heading;
-        var arrOfRots = [];
-        var pre = [0];
-        var turn;
-        var c = 0;
-        var i = 1;
-        var j = 1;
+        var MPH = 50; //Or x miles per 60 minutes
 
         function moveDriver() {
-            setTimeout(function() {
-
+                        
+                from = new google.maps.LatLng(overview_path[j].lat(), overview_path[j].lng());
+                to = new google.maps.LatLng(overview_path[j + 1].lat(), overview_path[j + 1].lng());
 
-                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)' });
-                        }
+                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();
+                //Getting Distance to milliseconds
+                var a = google.maps.geometry.spherical.computeDistanceBetween( from, to );//Metres
+                var b = a * 0.000621371; //Miles
+                var c = MPH / b; //Difference 
+                var d = 60 / c; //Work out the minutes based on the difference
+                var e = d * 60000; // Convert to milliseconds
 
+                j++;
 
-                j=1;
-                marker.setPosition(overview_path[i]);
-                i++;
-                if (i < overview_path.length) {
-                    moveDriver();
+                marker.duration = e;
+                marker.setPosition(overview_path[j]);
+                if (j < overview_path.length) {
+                    setTimeout(function(){
+                        moveDriver();
+                    }, e)
                 }
-            }, 1000)
         }
         moveDriver();
 
--
libgit2 0.21.0