Rotating Globe

1. What Is Rotating Globe?

The Rotating Globe is a data-driven geo-coordinate visualization interface, written in JavaScript. It shows the Earth, and connect locations on Earth to URLs on the internet.

Rotating Globe is part of the Locative Blog project.

Locative Blog is being written by Ákos Maróy

2. Sample

See a sample of Rotating Globe in action at the authors travel blog, or a local sample here.

3. Using Rotating Globe

Rotating Globe is a JavaScript and DHTML based solution. Thus, it needs to be integrated into an HTML page to be used. Also, a data definition file is needed to specify the geo-locations that are shown on the globe.

The following directory structure is used:

.
|-- page.html
|-- locations.js
|-- GeoLocation.js
|-- RotatingGlobe.js
|-- misc.js
|-- images
|   `-- loading.png
`-- globeImages
    |-- 5x5.png
    |-- globe0.jpg
    |  ...
    `-- globe35.png

From the above files, the first two, page.html and locations.js needs to be provided by the user. All the other files are found in the rotatingGlobe/var/public_html directory in the tarball.

3.1 Integration into an HTML page

The HTML page showing the globe needs the following additions to the <head> and <body> elements. As a sample, please refer to rotatingGlobe/var/public_html/index.html in the tarball.

3.1.1 In the <head> element

The following needs to be added to the <head> element of the HTML page:

<script language="JavaScript" src="misc.js"></script>
<script language="JavaScript" src="GeoLocation.js"></script>
<script language="JavaScript" src="RotatingGlobe.js"></script>

<script language="JavaScript">

/**
 *  The global rotating globe object, the event handlers depend on this.
 */
var globe;

/**
 *  The locations.
 */
var locations = Array();

</script>

<script language="JavaScript" src="locations.js"></script>

<script language="JavaScript">

/**
 *  Initialize the page, after it has loaded.
 */
function onPageLoad()
{
    globe = new RotatingGlobe(document.globe, 30, locations);
    // this sets up event handlers for the preloaded images
    globe.preloadImages();

    // as not all event handlers are called (damn these lame browswers)
    // set a timout value and call the load image hanlder ourselves
    makeSureImagesAreLoaded()
}

/**
 *  Make sure all images are loaded, by checking on this regularly.
 */
function makeSureImagesAreLoaded()
{
    if (!globeImageLoaded()) {
        // if not ready, check a second later as well
        setTimeout("makeSureImagesAreLoaded()", 1000);
    }
}
</script>

<script language="JavaScript">
// create the style sheet definition for each geo location

document.write('<style type="text/css">');
for (i = 0; i < locations.length; ++i) {
    document.write(locations[i].styleDefinition());
}
document.write('</style>');
</script>

// create CSS style for the location popup layer
<style type="text/css">
#locationPopup {
    position:    absolute;
    top:         0px;
    left:        0px;
    visibility:  hidden;
    font:        14px arial;
    font-weight: bold;
    color:       yellow;
}
</style>

3.1.2 Load the globe images when the page loads

Add a onLoad function to the <body> element, to make the page load all the rotated globe images:

<body onLoad="onPageLoad();">

3.1.3 Add definitions into the <body> element of the page

The following define the globe image itself, and all the location markers, plus the popup layer that display the description for the markers:

<img name="globe" src="images/loading.png" width="650" height="650" alt="globe"/>
<br/>

<script language="JavaScript">
// create the HTML element for each geo location

for (i = 0; i < locations.length; ++i) {
    document.write(locations[i].htmlDefinition());
}
</script>

<div id="locationPopup"></div>

3.2 Defining locations

Rotating Globe is totally data driven. All location definitions are loaded from a data definition file, called locations.js. This file must reside in the same directory as the page that shows the globe itself.

Each location has the following attributes:

unique name - a unique name of the location, may only contain letters a..z, A..Z, numbers 0..9, or underscore ('_') may not start with a number
display name - the displayed name of the location, can be any character sequence
longitude coordinate
latitude coordinate
URL - the url the location should point to, when clicked by the user

According to the above, a location is defined as follows, in the locations.js file:

locations.push(new GeoLocation(
    "budapest", "Budapest", 19.05, 47.50, "http://your.site/"));

Multiple definitions are simply listed one after the other.

4. Discussion

For questions & feedback on Locative Blog, please join the locblog-list mailing list.

5. Support

If you feel that Locative Blog is beneficial to you, feel free to donate some money to allow further development. Thank you!

6. Download

Locative Blog is © Copyright Tyrell Hungary under the GNU General Public Licence, and is hosted on SourceForge.
You can download Locative Blog component releases from the project's download page.

rotatingGlobe 0.1

If you like to live on the edge, you can check the CVS repository by getting module rotatingGlobe as described here.

This page last updated: $Date: 2005/02/09 11:14:20 $.