Drawing animated openlayers linestring path

javascript, jquery, openlayers

Solution

You can animate it by drawing only one part of the line at a time. Here is one way you could do it:

function drawAnimatedLine(startPt, endPt, style, steps, time, fn) {
    var directionX = (endPt.x - startPt.x) / steps;
    var directionY = (endPt.y - startPt.y) / steps;
    var i = 0;
    var prevLayer;
    var ivlDraw = setInterval(function () {
        if (i > steps) {
            clearInterval(ivlDraw);
            if (fn) fn();
            return;
        }
        var newEndPt = new OpenLayers.Geometry.Point(startPt.x + i * directionX, startPt.y + i * directionY);
        var line = new OpenLayers.Geometry.LineString([startPt, newEndPt]);
        var fea = new OpenLayers.Feature.Vector(line, {}, style);
        var vec = new OpenLayers.Layer.Vector();
        vec.addFeatures([fea]);
        map.addLayer(vec);
        if(prevLayer) map.removeLayer(prevLayer);
        prevLayer = vec;
        i++;
    }, time / steps);
}

The `time` argument specifies how long you want the animation to last (in milliseconds), and the `steps` specifies how many steps you want to divide the animation into. `fn` is a callback that will be executed when the animation is complete.

Here is a jsFiddle demo that demonstrates this.

Problem

I have seen an impressive mapping example on http://jerusalem.com/map#!/tour/the_way_of_the_cross/location/abu_jaafar, Does anybody how a similar animation on the drawn path of the points can done using openlayers? The following fiddle shows the linestrings http://jsfiddle.net/pwuVz/58/ but I need is to be able to animate the line string itself so that the string is not directly drawn. ``` var map = new OpenLayers.Map( 'map', {theme:null, controls:[new OpenLayers.Control.Navigation()]} ); layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} ); map.addLayer(layer); map.setCenter([3, 49], 5); var startPt=new OpenLayers.Geometry.Point( 2, 45); var endPt=new OpenLayers.Geometry.Point(7,55); //make the line: var line=new OpenLayers.Geometry.LineString([startPt, endPt]); //style var style={strokeColor:"#0500bd", strokeWidth:15, strokeOpacity: 0.5, strokeColor: '#0000ff'}; //make vector var fea=new OpenLayers.Feature.Vector(line, {}, style); //make vectorLayer var vec= new OpenLayers.Layer.Vector(); //add the feature vec.addFeatures([fea]); //add to map map.addLayer(vec); setTimeout(function() { var startPt=new OpenLayers.Geometry.Point( 7, 55); var endPt=new OpenLayers.Geometry.Point(13,52); //make the line: var line=new OpenLayers.Geometry.LineString([startPt, endPt]); //style var style={strokeColor:"#0500bd", strokeWidth:15, strokeOpacity: 0.5, strokeColor: '#0000ff'}; //make vector var fea=new OpenLayers.Feature.Vector(line, {}, style); //make vectorLayer var vec= new OpenLayers.Layer.Vector(); //add the feature vec.addFeatures([fea]); //add to map map.addLayer(vec); }, 2000); ```

Original source