Openlayer3 - Avoid polyline from disappearing during animation

Question

I have an openlayer3 implementation in a Flask Application.

I am showing an animation of a sailing ship, and have implemented a function to follow the ship on it's route. However if I zoom in on the ship, the polyline that the ship is sailing on will disappear if it was out of view when the ship started sailing. Does anyone know how to fix this?

I have created this jsfiddle illustrating the problem. Click the follow ship check button and zoom in so that not the entire polyline is showing. Start the animation and watch the polyline disappear as the ship sails.

I looked into using renderBuffer, but in my case I have a huge polyline consisting of 190.000 datapoints, and I don't know the pixel size of such a line.

var vectorLayer1 = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [routeFeature1, geoMarker1, startMarker1, endMarker1],
        renderBuffer: 10000000
    }),
    style: function(feature) {
        // hide geoMarker if animation is active
        if (animating1 && feature.get('type') === 'geoMarker') {
            return null;
        }
        return styles1[feature.get('type')];
    }
});

And that doesn't solve my problem.

I am using the following line to follow the ship on it's route and I wondered if I could "redraw" the line on every move:

map1.getView().setCenter(routeCoords1[index]);

Answer 1

The problem seems to be this line: map1.beforeRender(pan); Without calling beforeRender the problem dose not come up. Note that ol.Map#beforeRender is deprecated as well as ol.animation#pan.