Animation Speed Slider not Working

Question

I have created an application in Google-map which shows a preview of GPS tracking. The preview will be the GPS co-ordinates drawn within the Google-map like an animation.

The application is working fine but the Issue is that , I am having a animation speed increase and decrease slider which will increase and decrease the animation speed upon sliding which is not working properly in my application.

Can anyone please tell me some solution for this

My code is as given below with a Plunker

<div style="width: 880px;">
    200 <slider style="width:400px;" floor="200" ceiling="1000" step="1" ng-model="speedSlider"></slider>{{speedSlider}}
  <div id="map" style="width: 880px; height: 500px; float: left;"></div>
</div>

Plunker

Anatoli · Answer 1 · 2015-02-19T08:00:21.007

1

if (!_.isEmpty(items)) {

        var timerId = getTimeInterval();

        function getTimeInterval() {
          return setInterval(function () {       
            route.getPath().push(new google.maps.LatLng(items[index].lat, items[index].lng));

            moveMarker(map, marker, items[index].lat, items[index].lng);
            markLAT = items[index].lat;
            markLNG = items[index].lng;
            index++;

            if (index == items.length) {
                clearInterval(timerId);
            }
          }, (1000 - $scope.speedSlider));
        }

        $scope.$watch('speedSlider', function(ssss) {
          clearInterval(timerId);
          timerId = getTimeInterval();
        });

      }

Plunker

edited Feb 19 '15 at 08:00

answered Feb 19 '15 at 07:45

Anatoli

712
1
10
21

I've editied the answer and you can check how it works in Plunker. – Anatoli Feb 19 '15 at 08:02
click Run, select user and select more than 800 in slider to see your animation more changed. anyway, you can use above code and change your block of code. Your problem was in initialization of timer. – Anatoli Feb 19 '15 at 09:07

Animation Speed Slider not Working

1 Answers1