Examples

Web World Wind provides very many examples, at least one for every major feature. The examples are simple in order to make each feature easy to learn.

You can run the examples directly from this page by clicking on the HTML links here. It is not necessary to download Web World Wind to run them. If you want to download and run them locally, see the Running Locally section.

The examples source code is in the release zip file and the GitHub repository.

Most examples use jquery, Bootstrap and requireJS, but those technologies are not required to use Web World Wind. See the Get Started page for an example of using Web World Wind without those technologies.

All examples start out doing two things: Create a World Window and create layers to display in that World Window.  Here is typical code that does that:

// Create the World Window in a canvas named "canvasOne".
var wwd = new WorldWind.WorldWindow("canvasOne");

// Define layers to populate the World Window
var layers = [
    {layer: new WorldWind.BMNGLayer(), enabled: true},
    {layer: new WorldWind.BMNGLandsatLayer(), enabled: false},
    {layer: new WorldWind.BingAerialLayer(null), enabled: false},
    {layer: new WorldWind.BingAerialWithLabelsLayer(null), enabled: true},
    {layer: new WorldWind.BingRoadsLayer(null), enabled: false},
    {layer: new WorldWind.CompassLayer(), enabled: true},
    {layer: new WorldWind.CoordinatesDisplayLayer(wwd), enabled: true},
    {layer: new WorldWind.ViewControlsLayer(wwd), enabled: true}
];

// Create those layers.
for (var l = 0; l < layers.length; l++) {
    layers[l].layer.enabled = layers[l].enabled;
    wwd.addLayer(layers[l].layer);
}

Subsequent code in the examples creates shapes or other features specific to the example. All that code is followed by a call to redraw the World Window to make it up-to-date with the content that’s been added to it:

wwd.redraw();

Notice that Web World Wind objects are created using the WorldWind global object.

Most examples also include a Layer Manager (defined in examples/LayerManager.js) to enable the user to control layer visibility and projection type:

// Create a layer manager for controlling layer visibility.
var layerManger = new LayerManager(wwd);

Basic Examples

SimplestExample.html illustrates the most basic Web World Wind program there is. Its six lines of JavaScript code create a fully functioning World Window with a globe containing terrain and high-resolution imagery. The program also creates a compass, a layer that shows the current map coordinates, and a layer with view controls. (With the exception of the vertical exaggeration control, the view controls are redundant with mouse and gesture input.)

BasicExample.html and BasicExample.js define the template for most Web World Wind examples. This example performs only the operations described above. The result is a full-featured, interactive Web World Wind globe with layer and projection control.

Configuration.js shows how to set Web World Wind’s configuration properties, although that’s seldom necessary. Most configuration properties must be set before creating a World Window or other Web World Wind objects. Functionally this example behaves the same as BasicExample, above.

Shape Examples

GeographicText.html and GeographicText.js illustrate the use of Web World Wind’s GeographicText shape. The example defines a large number of the word’s mountain peaks and displays each peak’s name at its geographic location. A GeographicText shape is created for each peak, and each shape is assigned a common TextAttributes bundle. The shapes are all added to a single RenderableLayer, which is added to the World Window’s layer list.

Paths.html and Paths.js show  how to use Path and several of its unique features, including altitude mode, terrain following and extrusion. It also show how to assign separate appearance attributes for highlighting, and  instantiates a HighlightController to handle highlighting automatically.

Polygons.html and Polygons.js give examples of creating Polygons, both simple polygons and polygons with multiple boundaries defining holes, as well as extruded polygons. Images are applied to several of the polygons. The polygons are given separate highlight attributes so that they stand out when highlighted by the HighlightController included by the program.

PlacemarksAndPicking.html and PlacemarksAndPicking.js show how to create Placemarks with labels. It creates 21 placemarks using Web World Wind’s built-in push-pin placemark images. It instructs Web World Wind to draw leader lines from each placemark’s position in space to the ground. And it explicitly shows how to monitor picking and highlight the placemarks in response to pick events.

CustomPlacemark.html and CutomPlacemark.js illustrate the use of a custom placemark image created on the fly using the 2D context of an HTML canvas.

