OpenLayers 3 maps are not just static map: the rich functionality of the library provides the tools to create fully interactive maps that engage with the user. Animations are a great technique to enrich the user experience and to visualize your data in a beautiful way. In this blog post we are going to show how to build an OpenLayers 3 map that animates flight routes between airports.
The result will look like this:
The demo is available here.
In the following section, we will walk you through the steps to create this map.
We start with a simple map with just one background layer with a clean style.
The JSON file with the flight data is not a standard geo data format, so we can not use one of the data formats of OpenLayers to load the data. Instead we read the JSON file using jQuery, calculate a great circle path for each flight and then manually create a feature and add it to a vector source. The features of the source are shown in a vector layer which is added to the map.
In the callback of the AJAX request we loop through the list of coordinate pairs and calculate a great circle line for each flight route between two airports. The coordinates of the resulting line string are in EPSG:4326. Usually, when loading vector data with a different projection, OpenLayers will automatically re-project the geometries to the projection of the map. Because we are loading loading the data ourself, we manually have to transform the line to EPSG:3857. With the re-projected line string geometry we create a feature. Then we could add the feature to the vector source. But to delay the start of the animation of a flight, so that not all animations start at the same time, we add the feature with a timeout.
The actual animation of the flights is done in a postcompose listener. The postcompose hook allows to intervene with the OpenLayers rendering process and enables to directly draw geometries onto the canvas context. A postcompose listener is called for every rendering frame and is the perfect place to implement animations.
In our case, we want to animate a flight path to simulate the movement of an airplane. We will do this by revealing the line geometry step by step. E.g. the first time a flight path is rendered, the first 2 points of the line are shown, in the next render frame the first 4 points of the line are rendered, then 6, … The speed of the airplane, that is how many points are revealed per second, can be configured.
In the function animateFlights, which we use as postcompose handler, we loop through the list of flight features and draw the features. In animateFlights we only draw the geometries of those features that are still being animated. Once the animation for a flight has finished (that is the airplane has reached its target), the feature will be rendered by the default layer style. A finished flag on the feature indicates if the animation has terminated.
To draw the geometry of a flight, we need to build a sub-line from the start of the flight to the current position of the airplane. To do this we first calculate the elapsed time from the start of the animation of this particular feature. With the elapsed time and the speed (the number of points that are revealed per second) we get the number of points that should be rendered for a line at the current time. Then, we build a linestring for the sub-set of points and directly draw the line with the vector context.
That’s it! The full code of the example is available here.
We hope that this example gives you an idea on how maps can be animated with OpenLayers 3. We are curious to see the animations that you build with this technique!
Feel free to contact us if you are interested in animating your data with OpenLayers 3. Also meet us at the FOSS4G conference in Seoul.