Tutorial 2: Making Embeded WWJava Zoom to a Location

Written by Chad on August 10th, 2008

In Tutorial 1, we went into just how to embed a WWJava applet into a web page.  In this tutorial I will expand the scope and use Javascript to make the globe move to a preset location after the applet loads.  Note: I have noticed a bug while working on this tutorial with Firefox 3.x.  Javascript interaction with the WWJava globe does not seem to work. It did work in FF 2.x, I am not sure if it is a FF issue or a WWJava issue though.

First off open up your web page that has the WWJava applet code in and we will be adding the following Javascript to it:

<script language="javascript">
<!--
// Author: Patrick Murris
// Version:

// Applet init, start and stop - called from java at the end of applet init() and start()
// and at the begining of stop()

function appletInit() {
}

function appletStart() {
// Fly to a location after a delay
setTimeout("startup()", 5000); // 5 seconds
}

This part of the code starts the startup function after a delay of 5 seconds.

function startup() {
// Move to show overview
gotoLocation(GOTO_OVERVIEW);
}

In this tutorial, startup will be calling the gotoLocation function, this loads the function and also the variable that defines what the goto location is.

function appletStop() {
}

var GOTO_OVERVIEW = "Detroit;42.46;-83.16;260000;0;40";

This is where you define your zoom to location.

Location strings contain the following information separated by ‘;’:

  • name displayed on the globe
  • latitude in decimal degrees
  • longitude in decimal degrees
  • eye distance from location in meters
  • heading angle in decimal degrees, clockwise from north
  • pith angle from vertical in decimal degrees
function gotoLocation(locationString) {
var params = locationString.split(';');
if(params.length == 3)    // Lat/lon
document.getElementById('wwjApplet').getSubApplet().gotoLatLon(parseFloat(params[1]), parseFloat(params[2]));
else if(params.length == 4)    // Lat/lon and zoom
document.getElementById('wwjApplet').getSubApplet().gotoLatLon(parseFloat(params[1]), parseFloat(params[2]), parseFloat(params[3]), 0, 0);
else if(params.length == 5)    // Lat/lon/zoom and heading
document.getElementById('wwjApplet').getSubApplet().gotoLatLon(parseFloat(params[1]), parseFloat(params[2]), parseFloat(params[3]), parseFloat(params[4]), 0);
else if(params.length == 6)    // Lat/lon/zoom/heading and pitch
document.getElementById('wwjApplet').getSubApplet().gotoLatLon(parseFloat(params[1]), parseFloat(params[2]), parseFloat(params[3]), parseFloat(params[4]), parseFloat(params[5]));
}

// -->
</script>

This function is what processes the goto location values and then displays the location on the WWJava globe.

This is the finished HTML page now:

<html>
<head>
<title>NASA World Wind Java Applet</title>
</head>

<script language="javascript">
<!--
// Author: Patrick Murris
// Version:

// Applet init, start and stop - called from java at the end of applet init() and start()
// and at the begining of stop()

function appletInit() {
}

function appletStart() {
// Fly to a location after a delay
setTimeout("startup()", 5000); // 5 seconds
}

function startup() {
// Move to show overview
gotoLocation(GOTO_OVERVIEW);
}

function appletStop() {
}

var GOTO_OVERVIEW = "Detroit;42.46;-83.16;260000;0;40";

function gotoLocation(locationString) {
var params = locationString.split(';');
if(params.length == 3)    // Lat/lon
document.getElementById('wwjApplet').getSubApplet().gotoLatLon(parseFloat(params[1]), parseFloat(params[2]));
else if(params.length == 4)    // Lat/lon and zoom
document.getElementById('wwjApplet').getSubApplet().gotoLatLon(parseFloat(params[1]), parseFloat(params[2]), parseFloat(params[3]), 0, 0);
else if(params.length == 5)    // Lat/lon/zoom and heading
document.getElementById('wwjApplet').getSubApplet().gotoLatLon(parseFloat(params[1]), parseFloat(params[2]), parseFloat(params[3]), parseFloat(params[4]), 0);
else if(params.length == 6)    // Lat/lon/zoom/heading and pitch
document.getElementById('wwjApplet').getSubApplet().gotoLatLon(parseFloat(params[1]), parseFloat(params[2]), parseFloat(params[3]), parseFloat(params[4]), parseFloat(params[5]));
}

// -->
</script>

<body>

<applet id="wwjApplet" name="wwjApplet" mayscript code="org.jdesktop.applet.util.JNLPAppletLauncher" width=600 height=380
archive="applet-launcher.jar, http://worldwind.arc.nasa.gov/java/demos/worldwind.jar, WWJApplet.jar, http://download.java.net/media/jogl/builds/archive/jsr-231-webstart-current/jogl.jar, http://download.java.net/media/gluegen/webstart/gluegen-rt.jar">
<param name="codebase_lookup" value="false" />
<param name="subapplet.classname" value="gov.nasa.worldwind.examples.applet.WWJApplet" />
<param name="subapplet.displayname" value="WWJ Applet" />
<param name="noddraw.check" value="true" />
<param name="progressbar" value="true" />
<param name="jnlpNumExtensions" value="1" />
<param name="jnlpExtension1" value="http://download.java.net/media/jogl/builds/archive/jsr-231-webstart-current/jogl.jnlp" />
</applet>

</body>
</html>

The output looks like this:


wwJava applet first loaded


Globe zooming into the defined location after 5 seconds


Final stopping point

  • Share/Bookmark

6 Comments so far ↓

  1. Aug
    10
    8:13
    PM
    maning

    Thank you for this tutorial series!

    Some issues I had below:
    Tutorial 1: zoom doesn’t work in Safari using imac’s mightymouse scroll ball. It works OK in Firefox 3.0
    Tutorial 2: zoom to location doesn’t work in Firefox 3.0

    Some questions:
    1. Where do wwjava save my cache of downloaded images?

    Future request:
    1. Add wms layers. I have a local wms for our project and it would be good to add them to wwjava.

    Looking forward for the succeeding tutorials.

    cheers,

    maning

  2. Aug
    10
    8:46
    PM
    Chad

    Not sure on your first bug you found, I can try on a macbook pro tomorrow (closest I have). As for the second bug, already know that one (mentioned it in the post even). I am asking the WW devs if this would be FF or a WWJava bug.

    For your feature request, check out the NASA WWJava demo page

    Should have two or three more basic demos for sure.

  3. Aug
    11
    4:50
    AM
    Dimitris

    Interesting tutorial indeed, thanks!

    Is it possible to embed WWJ in a WinForms application? (So as to avoid the headaches of WW.NET).

  4. Aug
    11
    7:18
    AM
    Chad

    Dimitris: I want to say “yes” but I am not 100% sure.. I think that was asked on the WorldWind forums before. But the best place for your questions would be there.

  5. Aug
    13
    3:03
    AM
    Dimitris

    Thank you. I found the relevant thread.

  6. Sep
    5
    1:55
    AM
    rieyo

    just wanna be