Animating flight paths

Use SVG and the Arc.js plugin to visualize flight paths.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Animating flight paths</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<!-- We use arc.js to make our paths curved. -->
<script src='https://api.mapbox.com/mapbox.js/plugins/arc.js/v0.1.0/arc.js'></script>
<!-- This is our data file - it's an array of [[lat,lng],[lat,lng]] pairs
     that define starting and ending locations of flight paths -->
<script src='/mapbox.js/assets/data/flights.js'></script>

<style>
/*
 * The path-start class is added to each line
 * to manage its animation - this interpolates
 * between the starting and ending values for the
 * stroke-dashoffset css property
 */
.path-start {
  -webkit-transition:stroke-dashoffset 5s ease-in;
     -moz-transition:stroke-dashoffset 5s ease-in;
       -o-transition:stroke-dashoffset 5s ease-in;
          transition:stroke-dashoffset 5s ease-in;
  }
</style>

<div id='map' class='dark'></div>

<script>
L.mapbox.accessToken = '<your access token here>';
// This is an advanced example that is compatible with
// modern browsers and IE9+ - the trick it uses is animation
// of SVG properties, which makes it relatively efficient for
// the effect produced. That said, the same trick means that the
// animation is non-geographical - lines interpolate in the same
// amount of time regardless of trip length.

// Show the whole world in this first view.
map = L.mapbox.map('map', 'mapbox.satellite')
    .setView([20, 0], 2);

var credits = L.control.attribution({
  prefix: '<a href="http://openflights.org/data.html">Flight data from Open Flights, under the ODbL license</a>'
}).addTo(map);

// Disable drag and zoom handlers.
// Making this effect work with zooming and panning
// would require a different technique with different
// tradeoffs.
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
if (map.tap) map.tap.disable();

// Transform the short [lat,lng] format in our
// data into the {x, y} expected by arc.js.
function obj(ll) { return { y: ll[0], x: ll[1] }; }

for (var i = 0; i < pairs.length; i++) {
    // Transform each pair of coordinates into a pretty
    // great circle using the Arc.js plugin, as included above.
    var generator = new arc.GreatCircle(
            obj(pairs[i][0]),
            obj(pairs[i][1]));
    var line = generator.Arc(100, { offset: 10 });
    // Leaflet expects [lat,lng] arrays, but a lot of
    // software does the opposite, including arc.js, so
    // we flip here.
    var newLine = L.polyline(line.geometries[0].coords.map(function(c) {
        return c.reverse();
    }), {
        color: '#fff',
        weight: 1,
        opacity: 0.5
    })
    .addTo(map);
    var totalLength = newLine._path.getTotalLength();
    newLine._path.classList.add('path-start');
    // This pair of CSS properties hides the line initially
    // See http://css-tricks.com/svg-line-animation-works/
    // for details on this trick.
    newLine._path.style.strokeDashoffset = totalLength;
    newLine._path.style.strokeDasharray = totalLength;
    // Offset the timeout here: setTimeout makes a function
    // run after a certain number of milliseconds - in this
    // case we want each flight path to be staggered a bit.
    setTimeout((function(path) {
        return function() {
            // setting the strokeDashoffset to 0 triggers
            // the animation.
            path.style.strokeDashoffset = 0;
        };
    })(newLine._path), i * 100);
}
</script>
to create your own custom map and use it in this example.
Use this example by copying its source into your own HTML page and replacing the Map ID with one of your own from your projects. Having trouble with JavaScript? Try out Codecademy or contact our support team.
Copy example