apps/web-app-template/app.js
/**
     * Define the view model for the Search Preview.
     * @param {WorldWindow} primaryGlobe
     * @returns {PreviewViewModel}
     */
Define the view model for the Search Preview.
Define the view model for the Search Preview .
function PreviewViewModel(primaryGlobe) {
        var self = this;
        this.showApiWarning = (MAPQUEST_API_KEY === null || MAPQUEST_API_KEY === "");
        this.previewGlobe = new Globe("preview-canvas", "Mercator");
        let resultsLayer = new WorldWind.RenderableLayer("Results");
        let bingMapsLayer = new WorldWind.BingRoadsLayer();
        bingMapsLayer.detailControl = 1.25; 
        this.previewGlobe.addLayer(bingMapsLayer);
        this.previewGlobe.addLayer(resultsLayer);
        let placemarkAttributes = new WorldWind.PlacemarkAttributes(null);
        placemarkAttributes.imageSource = WorldWind.configuration.baseUrl + "images/pushpins/castshadow-red.png";
        placemarkAttributes.imageScale = 0.5;
        placemarkAttributes.imageOffset = new WorldWind.Offset(
            WorldWind.OFFSET_FRACTION, 0.3,
            WorldWind.OFFSET_FRACTION, 0.0);
        this.searchResults = ko.observableArray();
        this.selected = ko.observable();
        this.previewResults = function (results) {
            if (results.length === 0) {
                return;
            }
            self.searchResults.removeAll();
            resultsLayer.removeAllRenderables();
            results.map(item => self.searchResults.push(item));
            for (let i = 0, max = results.length; i < max; i++) {
                let item = results[i];
                let placemark = new WorldWind.Placemark(
                    new WorldWind.Position(
                        parseFloat(item.lat),
                        parseFloat(item.lon), 100));
                placemark.altitudeMode = WorldWind.RELATIVE_TO_GROUND;
                placemark.displayName = item.display_name;
                placemark.attributes = placemarkAttributes;
                resultsLayer.addRenderable(placemark);
            }
            self.previewSelection(results[0]);
            $('#previewDialog').modal();
            $('#previewDialog .modal-body-table').scrollTop(0);
        };
        this.previewSelection = function (selection) {
            let latitude = parseFloat(selection.lat),
                longitude = parseFloat(selection.lon),
                location = new WorldWind.Location(latitude, longitude);
            self.selected(location);
            self.previewGlobe.wwd.goTo(location);
        };
        this.gotoSelected = function () {
            primaryGlobe.wwd.goTo(self.selected());
        };
    }
function PreviewViewModel ( primaryGlobe ) { var self = this ; this . showApiWarning = ( MAPQUEST_API_KEY === null || MAPQUEST_API_KEY === "" ) ; this . previewGlobe = new Globe ( "preview-canvas" , "Mercator" ) ; let resultsLayer = new WorldWind . RenderableLayer ( "Results" ) ; let bingMapsLayer = new WorldWind . BingRoadsLayer ( ) ; bingMapsLayer . detailControl = 1.25 ; this . previewGlobe . addLayer ( bingMapsLayer ) ; this . previewGlobe . addLayer ( resultsLayer ) ; let placemarkAttributes = new WorldWind . PlacemarkAttributes ( null ) ; placemarkAttributes . imageSource = WorldWind . configuration . baseUrl + "images/pushpins/castshadow-red.png" ; placemarkAttributes . imageScale = 0.5 ; placemarkAttributes . imageOffset = new WorldWind . Offset ( WorldWind . OFFSET_FRACTION , 0.3 , WorldWind . OFFSET_FRACTION , 0.0 ) ; this . searchResults = ko . observableArray ( ) ; this . selected = ko . observable ( ) ; this . previewResults = function ( results ) { if ( results . length === 0 ) { return ; } self . searchResults . removeAll ( ) ; resultsLayer . removeAllRenderables ( ) ; results . map ( item => self . searchResults . push ( item ) ) ; for ( let i = 0 , max = results . length ; i < max ; i ++ ) { let item = results [ i ] ; let placemark = new WorldWind . Placemark ( new WorldWind . Position ( parseFloat ( item . lat ) , parseFloat ( item . lon ) , 100 ) ) ; placemark . altitudeMode = WorldWind . RELATIVE_TO_GROUND ; placemark . displayName = item . display_name ; placemark . attributes = placemarkAttributes ; resultsLayer . addRenderable ( placemark ) ; } self . previewSelection ( results [ 0 ] ) ; $ ( '#previewDialog' ) . modal ( ) ; $ ( '#previewDialog .modal-body-table' ) . scrollTop ( 0 ) ; } ; this . previewSelection = function ( selection ) { let latitude = parseFloat ( selection . lat ) , longitude = parseFloat ( selection . lon ) , location = new WorldWind . Location ( latitude , longitude ) ; self . selected ( location ) ; self . previewGlobe . wwd . goTo ( location ) ; } ; this . gotoSelected = function ( ) { primaryGlobe . wwd . goTo ( self . selected ( ) ) ; } ; }
Define the view model for the Search Preview.
Define the view model for the Search Preview .
// Show a warning message about the MapQuest API key if missing // Create secondary globe with a 2D Mercator projection for the preview // Show next level-of-detail sooner. Default is 1.75 // Set up the common placemark attributes for the results // Create an observable array who's contents are displayed in the preview // Shows the given search results in a table with a preview globe/map // Clear the previous results // Add the results to the observable array // Create a simple placemark for each result // Initialize preview with the first item // Display the preview dialog // Update our observable holding the selected location // Go to the posiion // Go to the location held in the selected observable