Slider for Animation Speed Fails to Function

After creating an application on Google Maps that displays a preview of GPS tracking by animating the GPS co-ordinates within the map, I encountered an issue. The animation speed slider in my application, which is supposed to adjust the speed of the animation upon sliding, is not functioning properly.

Does anyone have a solution for this problem?

Below is my code along with a Plunker link:

<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

javascriptangularjsgoogle-mapsgoogle-maps-api-3google-polyline

Answer №1

if (!_.isEmpty(items)) {

        var intervalId = getInterval();

        function getInterval() {
          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(intervalId);
            }
          }, (1000 - $scope.speedSlider));
        }

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

      }

Check out the Plunker

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Locating items within a complex array and identifying their corresponding positions

I recently found an interesting code snippet from a different question that allowed me to identify an object. However, I am now faced with the challenge of determining the position of that object within the array. Let's take a look at the example belo ...

javascript

The horizontal bar graph is not aligned properly

My project involves creating a dynamic horizontal bar chart to display data from a CSV file. However, I've encountered an issue where an extra space appears without any corresponding data. I specifically want to only show the top 10 values (students) ...

javascriptd3.js

Undefined backbone loop

What could be causing the item variable to be undefined in this specific Backbone demonstration? var Sort = Backbone.Model.extend({ defaults: { "checked": false, "label": "Primary Sort", "sortByDate": "09-27-2019" } }); var Sorting = Backbone ...

javascriptjquerybackbone.js

What is the best way to adapt a wavetable for compatibility with the `OscillatorNode.setPeriodicWave` function?

I am exploring the use of a custom waveform with a WebAudio OscillatorNode. While I have basic programming skills, I am struggling with the mathematical aspects of audio synthesis. Waveforms are essentially functions, which means I can sample them. Howeve ...

javascriptsignal-processingfftweb-audio-api

What could be causing this JSON file to be displaying in an unusual manner?

I am currently working with a JSON document that has been validated using JSlint. The JSON data is structured like this: [{ "date": "2017-02-10", " action": "Do a thing", "state": "closed", "url": "https:someurl.com" }, .... Additionall ...

javascriptjson

What is the best way to enable autocomplete in AngularJS?

I am working with an object that contains both a name and an ID. I want to implement autocomplete functionality based on the name property. Below is the code snippet that I have tried: //Js file var app=angular.module("myapp",[]); app.controller("controll ...

javascriptjqueryangularjs

Eliminate HTML TAG entries from the input form

My issue is that when I try to type a comma, it does not allow me to do so. How can I add other characters like <, >, /, \, etc? $("#in1").keypress(function (evt) { if (String.fromCharCode(evt.which) == ",") return false; }); < ...

javascriptjqueryhtmlinputkeypress

What is the best way to create exclusive toggle buttons using jQuery?

I am currently working on a project where I need to create functionality for three buttons, each triggering a unique graph effect. The key requirement is that when one button is pressed, the other two should be deactivated along with their corresponding fu ...

javascriptjqueryhtmlcss

Steps to clear input after deselecting all checkboxes:

My issue revolves around 5 checkboxes that I have on my webpage. I want to update the value displayed in an input tag based on the checkbox selection. While everything is working well when a checkbox is checked, the problem arises when all checkboxes are u ...

javascriptjqueryhtmlcheckbox

Guide to retrieving the animation from a VRML file with three.js technology

Is there a way to access the animation within a VRML file using three.js? I've had success with collada files, but I'm not seeing an animation field in the event.content object when it comes to VRML. I've come across this example: https://gi ...

javascriptthree.jsvrml

What is the best way to bind data and populate it during page load in AngularJS?

I'm encountering an issue with binding the results of my drop-down filter ($scope.selectedOperation.OP_NAME) to the web service to ensure that the results are displayed at page load. The error message "Cannot read property OP_NAME of undefined" keeps ...

angularjs

PHP: Communicating Data with JavaScript

What if my PHP script requires some time to complete its operations? How can I keep the client updated on the progress of the operation, such as during a file download where the estimated time and data size need to be communicated? In PHP, calculating all ...

javascriptphpajaxcometdhtml

I am encountering the error message "Utils is not defined" while attempting to generate a chart using chart.js

Attempting to replicate the example provided in chart.js documentation : link to example Unfortunately, I am encountering the error: Uncaught ReferenceError: Utils is not defined Despite its simplicity, I am struggling to identify the issue...! ...

javascriptchart.js

Using both Ajax and a standard submit can be applied to a single form in jQuery

I need to implement a confirm step on one of my pages. Here's what I want to achieve: When the user clicks 'submit', an AJAX request is triggered, which performs the necessary action and then displays a confirmation dialog If the user ...

javascriptjqueryajaxformsjquery-forms-plugin

The event SelectedIndexChanged is not triggering as expected on dropdown lists that are created dynamically

My Telerik RadComboBox triggers Javascript on change to fetch data from the database via AJAX and populate a second dropdown list. I need to fill text boxes based on the selection of the second dropdownlist. The code for the two dropdownlists is as follows ...

javascriptjqueryajaxvb.net

Maintain browser tab state when refreshing using Bootstrap

I have a different HTML page loaded in each tab, and I want to keep the active tab highlighted even after a page refresh using Bootstrap if possible. <div> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#T ...

angularjstwitter-bootstrap-3

Safeguard sub-pages with Passport Local if the user has not logged in

I attempted to follow a tutorial on local authentication with Passport and Express, but I am encountering difficulties in protecting my pages for users who are not logged in. My goal is to redirect them to the login page. I experimented with creating midd ...

javascriptnode.jsexpress

Leveraging AJAX and jQuery for data storage

Need a solution using AJAX and jQuery to save data from one form in another form while preserving the values. The stored information should be hidden from the front end user, with an option for the user to delete the data if desired. Retrieving the stored ...

javascriptphpjqueryajax

The browser window's location is redirected to an empty page

I'm currently working on a website that has a similar layout to this (). https://i.sstatic.net/c7I2y.png My main issue is with the code I've written to detect a click on the linkedin div and redirect accordingly. <script src="https://ajax.g ...

javascriptjqueryhtmlhttp-redirectwindow.location

Showcase a variety of random images in the navigation bar using Javascript and HTML

In order to create a unique experience for mobile users, I have implemented multiple images for my navigation bar menu icon toggle button. These images are stored in an array and a random image is selected each time the page loads using Math.Random. Howeve ...

javascripthtml