Skip to content

Latest commit

 

History

History
77 lines (58 loc) · 2.59 KB

simple-example.md

File metadata and controls

77 lines (58 loc) · 2.59 KB
Raw

Simple Example

This is how to use a WorldWind.WorldWindow object.

// 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));
}

This is how to embed WorldWind into an HTML 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://unpkg.com/@nasaworldwind/[email protected]/build/dist/worldwind.min.js" type="text/javascript"></script>
        
    <!--  Or, include the WorldWindJS library. -->
    <!-- <script src="https://unpkg.com/[email protected]/build/dist/worldwind.min.js" type="text/javascript"></script> -->
  
  </head>

  <body>
    <div id="globe" style="width: 100vw; height: 100vh; position: absolute; top: 0px; left: 0px;">
      <!-- Create a canvas for Web WorldWind. -->
      <canvas id="canvasOne" style="width: 100%; height: 100%; 
                        background-color: rgb(36,74,101);">
        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>