Web World Wind Quickstart¶
Get Started¶
Web World Wind is a 3D virtual globe API for HTML5 and JavaScript. Web pages include Web World Wind to provide one or more virtual globes on that page.
It’s very easy to get started using Web World Wind. There’s nothing to download. You simply include a short script in an HTML page, as in this example:
<!DOCTYPE html>
<!-- This is a very simple example of using Web World Wind. -->
<html>
<head lang="en">
<meta charset="UTF-8">
<title>World Wind Example</title>
<!-- Include the Web World Wind library. -->
<script src="http://worldwindserver.net/webworldwind/worldwindlib.js" type="text/javascript"></script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<!-- Create a canvas for Web World Wind. -->
<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 World Wind.
function eventWindowLoaded() {
// Create a World Window for the canvas.
var wwd = new WorldWind.WorldWindow("canvasOne");
// Add some image layers to the World Window's globe.
wwd.addLayer(new WorldWind.BMNGOneImageLayer());
wwd.addLayer(new WorldWind.BingAerialWithLabelsLayer());
// Add a compass, a coordinates display and some view controls to the World Window.
wwd.addLayer(new WorldWind.CompassLayer());
wwd.addLayer(new WorldWind.CoordinatesDisplayLayer(wwd));
wwd.addLayer(new WorldWind.ViewControlsLayer(wwd));
}
</script>
</body>
</html>
This example first includes the Web World Wind library, worldwindlib.js, then creates an HTML5 canvas, then defines a script that creates the World Window and populates it with two image layers and three control layers. Click this link to see the web page it creates in a new window. The page contains an interactive 3D virtual globe. Try zooming in with your mouse wheel or on a mobile device with a pinch gesture. Drag the mouse or your finger to pan around the globe. Drag the right mouse button or your two fingers upward to tilt the globe.
Running Locally inside a server¶
Tu run locally a Web World Wind Application, just browse to:
and you should see that Web World Wind example in your web browser.
Source Files¶
Opening:
/var/www/html/WebWorldWind
you will find more Examples along all the source files