ScreenImage.html and ScreenImage.js show how to use Web World Wind’s ScreenImage shape. The example creates two screen images, one using a predefined image and another using an image created on the fly using the 2D context of an HTML canvas. The example also shows how to monitor pick events and highlight the screen images when they’re picked. Additionally, it shows how to listen for pick events on the compass and reset the globe’s orientation when the compass is picked.

ScreenText.html and ScreenText.js display ScreenText at various places on the World Window. The example shows how to position screen text relative to the World Window using Web World Wind’s Offset class.

SurfaceImage.html and SurfaceImage.js illustrate how to display images on the globe’s surface using Web World Wind’s SurfaceImage class. The example creates one image using a predefined image and another image created on the fly using the 2D context of an HTML canvas. It also shows how to monitor pick events on surface images.

GeographicMeshes.html and GeographicMeshes.js displays two GeograhicMesh shapes, one with a custom image applied to it.

Picking Examples

PlacemarksAndPicking.html and PlacemarksAndPicking.js  show how to monitor picking and highlight shapes in response to pick events.

PickAllShapesInRegion.html and PickAllShapesInRegion.js illustrate Web World Wind’s region-picking functionality, in which all shapes in a defined screen-coordinate region are picked. The example creates and displays a grid of Placemarks, then monitors mouse motion and tap gestures. When those events occur, the example defines a small region around the event point and invokes the World Window’s region picking function. (See WorldWindow.pickAllShapesInRegion().) All the placemarks within the specified region are identified by the World Window as being picked, and the example highlights each of them.

ScreenImage.html and ScreenImage.js shows how to monitor pick events and highlight  screen images when they’re picked. Additionally, it shows how to listen for pick events on the compass and reset the globe’s orientation when the compass is picked.

SurfaceImage.html and SurfaceImage.js show how to monitor pick events on surface images.

SurfaceShapes.html and SurfaceShapes.js illustrate Web World Wind’s surface shapes, shapes that drape themselves over the terrain. The example creates an instance of each surface shape type.

GoToLocation.html and GoToLocation.js show how to use terrain picking in conjunction with a GoToAnimator to implement a click-and-go capability. The user simply clicks on a geographic location to cause the view to move its center there. This example also shows how to use a click recognizer and a tap recognizer.

Event and Gesture Handling Examples

PlacemarksAndPicking.html and PlacemarksAndPicking.js illustrate how to use a mouse event handler and a tap gesture recognizer to pick placemarks. GoToLocation.html and GoToLocation.js show how to use a tap gesture recognizer and a click recognizer to enable the user to click on a location to center in the view.

Navigation and Viewing Examples

GoToLocation.html and GoToLocation.js show how to smoothly move the view to a specific location using a GoToAnimator. LayerManager.js also shows how to use a GoToAnimator to move the view to a location corresponding to a named point of interest.

Time Series Examples

BlueMarbleTimeSeries.html and BlueMarbleTimeSeries.js display a time series animation of the 12 months (2004) of Blue Marble imagery.

Other Examples

MultiWindow.html and MultiWindow.js show how to place multiple World Windows on the same page. This example creates three World Windows and places them in a row. Each World Window contains an imagery layer and a RenderableLayer containing a Path. These layers are shared among all the World Windows. Each World Window also contains a CompassLayer, a CoordinatesDisplayLayer, and a ViewControlsLayer which are window-specific. Thus each World Window has its own, unshared copy of these layers. Navigation among the World Windows is not synchronized, so each World Window can display a completely different view of the globe.

Shapefiles.html and Shapefiles.js illustrate the retrieval and display of shapefiles using Web World Wind’s Shapefile class. Several shapefiles are retrieved from the internet: Countries, Cities and U.S. States. Associated with these shapefiles are attributes files that identify country, state and city names. Those attribute files are automatically retrieved by Web World Wind. The example uses the shapefile record callback interface to associate attributes with the Web World Wind shape that’s created for the associated geometry.

2 Responses to Examples

  1. frenchy says:

    Is this supposed to work on an android standard tablet ?
    It does not on my samsung tab 2. Anything to tune ? (WebGL i guess)

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s