OpenLayers 3 Flight Animation

flight-animation-1.js

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
        source: new ol.source.Stamen({layer: 'toner'})
    })
  ],
  renderer: 'canvas',
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

flight-animation-2.js

var flightsSource = new ol.source.Vector();

var url = 'data/openflights/flights.json';
$.ajax({url: url, dataType: 'json', success: function(response) {
  var flightsData = response.flights;
  // calculate flight path and add features to source
  ...
}});

var flightsLayer = new ol.layer.Vector({
  source: flightsSource
});
map.addLayer(flightsLayer);

flight-animation-3.js

...
var flightsData = response.flights;
for (var i = 0; i < flightsData.length; i++) {
  var flight = flightsData[i];
  var from = flight[0], to = flight[1];

  // create an arc circle between the two locations
  var arcGenerator = new arc.GreatCircle(
      {x: from[1], y: from[0]},
      {x: to[1], y: to[0]});

  var arcLine = arcGenerator.Arc(100, {offset: 10});
  if (arcLine.geometries.length === 1) {
    var line = new ol.geom.LineString(arcLine.geometries[0].coords);
    line.transform(ol.proj.get('EPSG:4326'), ol.proj.get('EPSG:3857'));

    var feature = new ol.Feature({
        geometry: line,
        finished: false
    });
    addLater(feature, i * 50);
  }
}
map.on('postcompose', animateFlights);

flight-animation-4.js

var pointsPerMs = 0.1;
var animateFlights = function(event) {
  var vectorContext = event.vectorContext;
  var frameState = event.frameState;
  vectorContext.setFillStrokeStyle(null, defaultStroke);

  var features = flightsSource.getFeatures();
  for (var i = 0; i < features.length; i++) {
    var feature = features[i];
    if (!feature.get('finished')) {
        var coords = feature.getGeometry().getCoordinates();
        var elapsedTime = frameState.time - feature.get('start');
        var elapsedPoints = elapsedTime * pointsPerMs;

        if (elapsedPoints >= coords.length) {
            feature.set('finished', true);
        }

      var maxIndex = Math.min(elapsedPoints, coords.length);
      var currentLine = new ol.geom.LineString(coords.slice(0, maxIndex));

      vectorContext.drawLineStringGeometry(currentLine, feature);
    }
  }
  frameState.animate = true;
};

flights.json

{
  "flights": [
    [[43.449928,39.956589],[55.606186,49.278728]],
    [[55.34,52.06],[45.034689,39.170539]],
    ...
  ]
}