OpenFlightsMap Widget

This is the documentation for the OpenFlightsMap widget, meant for programmers who want to reuse the OpenFlights code in their own websites. If this is not you, then you're probably in the wrong place. How about taking a look at our data or the FAQ?

The widget is a work in progress. Suggestions about how to make the widget easier to setup, easier to use or more flexible are welcome!

Demo

OpenFlightsMap Widget demo (opens in new window)

Setting up

OpenFlights is a client-server system, with a Javascript frontend (client) and a PHP/MySQL backend (server), and running the demo locally requires both.

To start, it's easiest just to grab the entire Git tree from GitHub:

git clone https://github.com/jpatokal/openflights.git

Or browse online.

Server

Requirements
  • Apache web server
  • MySQL 5.x database
  • PHP 5.x with gettext

Once you have these set up, the sql/create.sql script can be used to generate the OpenFlights database schema and the sql/load_data.sql script can be used to load in the standard airport, airline and route databases:

mysql -u root <sql/create.sql
mysql -u openflights flightdb2 <sql/load-data.sql

OpenFlights differentiates between flight data (table flights), which is entered by users, and route data (table routes, which is data about what airlines fly where. While fundamentally the same -- every row has two airports and an optional airline -- the two differ in the additional details attached to the flights. A clean install of OpenFlights has no flight data, but a full set of route data.

Flight map data sets are generated by php/map.php. Route map data is generated by php/routes.php. Both also require the locale.php, db.php, helper.php and filter.php files; you must modify db.php so that it can find your database.

To validate your server installation, try to open either of the following URLs in a browser:

http://localhost/php/map.php 0;0 miles;;O;;demo;;[sessionkey]
http://localhost/php/routes.php?apid=32 32;6;Cambridge Bay (YCB) ...

If you get any errors, check the Apache log (/var/log/apache2/error.log).

Note: The above is just a sanity check, do not attempt to parse responses from map.php or routes.php manually. The format is undocumented and unstable.

Client

A web page using the OpenFlightsMap widget, such as widget/demo.html (launch), must include the following:

<link rel="stylesheet" href="demo.css" type="text/css">
<script type="text/javascript" src="/js/OpenLayers.js"></script>
<script type="text/javascript" src="/js/map.js"></script>
<script type="text/javascript" src="/js/Gettext.js"></script>
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="demo.js"></script>

One by one:

  • Your CSS file (demo.css) must define your map element (#map, although this can be renamed), the map title (#maptitle), a "Loading" icon (#ajaxloader) and, optionally, a #debug element. The CSS required by the underlying OpenLayers library is also included here.
  • The OpenLayers library (OpenLayers.js), version 1.7 or higher.
  • The OpenFlightsMap class itself (map.js).
  • The JSGetText library (Gettext.js), for localization. Locale files are accessed from locale; however, if they're missing, OpenFlights defaults to English. On Linux systems, you may also need to set up your operating system locale, see Dynamic Javascript localization with Gettext and PHP for details.
  • The Prototype library, for AJAX and other Javascript magic.
  • The code that initializes and run the widget (demo.js).

Once you've got all that set up, to actually initialize your widget, you need to:

  1. Set up an OpenLayers map layer
  2. Pass a suitable DOM element (by default "map") and the layer to the OpenFlightsMap constructor
  3. Load the map data from the server

To catch the user's clicks on airports, you'll also want to set up the onAirportSelect() and onAirportUnselect() callbacks. All this and more is demonstrated in widget/demo.html.

If you encounter any problems getting demo.html to run (blank map, error messages etc), check the error console of your browser (Tools > Error Console on Firefox) for clues.

Documentation

The autogenerated JSDocs for OpenFlightsMap class and widget/demo.html are available under widget/jsdoc.