NASAWorldWind · ComBatVision · Dec 7, 2020 · Dec 7, 2020 · Mar 27, 2022 · Sep 11, 2022
diff --git a/apps/Explorer/Explorer.js b/apps/Explorer/Explorer.js
@@ -64,8 +64,10 @@ define(['../../src/WorldWind',
             }
 
             // Start the view pointing to a longitude within the current time zone.
-            this.wwd.navigator.lookAtLocation.latitude = 30;
-            this.wwd.navigator.lookAtLocation.longitude = -(180 / 12) * ((new Date()).getTimezoneOffset() / 60);
+            var lookAt = new WorldWind.LookAt();
+            lookAt.position.latitude = 30;
+            lookAt.position.longitude = -(180 / 12) * ((new Date()).getTimezoneOffset() / 60);
+            this.wwd.cameraFromLookAt(lookAt);
 
             this.goToBox = new GoToBox(this.wwd);
             this.layersPanel = new LayersPanel(this.wwd);

diff --git a/apps/NEO/NEO.js b/apps/NEO/NEO.js
@@ -61,8 +61,10 @@ define(['../../src/WorldWind',
             }
 
             // Start the view pointing to a longitude within the current time zone.
-            this.wwd.navigator.lookAtLocation.latitude = 30;
-            this.wwd.navigator.lookAtLocation.longitude = -(180 / 12) * ((new Date()).getTimezoneOffset() / 60);
+            var lookAt = new WorldWind.LookAt();
+            lookAt.position.latitude = 30;
+            lookAt.position.longitude = -(180 / 12) * ((new Date()).getTimezoneOffset() / 60);
+            this.wwd.cameraFromLookAt(lookAt);
 
             this.timeSeriesPlayer = new TimeSeriesPlayer(this.wwd);
             this.projectionMenu = new ProjectionMenu(this.wwd);

diff --git a/apps/SentinelWMTS/SentinelWMTS.js b/apps/SentinelWMTS/SentinelWMTS.js
@@ -80,9 +80,11 @@ define(['../../src/WorldWind',
                 }
 
                 // Start the view pointing to Paris
-                wwd.navigator.lookAtLocation.latitude = 48.86;
-                wwd.navigator.lookAtLocation.longitude = 2.37;
-                wwd.navigator.range = 5e4;
+                var lookAt = new WorldWind.LookAt();
+                lookAt.position.latitude = 48.86;
+                lookAt.position.longitude = 2.37;
+                lookAt.range = 5e4;
+                this.wwd.cameraFromLookAt(lookAt);
 
                 // Create controllers for the user interface elements.
                 new GoToBox(wwd);

diff --git a/apps/SubSurface/SubSurface.js b/apps/SubSurface/SubSurface.js
@@ -64,8 +64,10 @@ define(['../../src/WorldWind',
             this.wwd.subsurfaceMode = true;
 
             // Start the view pointing to a longitude within the current time zone.
-            this.wwd.navigator.lookAtLocation.latitude = 30;
-            this.wwd.navigator.lookAtLocation.longitude = -(180 / 12) * ((new Date()).getTimezoneOffset() / 60);
+            var lookAt = new WorldWind.LookAt();
+            lookAt.position.latitude = 30;
+            lookAt.position.longitude = -(180 / 12) * ((new Date()).getTimezoneOffset() / 60);
+            this.wwd.cameraFromLookAt(lookAt);
 
             this.goToBox = new GoToBox(this.wwd);
             this.layersPanel = new LayersPanel(this.wwd);

diff --git a/apps/USGSSlabs/USGSSlabs.js b/apps/USGSSlabs/USGSSlabs.js
@@ -75,8 +75,10 @@ define(['../../src/WorldWind',
             this.wwd.surfaceOpacity = 0.7;
 
             // Start the view pointing to a longitude within the current time zone.
-            this.wwd.navigator.lookAtLocation.latitude = 30;
-            this.wwd.navigator.lookAtLocation.longitude = -(180 / 12) * ((new Date()).getTimezoneOffset() / 60);
+            var lookAt = new WorldWind.LookAt();
+            lookAt.position.latitude = 30;
+            lookAt.position.longitude = -(180 / 12) * ((new Date()).getTimezoneOffset() / 60);
+            this.wwd.cameraFromLookAt(lookAt);
 
             // Establish the shapes and the controllers to handle picking.
             this.setupPicking();

diff --git a/apps/USGSWells/USGSWells.js b/apps/USGSWells/USGSWells.js
@@ -85,11 +85,13 @@ define(['../../src/WorldWind',
             this.wwd.surfaceOpacity = 0.5;
 
             // Start the view pointing to a location near the well data.
-            this.wwd.navigator.lookAtLocation.latitude = 33.0977;
-            this.wwd.navigator.lookAtLocation.longitude = -117.0119;
-            this.wwd.navigator.range = 1400;
-            this.wwd.navigator.heading = 90;
-            this.wwd.navigator.tilt = 60;
+            var lookAt = new WorldWind.LookAt();
+            lookAt.position.latitude = 33.0977;
+            lookAt.position.longitude = -117.0119;
+            lookAt.range = 1400;
+            lookAt.heading = 90;
+            lookAt.tilt = 60;
+            this.wwd.cameraFromLookAt(lookAt);
 
             // Establish the shapes and the controllers to handle picking.
             this.setupPicking();

diff --git a/examples/Canyon.html b/examples/Canyon.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
+    <link rel="stylesheet"
+          href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"
+            type="text/javascript"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+    <script data-main="Canyon" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>
+</head>
+<body>
+<div class="container">
+    <div>
+        <h4 style="text-align:center">WorldWind Grand Canyon Animation</h4>
+    </div>
+    <div class="row">
+        <div class="col-sm-3">
+            <div>
+                <label for="canyon">Grand Canyon Tour</label>
+                <input id="canyon" type="checkbox" />
+            </div>
+        </div>
+        <div class="col-sm-9" id="globe">
+            <canvas id="canvasOne" width="1000" height="1000" style="width: 100%; height: auto">
+                Your browser does not support HTML5 Canvas.
+            </canvas>
+        </div>
+    </div>
+</div>
+</body>
+</html>
diff --git a/examples/Canyon.js b/examples/Canyon.js
@@ -0,0 +1,169 @@
+/*
+ * Copyright 2015-2017 WorldWind Contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+requirejs(['./WorldWindShim'],
+    function (WorldWind) {
+        "use strict";
+
+        WorldWind.Logger.setLoggingLevel(WorldWind.Logger.LEVEL_WARNING);
+
+        var wwd = new WorldWind.WorldWindow("canvasOne");
+        var camera = wwd.camera;
+        var lookAt = new WorldWind.LookAt();
+        wwd.cameraAsLookAt(lookAt);
+        var layers = [
+            {layer: new WorldWind.BMNGLayer(), enabled: true},
+            {layer: new WorldWind.BingAerialWithLabelsLayer(null), enabled: true},
+            {layer: new WorldWind.CompassLayer(), enabled: true},
+            {layer: new WorldWind.CoordinatesDisplayLayer(wwd), enabled: true}
+        ];
+
+        for (var l = 0; l < layers.length; l++) {
+            layers[l].layer.enabled = layers[l].enabled;
+            wwd.addLayer(layers[l].layer);
+        }
+
+        var atmosphereLayer = new WorldWind.AtmosphereLayer();
+        wwd.addLayer(atmosphereLayer);
+
+        var canyonCheckBox = document.getElementById('canyon');
+        var canyonInterval = 0;
+        canyonCheckBox.addEventListener('change', onCanyonCheckBoxClick, false);
+
+        var canyonTour = [];
+        canyonTour.push({
+            position: new WorldWind.Position(36.17, -112.04, 2000),
+            heading: -150,
+            tilt: 70,
+            finished: false
+        });
+        canyonTour.push({
+            position: new WorldWind.Position(36.10, -112.10, 2000),
+            heading: 90,
+            tilt: 70,
+            finished: false
+        });
+        canyonTour.push({
+            position: new WorldWind.Position(36.10, -112.08, 2000),
+            heading: 120,
+            tilt: 70,
+            finished: false
+        });
+        canyonTour.push({
+            position: new WorldWind.Position(36.05, -111.98, 2000),
+            heading: 120,
+            tilt: 70,
+            finished: false
+        });
+
+        var canyonLatInc;
+        var canyonLonInc;
+        var headingInc;
+        var tiltInc;
+        var segmentStart = true;
+        var fromIndex = 0;
+        var toIndex = 1;
+        var fromNode = canyonTour[fromIndex];
+        var toNode = canyonTour[toIndex];
+        var traversalDir = 1, segHeading, segCompassHeading, headingSteps;
+
+        function goToCanyonStartComplete() {
+            runCanyonSimulation();
+        }
+
+        function onCanyonCheckBoxClick() {
+            if (this.checked) {
+                wwd.goTo(fromNode.position, goToCanyonStartComplete);
+            }
+            else {
+                clearInterval(canyonInterval);
+                wwd.redraw();
+            }
+        }
+
+        function runCanyonSimulation() {
+            canyonInterval = setInterval(function () {
+                if (toNode.finished) {
+                    fromIndex = toIndex;
+                    toIndex += traversalDir;
+                    var reset = false;
+                    if (toIndex === canyonTour.length) {
+                        traversalDir = -1;
+                        reset = true;
+                    }
+                    else if (toIndex < 0) {
+                        traversalDir = 1;
+                        reset = true;
+                    }
+                    if (reset) {
+                        toIndex = fromIndex + traversalDir;
+                        for (var i = 0; i < canyonTour.length; i++) {
+                            canyonTour[i].finished = false;
+                        }
+                    }
+                    fromNode = canyonTour[fromIndex];
+                    toNode = canyonTour[toIndex];
+                    segmentStart = true;
+                }
+
+                var camCompassHeading;
+                if (segmentStart) {
+                    segmentStart = false;
+                    var radiansPerFrame = 0.001 / 480
+                    var numFrames = Math.ceil(WorldWind.Location.greatCircleDistance(fromNode.position, toNode.position) / radiansPerFrame);
+                    canyonLatInc = (toNode.position.latitude - fromNode.position.latitude) / numFrames;
+                    canyonLonInc = (toNode.position.longitude - fromNode.position.longitude) / numFrames;
+                    segHeading = traversalDir < 0 ? WorldWind.Angle.normalizedDegrees(toNode.heading + 180) : fromNode.heading;
+                    segCompassHeading = segHeading < 0 ? segHeading + 360 : segHeading;
+                    camCompassHeading = camera.heading < 0 ? camera.heading + 360 : camera.heading;
+                    var headingDiff = segCompassHeading - camCompassHeading;
+                    if (Math.abs(headingDiff) >= 180) {
+                        headingDiff = headingDiff < 0 ? headingDiff + 360 : headingDiff - 360;
+                    }
+                    var angleInc = 0.25;
+                    headingSteps = Math.floor(Math.abs(headingDiff) / angleInc);
+                    headingInc = Math.sign(headingDiff) * angleInc;
+                    tiltInc = Math.sign(fromNode.tilt - camera.tilt) * angleInc;
+                    camera.position.altitude = fromNode.position.altitude;
+                }
+                if (headingSteps > 0 || tiltInc !== 0) {
+                    camCompassHeading = camera.heading < 0 ? camera.heading + 360 : camera.heading;
+                    camera.heading = WorldWind.Angle.normalizedDegrees(camCompassHeading + headingInc);
+                    camera.tilt += tiltInc;
+                    headingSteps--;
+                    if (headingSteps <= 0) {
+                        headingInc = 0;
+                        camera.heading = segHeading;
+                    }
+                    if ((tiltInc > 0 && camera.tilt >= fromNode.tilt) ||
+                        (tiltInc < 0 && camera.tilt <= fromNode.tilt)) {
+                        tiltInc = 0;
+                        camera.tilt = fromNode.tilt;
+                    }
+                } else {
+                    camera.position.latitude += canyonLatInc;
+                    camera.position.longitude += canyonLonInc;
+                    if ((canyonLatInc > 0 && camera.position.latitude > toNode.position.latitude) ||
+                        (canyonLatInc < 0 && camera.position.latitude < toNode.position.latitude) ||
+                        (canyonLonInc > 0 && camera.position.longitude > toNode.position.longitude) ||
+                        (canyonLonInc < 0 && camera.position.longitude < toNode.position.longitude)) {
+                        toNode.finished = true;
+                    }
+                }
+                wwd.redraw();
+            }, 25);
+        }
+
+    });
diff --git a/examples/ScreenImage.js b/examples/ScreenImage.js
@@ -110,9 +110,9 @@ requirejs(['./WorldWindShim',
 
             if (pickList.objects.length > 0) {
                 for (var p = 0; p < pickList.objects.length; p++) {
-                    // If the compass is picked, reset the navigator heading to 0 to re-orient the globe.
+                    // If the compass is picked, reset the camera heading to 0 to re-orient the globe.
                     if (pickList.objects[p].userObject instanceof WorldWind.Compass) {
-                        wwd.navigator.heading = 0;
+                        wwd.camera.heading = 0;
                         wwd.redraw();
                     }
                     else if (pickList.objects[p].userObject instanceof WorldWind.ScreenImage) {

diff --git a/examples/Views.html b/examples/Views.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
+    <link rel="stylesheet"
+          href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"
+            type="text/javascript"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+    <script data-main="Views" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>
+</head>
+<body>
+<div class="container">
+    <div class="jumbotron hidden-xs">
+        <h1 style="text-align:center">WorldWind Views Example</h1>
+    </div>
+    <div class="row">
+        <div class="col-sm-3">
+            <h4>Projection</h4>
+            <div class="dropdown" id="projectionDropdown">
+            </div>
+            <h4>Layers</h4>
+            <div class="list-group" id="layerList">
+            </div>
+            <div>
+                <label for="orbit">Camera Orbit</label>
+                <input id="orbit" type="checkbox" />
+                <label for="canyon">Grand Canyon Tour</label>
+                <input id="canyon" type="checkbox" />
+            </div>
+            <h5>View Type:</h5>
+            <select id="select-view">
+                <option value="camera">Camera</option>
+                <option value="lookat">LookAt</option>
+            </select>
+            <h5>Latitude<span id="latitude" class="pull-right"></span></h5>
+            <div id="latitudeSlider"></div>
+            <h5>Longitude<span id="longitude" class="pull-right"></span></h5>
+            <div id="longitudeSlider"></div>
+            <h5>Altitude<span id="altitude" class="pull-right"></span></h5>
+            <div id="altitudeSlider"></div>
+            <h5>Heading<span id="heading" class="pull-right"></span></h5>
+            <div id="headingSlider"></div>
+            <h5>Tilt<span id="tilt" class="pull-right"></span></h5>
+            <div id="tiltSlider"></div>
+            <h5>Roll<span id="roll" class="pull-right"></span></h5>
+            <div id="rollSlider"></div>
+            <h5>Range<span id="range" class="pull-right"></span></h5>
+            <div id="rangeSlider"></div>
+            <br>
+            <h4>Destination</h4>
+            <div class="input-group" id="searchBox">
+                <input type="text" class="form-control" placeholder="GoTo" id="searchText"/>
+                <span class="input-group-btn">
+                    <button id="searchButton" class="btn btn-primary" type="button">
+                        <span class="glyphicon glyphicon-search"></span>
+                    </button>
+                </span>
+            </div>
+        </div>
+        <div class="col-sm-9" id="globe">
+            <canvas id="canvasOne" width="1000" height="1000" style="width: 100%; height: auto">
+                Your browser does not support HTML5 Canvas.
+            </canvas>
+        </div>
+    </div>
+</div>
+</body>
+</html>