GIS Air Traffic Control Web Demo (HTML5 & JavaScript)

This is an example of a GIS monitoring application written entirely in JavaScript using the GLG Extended API. The demo demonstrates the use of the GLG Map Server integrated inside of a GLG drawing as a GLG GIS Object. The Map Server is used to generate the background map, while the GLG Toolkit is used to display dynamic icons on top of the map and handle user interaction.

The demo uses a simple vector dataset. More detailed datasets, such as an Open Street Map dataset (OSM), may be used depending on the application needs.

Features User Interaction Mobile Interaction

React Angular

Touch Action:

Feature Overview

The demo shows functionality typical for the air traffic applications, changing the airplane icons to display more elaborate shapes when the map is zoomed in. The color of the airplane icon changes to display the plane's status. For the high zoom factors, the plane history is also displayed in a form of a shading out airplane trail.

The plane labels may also be turned on or off to control the amount of displayed information, and a tooltip with the flight information is displayed when the mouse is moved over a plane icon. The airport icons also display a tooltip with their coordinates on mouse over. On mobile devices, tooltips are activated by a touch and hold action.

When an airplane icon is selected with the mouse, a popup panel is activated to display additional information about the flight, including its flight number, lat/lon coordinates, speed and elevation.

The demo also shows an example of implementing a distance measuring mode.

On the initial appearance, the demo shows the map of the whole world in the orthographic projection, then zooms on the Florida area to show more details. When the map is zoomed in, the shape of the icons will change to show the plane's direction, and labels with additional information about the airplane will be displayed. A vertical bar next to the airplane icon will show the airplane's elevation. Icon labels may be turned on or off with a toolbar button.

The map may scrolled by dragging it with mouse or zoomed using zoom buttons in the toolbar. The tooltips may be used to identify toolbar buttons. The directional buttons in the upper left corner of the map may be used to scroll the map. The GLG GIS Object takes a complete care of the map display, automatically generating Map Server requests to re-generate the map image when the map is panned or zoomed.

The demo uses asyncronous map loading requests: when the map is zoomed or scrolled, the program will continue to operate in the old zoom or pan state and will switch to the new zoom or pan when the new map is ready. The GIS Air Traffic Monitoring Demo demonstrates an alternative approach that changes the drawing to the new zoom or pan state right away, while the new map will appear when it's loaded.

The JavaScript version of the demo provides the same functionality as the desktop versions written in C/C++, C# and Java. The GLG drawing and the programming logic are shared between all versions of the demo, with only syntax differences between the source code of different versions. The GLG Demo Download includes the desktop versions of this demo.

Touch Behavior on Mobile Devices

The User Interaction section below describes user interaction on both desktop and mobile devices using the mouse click and hover over terms.

On mobile devices, the touch action should be used instead clicking to select, and touch and hold instead of hovering the mouse over to show tooltips.

Additionally, the Touch Action selector is shown on mobile devices to control the action performed on a touch in the map area:

User Interaction

Map Server Setup Information

To run the demo locally from your own server, the GLG Map Server has to be setup on that server. If the map server is not set up, the map image will be missing.

Refer to the map_server/README.txt file in the GLG installation directory for details. The demo source code also needs to be modified to set the SuppliedMapServerURL variable to point to your map server URL.