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. More information
The demo uses a simple image dataset. More detailed datasets, such as an Open Street Map dataset (OSM), may be used depending on the application needs.
The demo uses asyncronous map loading: when the map is zoomed or scrolled, the drawing is changed to the the new zoom or pan state right away, while the new map will appear when it's loaded. The GIS Air Traffic Control Demo demonstrates an alternative approach that uses an asynchronous map loading request to load a map: 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 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 demo uses two map windows. The main window shows a detailed map which can be zoomed and panned. The thumbnail window displays the whole world in the Orthographic Projection (a globe view) and shows the outline of the area displayed in the detailed map window.
Each moving icon is represented by a collection of dynamic GLG objects which may change shape, label, colors and other attributes to reflect the state of the object they represent. Each icon can be selected with the mouse and displays a tooltip with detailed information when the mouse is moved over it (touch and hold on mobile devices).
The demo starts with the map of the whole world, then zooms on the United States to show more details. The map can be zoomed with the zoom buttons located in the toolbar. The directional buttons in the upper left corner may be used to scroll the map. Either map can also be scrolled by dragging it with the mouse (or touch on mobile devices).
In addition to the moving icons, the map also contains several static city icons implemented as GLG objects (square green dots). These city icons are different from the city markers generated in the map image by the Map Server. The city icons generated by the Map Server are part of the image, can not be selected, and can be switched on or off only by changing the visibility of the city layer and re-generating the image. The city icons implemented as GLG objects, on the other hand, can be switched dynamically on or off, can change color and other attributes, and may be selected with the mouse. They also display tooltips with detailed information when the mouse moves over them and may be used by an application to annotate special points of interests.
The demo uses several datasets arranged in multiple layers.
The DCW dataset provides details of political and provincial boundaries, inland water, roads, railroads, populated areas and other coverage. The DCW and Tiger datasets are organized in such a way that more detailed layers are automatically activated depending on the zoom level, to display more details as the map is zoomed in.
An Open Street Map dataset (OSM) that contains vector data for the whole Earth down to the street level and buildings details is also available for the use with the GLG Map Server.
Move the mouse over an icon to display a tooltip with icon information. On mobile devices, touch and hold an icon to display a tooltip.
Move the mouse over either map window (or touch the map on mobile devices) to display the lat/lon coordinates of the cursor (touch) in the lower right corner of the main map.
Click on the moving icon to select it (an application may also open another URL with detailed information for the selected icon).
Click on the left-most button in the toolbar to "lock" on the selected icon, so that the map is automatically panned to keep the selected icon visible as it is moving.
The toolbar also contains buttons for switching various layers on and off, changing the plane icon size, as well as zooming and panning controls. The toolbar displays tooltips when the mouse is moved over toolbar buttons. On mobile devices, tooltips are activated by a touch and hold action.
A touch action performed on touch and drag is controlled by the Touch Action selection buttons that will be shown when this page is displayed on a mobile device.
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.