3D Trajectory Web Demo (HTML5 & JavaScript)

This demo demonstrates the use of the GLG Map Server and GIS Object to display elaborate 3D trajectory trace with a ground track and drop lines. The space craft icon is placed inside the GIS Object and positioned by supplying lat/lon coordinates. The elevation above the Earth surface may be supplied as the Z coordinate, making it possible to display 3D trajectories.

On mobile devices, single-touch dragging in the map area rotates the globe, while two-touch dragging scrolls or zooms the page.

Features User Interaction Mobile Interaction

React Angular

Overview

The GLG Map Server is used to display a map in the orthographic projection. The map may be panned and zoomed by using the zoom and pan buttons. The GIS Object takes a complete care of the map display, automatically generating Map Server requests to re-generate the image when the map is zoomed or panned.

The trajectory polygon and drop lines are generated on the fly by adding points representing the current position of the space craft, with a dynamic icon showing a moving 3D space craft.

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.

The Satellite Demo presents another example of a 3D trajectory tracking.

Touch Behavior on Mobile Devices

On mobile devices, single-touch dragging in the map area rotates the globe, while two-touch dragging scrolls or zooms the page.

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.