Getting Started

Architecture

Here is a high-level description of the Web WorldWind architecture. Here we discuss the four major components: the WorldWindow, Globe, Layers and the Navigator. Following is a Simple Example that you can copy-paste into an HTML file to run in your browser. For more information, see the official Web WorldWind Concepts page.

WorldWindow

The WorldWindow object provides access to the primary components used in WorldWind: the globe, layers and a navigator.

The WorldWindow is created with the ID of an HTML canvas on your web page. The size and placement of the WorldWind is controlled by the canvas element.

// Create a WorldWindow for the canvas element
var wwd = new WorldWind.WorldWindow("canvasId");

Globe

The Globe object is a property of the WorldWindow. It contains an ElevationModel and it renders a 3D virtual globe or a 2D map projection. When you create the WorldWindow a default Globe is created for you.

To center the globe on a particular latitude and longitude, you use the WorldWindow.goTo function with a Location object.

// Center the WorldWindow (wwd) globe on Oxnard Airport at 34.2N, 119.2W
wwd.goTo(new WorldWind.Location(34.2 /*latitude*/, -119.2 /*longitude*/));

Layers

Layer objects are one of the workhorses of WorldWind. They are used to render imagery, maps, shapes and placemarks on the Globe and annotations and controls in the WorldWindow.

The WorldWindow has a layers array property and several methods for manipulating the layer list. The order of the layers array dictates the order in which the layers are rendered on the globe. When you create a WorldWindow the layer array is empty.

Layer objects control the visibility and opacity of the renderable objects contained therein (e.g., shapes). Layer objects are also used for “picking” objects contained in the Layer.

// Add some image layers to the WorldWindow's globe.
wwd.addLayer(new WorldWind.BMNGOneImageLayer());
wwd.addLayer(new WorldWind.BMNGLandsatLayer());
// Add a compass, a coordinates display and some view controls to the WorldWindow.
wwd.addLayer(new WorldWind.CompassLayer());
wwd.addLayer(new WorldWind.CoordinatesDisplayLayer(wwd));
wwd.addLayer(new WorldWind.ViewControlsLayer(wwd));
// List the layer names in the console
for (var i = 0, len = wwd.layers.length; i < len; i++) {
    console.log(wwd.layers[i].displayName);
}

The Navigator object controls how the globe moves in response to mouse, touch gestures and keyboard actions. When you create a WorldWindow, a default Navigator is created that uses mouse and touch gestures to pan, tilt, zoom and rotate the globe.

When you add a ViewControlsLayer to the WorldWindow, you are adding a layer that interacts with the Navigator object to control the globe via screen annotations (i.e., buttons).

// Add the pan, tilt, zoom, rotate and vertical exaggeration controls at the default position (lower-left)
wwd.addLayer(new WorldWind.ViewControlsLayer(wwd));

Simple Example

Here is a simple, yet complete, example of a web page that embeds a WorldWindow with a globe, layers and navigator controls in a canvas element. Copy/paste this code into a new HTML file on your system and then open the file in your browser to see and interact with the globe on your web page.

<!DOCTYPE html>
<!-- This is a very simple example of using Web WorldWind. -->
<html>
<head lang="en">
<meta charset="UTF-8">
<title>WorldWind Example</title>
<!-- Include the Web WorldWind library. -->
<script src="https://files.worldwind.arc.nasa.gov/artifactory/web/0.9.0/worldwind.min.js" type="text/javascript"></script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
    <!-- Create a canvas for Web WorldWind. -->
    <canvas id="canvasOne" width="1024" height="768">
        Your browser does not support HTML5 Canvas.
    </canvas>
</div>
<script>
    // Register an event listener to be called when the page is loaded.
    window.addEventListener("load", eventWindowLoaded, false);

    // Define the event listener to initialize Web WorldWind.
    function eventWindowLoaded() {
        // Create a WorldWindow for the canvas.
        var wwd = new WorldWind.WorldWindow("canvasOne");

        // Add some image layers to the WorldWindow's globe.
        wwd.addLayer(new WorldWind.BMNGOneImageLayer());
        wwd.addLayer(new WorldWind.BMNGLandsatLayer());

        // Add a compass, a coordinates display and some view controls to the WorldWindow.
        wwd.addLayer(new WorldWind.CompassLayer());
        wwd.addLayer(new WorldWind.CoordinatesDisplayLayer(wwd));
        wwd.addLayer(new WorldWind.ViewControlsLayer(wwd));
    }
</script>
</body>
</html>