Tutorial 2: Making Embeded WWJava Zoom to a Location
Sunday, 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
