How do I automate view.animate in OpenLayers5?

Question

I have a list of coordinates I want my code to pan through. I can place view.animate and do it once to pan from my current center to the first coordinate but not to keep cycling through the list. Any ideas? I got the idea from this https://openlayers.org/en/latest/examples/animation.html.

var coordinates = [london, moscow, istanbul, rome, bern]; (they have their coordinates)

    var view = new ol.View({
        center: istanbul,
        zoom: 4
    })
    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })],
        loadTilesWhileAnimating: true,
        view: view
    });
    coordinates.forEach(function(element) {

        setTimeout(view.animate({
            center: element,
            duration: 2000,
        }), 10000);
    });

score 0 · Answer 1 · answered Jul 03 '19 at 17:50

You have a basic error in that setTimeout will be called repeatedly in quick succession, with each one calling view.animate after a 10000 ms delay - the map will become overloaded with animate requests.

Here is a working example using setInterval which ensures that panToNextlocation is called only once per 3000ms

https://stackblitz.com/edit/ol-animation-between-points

How do I automate view.animate in OpenLayers5?

1 Answers1