diff --git a/includes/images/car.png b/includes/images/car.png index c248d7d..90022d0 100644 Binary files a/includes/images/car.png and b/includes/images/car.png differ diff --git a/includes/images/car3x.png b/includes/images/car3x.png new file mode 100644 index 0000000..b83a5bf Binary files /dev/null and b/includes/images/car3x.png differ diff --git a/src/js/app.js b/src/js/app.js index 91f56a6..ecb422c 100644 --- a/src/js/app.js +++ b/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('myCtrl', 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('myCtrl', 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('myCtrl', 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('myCtrl', 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('myCtrl', 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('myCtrl', 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 -- libgit2 0.21.0