1

I am creating an animated time series map using Carto VL and have included a progress bar that updates as the animation progresses. The bar updates, but is not interactive — for instance, a viewer would not be able to use the bar to advance or move backward in the animation. What could I change to make the progress bar interactive?

Here is the code I used to build the progress bar:

Progress: <input type="range" id="js-progress-range" min="-21000" max="0" step="500"></p>

...and here is how I update the progress bar using my animation:

function updateProgress () {
            $progressRange.value = alnusViz.variables.animation.getProgressValue();
}
  setInterval(updateProgress, 100);
1

Here you have an example from CARTO-VL's documentation on animation controls: Interactive progress bar in CartoVL.

Basically, what you need to do is to use setCurrent method to update the animation when your progress bar control is dragged:

$progressRange.addEventListener('change', () => {
  alnusViz.variables.animation.setCurrent($progressRange.value);
});

And to avoid updating it every 100ms, you should use layer's update event:

layer.on('updated', () => {
    $progressRange.value = viz.variables.animation.getProgressValue();
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.