WorldWindow

WorldWindow is the fundamental Web WorldWind object. It represents the presence of Web WorldWind in the web page. Almost all interactions between the app and Web WorldWind occur through a WorldWindow.

A WorldWindow encapsulates an HTML canvas element. The app developer is responsible for creating the canvas, typically by defining a <canvas> element in static HTML. The canvas is given an ID and that ID is handed to the WorldWindow constructor to tell the WorldWindow its drawing surface. The WorldWindow directs all drawing to that canvas. Here’s an example of creating a WorldWindow for a canvas whose ID is “canvasOne”:

var wwd = new WorldWind.WorldWindow("canvasOne");

The canvas, itself, is defined in the associated HTML page as follows:

<div style="position:relative">
    <canvas id="canvasOne" width="1000" height="1000" style="width: 100%; height: auto">
    </canvas>
</div>

Here the canvas is given an initial width and height of 1000 pixels, but the style element causes it to resize to the width of the containing <div> when displayed, and maintain the initial aspect ratio.

A web page may contain multiple WorldWindows. Each encapsulates a separate canvas and operates independently of the others.

A WorldWindow contains a Globe, a Navigator and a Layer List. These are all created automatically during construction of the WorldWindow object. The globe and navigator may subsequently be replaced by the app if desired. The layer list holds all layers displayed in that WorldWindow, but it is initially empty. The first thing most apps do is populate it with one or more imagery layers.

The WorldWindow manages the display of the virtual globe or 2D map. Apps need do nothing but add layers and perhaps shapes and initiate redraws when it does so. Behind the scenes, the WorldWindow retrieves imagery and elevation from the internet as needed, generates 3D terrain, and traverses the layer list to display its contents. Its associated navigator translates user input to movements of the globe.

Picking is also provided by the WorldWindow. See this developer’s guide’s section on Picking for more information.

Changing the View

See the Navigation and Viewing page to learn how to make the WorldWindow look at a different location on the globe or to otherwise modify its view.

Event Listeners

A WorldWindow manages all event handlers associated with its canvas. Rather than specifying event handlers directly on the canvas, apps should establish them on the WorldWindow so that it may coordinate event handling with its own. The call to register event handlers is the same as it would be to define event handlers anywhere:

wwd.addEventListener("mousemove", function (event) {...});

or for a mobile device:

window.addEventListener("touchstart", function (event) {...});