Tutorial 3: Label Thy Earth
Written by Chad on August 13th, 2008This will be a smaller than usual demo, we already have the basics down. So now we will be adding some labels to the globe.
We will be building on the prior tutorials (though I have made some slight changes to clean the code and make for a better final demo).
We already have what we need for a lable with the variable line we used in the “goto”:
var GOTO_OVERVIEW = "Columbia County;41.039;-76.4615;50000;0;45";
All that is needed, is the function to make it display on the applet, and the call to that function. That code looks like this:
addLocationLabel(GOTO_OVERVIEW, 14);
This calls the label function, what variable to use and what font size to use. Next is the function to display.
function addLocationLabel(locationString, fontSize) {
var params = locationString.split(';');
document.getElementById('wwjApplet').getSubApplet().addLabel(params[0], parseFloat(params[1]), parseFloat(params[2]), 'Arial-BoldItalic-' + fontSize, '#33ff00');
}
This function pases the information to get the text to display, the location it should be displayed at, the font to use and what size it should be and finally, what color to use.
This is how it looks:
Now, suppose we want to add more labels and use a different color and font size. Lets add 23 more labels:
var LOC_01 = "Shoemaker Bridge;41.15317;-76.53743;5000;0;45"; var LOC_02 = "Sam Eckman Bridge;41.17624;-76.48955;5000;0;45"; .... var LOC_23 = "Davis Bridge;40.9152;-76.43485;5000;0;45";
And for those 23 labels, we need to call the addLocationLabel, but this will be a slightly different version, displaying a different font and font color.
addLocationLabel2(LOC_01, 10); addLocationLabel2(LOC_02, 10); .... addLocationLabel2(LOC_23, 10);
And the function looks like this:
function addLocationLabel2(locationString, fontSize) {
var params = locationString.split(';');
document.getElementById('wwjApplet').getSubApplet().addLabel(params[0], parseFloat(params[1]), parseFloat(params[2]), 'Arial-' + fontSize, '#ff0000');
}
And the output:
You can see all the examples, live at this location.


