Global Connection

Launch Global Connection Tool

Introduction

Global Connection or Globe Connection (I need to choose a better name) is a web-tool that helps you draw a connecting line following a projectile path between two locations on the Earth. You can see some screen shot of the program in slide show below. I was always fascinated by this type of graphs. So, I said, let’s create a tool that people could upload a Comma Separated Version (CSV) file, identifying the starting and ending point of each connection and easily create such graphs. This tool was created using DOJOCesium WebGL, and, of course, some JavaScript modules that I wrote following Asynchronous Module Definition (AMD) format.

The main Advantages of this tool is that you can upload your own CSV file. On the website, there are three sample CSV files available for download. I hope those sample files along with the description on this page assist you in creating your own CSV file and creating a connection map of your own.

To access the tool click here or on the “launch” button provided on top and the bottom of this page.

To learn how to create your own input files, either download the sample files and try to mimic their format; and/or read the next section on this page for an explanation of the input file format.

NOTE: I have tested the software on Chrome, FireFox, and the Internet Explorer. On Safari, it crashes. So don’t use Safari.

How to use the Program?

Using the program is very easy. On the bottom of the page, choose your CSV file and load it. Once the CSV file is loaded, the connections are automatically added to the screen. If the CSV file is not properly formatted, nothing will show.  In some cases, wrongly formatted input file, may crash the WebGL; in such cases, you need to reload the page. Well, I am still working on this tool :D.

Input File Format

As explained earlier, the input file must be a CSV file. The first line is the header and the consequent lines are the connections; each line is one connection or line. The header defines different parameters. The following four parameters (headings) are the bare minimum that is required (non-optional parameters):

  • sLat: The latitude of the starting point in decimal degree
  • sLon: The longitude of the starting point in decimal degree
  • eLat: The latitude of the ending point in decimal degree
  • eLon: The longitude of the ending point in decimal degree

Here is a sample input file, with bare minimum needed information.

sLon,sLat,eLon,eLat
-84.477222,42.724713,51.422862,35.766746
-84.477222,42.724713,6.88569,52.223663
-84.477222,42.724713,-117.070423,32.775225

The above input file contains only three connection; therefore, if loaded on the program there would be only three lines. Also, the starting point is the same for all of them, but there is no restriction on that. Each connection could have completely different starting and ending point.

NOTE: All headers are case sensitive. So “sLat” should be given exactly as it is noted here. If it is written as “slat”, “SLAT”, or any other case, the program will not draw the connections.

There are also some other headers (parameters) that you could insert in the input file to have a better control on how the lines/connections are drawn. These optional parameters are listed here:

  • name: [optional] If this parameter is defined for a connection, once the user clicks on that line/connection an info box opens and shows the text provided by this parameter. Otherwise, the connections are named based on the line number or the order that they were provided in the CSV file. IMPORTANT NOTE: the name can not have any comma in it; otherwise, the input file is not parsed properly and nothing shows.
  • linewidth: [optional] It defines the thickness of the connection. This can be used to alter the size of the connection. Default value is 3.
  • linecolor: [optional] Determines the color of the line. This should be given as CSS Color string. If the value for linewidth is set to -1, the program randomly generates a color for that connection. Otherwise, the specified color provided in CSS string format is used. The default color is “#00FFFF”.
  • outlinewidth: [optional] determines the size of the outline. the default is 1.
  • outlinecolor: [optional] determines the color of the outline. As in linecolor, if set to -1 a randomly generated color is used for that connection. If it is set to -2 the same color as the linecolor is used. The default is “#F0F8FF”.
  • maxHeight: [optional] determines the maximum height that the line could reach. The starting and ending points are connected using a parabola with the maximum height at the middle. The default value for maxHeight is half the distance between the starting and ending points measured on the great circle.
  • nPoints: [optional] determines the number of points that are generated between the starting and ending points. More point gives you a smoother line. The default is 100 points or one point every 20000 meter (20km); whichever is higher points.
  • connectionModel: [optional] This is for future development. Currently starting and ending point are connected using a parabola. That’s the only option at this moment. I have put this in place, just in case, if in future I want to support other formula.

Sample Input Files

There are some sample input files available for download:

Launch Global Connection Tool