Tarpit Grover / Batman Delivers

Download as
Browse Code »

Commit b2145b0707901335e67ed15f80904953a8fd1df7

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

WIP

Showing 3 changed files with 46 additions and 47 deletions   Show diff stats
includes/images/car.png
View file @b2145b0

1.32 KB | W: | H:

1.64 KB | W: | H:

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

2.19 KB
src/js/app.js
  Diff comments   View file @b2145b0
... ... @@ -2,7 +2,7 @@
2 2 var app = angular.module('batmanDelivers', ['ngSanitize', 'ui.select']);
3 3  
4 4 app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval) {
5   -
  5 +
6 6 var map;
7 7 $scope.stops = [{
8 8 "Description": "Start typing to search...",
... ... @@ -14,11 +14,11 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval
14 14 valid: false,
15 15 id: 2
16 16 }]
17   -
  17 +
18 18 var directionsService = new google.maps.DirectionsService;
19 19 var directionsDisplay = new google.maps.DirectionsRenderer();
20 20  
21   -
  21 +
22 22  
23 23 initMap();
24 24 $scope.timer = 0;
... ... @@ -31,7 +31,7 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval
31 31 lng: -0.024640
32 32 },
33 33 mapTypeId: 'roadmap',
34   - zoom: 11,
  34 + zoom: 14,
35 35 mapTypeControl: false,
36 36 styles: [{
37 37 "featureType": "all",
... ... @@ -184,11 +184,11 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval
184 184 }
185 185 ]
186 186 }
187   - ]
  187 + ]
188 188 });
189 189 $rootScope.map = map;
190 190 }
191   - $scope.addStop = function () {
  191 + $scope.addStop = function() {
192 192 $scope.stops.push({
193 193 Description: "Start typing to search..."
194 194 })
... ... @@ -221,16 +221,17 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval
221 221  
222 222 }
223 223 });
  224 +
224 225 function calcRoute(start, end, waypoints) {
225 226 console.log(waypoints)
226 227 directionsService.route({
227 228 origin: start.$marker.getPosition(),
228 229 destination: end.$marker.getPosition(),
229   - waypoints: waypoints.map(function(x){
  230 + waypoints: waypoints.map(function(x) {
230 231 return {
231 232 location: x.Description,
232 233 stopover: true
233   - };
  234 + };
234 235 }),
235 236 travelMode: 'DRIVING',
236 237 provideRouteAlternatives: false
... ... @@ -248,13 +249,15 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval
248 249 }
249 250 });
250 251 }
  252 +
251 253 function follow(overview_path, start, end) {
252 254  
253 255 var marker = new google.maps.Marker({
254 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 262 map: map,
260 263 optimized: false
... ... @@ -262,49 +265,45 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval
262 265 var from;
263 266 var to;
264 267 var heading;
265   - var arrOfRots = [];
  268 + var arrOfRots = [];
266 269 var pre = [0];
267 270 var turn;
268 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 310 \ No newline at end of file
... ...