thinking outside the tank

Joshua Slocum in Google Earth: new features

leave a comment »

This morning I smartened up the presentation of Joshua Slocum’s first solo circumnavigation of our planet (see: by adding the following features:


When you click on a passage in the menu, that part of Slocum’s voyage is fetched from the server and starts playing in the Google Earth viewer as soon as it is loaded. In coding terms, I simply needed to add a call to the play() method after loading the tour:


Improved cursor control

Previously, when the user clicked on a passage in the menu, I used the following jQuery expression to set the cursor icon to show that the user should wait for the passage to load:


This was quite hit and miss; the cursor would change to ‘wait’ but would frequently revert to the ‘hand’ as the mouse roamed over nearby anchor elements. By changing the jQuery to the following, this was resolved:


This code changes the cursor for all elements (“*”) so it doesn’t matter where the mouse moves, the cursor remains in the wait state until the passage is retrieved.

Status information

It can take several seconds to retrieve, parse, and load a KML file for display in the Google Earth plug-in, especially if there are multiple 3D models in the file. In addition to changing the cursor, I have added a line of status information which appears above the menu. This shows the text: “Please wait: fetching voyage…”. The text is removed as soon as loading of the KML completes. The jQuery statements for these actions are:

          $("#status").text("Please wait: fetching voyage...");

to show the message, and:


to remove it, where “status” is the id of the <p> element positioned where the status should be displayed.

Highlight current passage

Previously, it was difficult to know which passage was currently selected among the several that might be in the menu for a given chapter of the presentation. To remove any doubt, when the user clicks on a passage the text of that menu option changes colour (I’m English). I used the following code to achieve this effect – having first given each menu option a CSS class of “leg”:

          $(document).ready(function() {
              $(".leg").click(function() {
                  $(".leg").css({ "color": "#996615" });
                  $(this).css({ "color": "Blue" });
                  $("*").css("cursor", "wait");
                  $("#status").text("Please wait: fetching voyage...");

The function that handles the click event for a given element of the “leg” class will first change the colour of all “leg” elements to the default colour (#996615). This clears any previous selection. Then the function changes the colour of the text of the currently selected “leg” element, identified by ‘this’, to ‘Blue’.

As you can see, this is also the place to change the cursor and set the status.


I hope you agree that these features improve the usability of the presentation quite considerably. The fact that they were not built into the initial design reflects, to a large degree, that I am new to jQuery. This project started life as a .Net application but I am now more than content to convert it to Javascript.

Copyright © Colin Hazlehurst, 2012

If you enjoy the presentation of Joshua Slocum’s voyage, you might also like the First Voyage Round the World of Captain James Cook:


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: