WebWorldWind/apps/NaturalLanguageForm/js/LayerManager.js

/**
 * Created by Matthew on 7/31/2015.
 *
 * Adapted from http://worldwindserver.net/webworldwind/examples/LayerManager.js
 */
define(['HUDMaker'], function (HUDMaker) {
        function LayerManager ( worldWindow ) {
            var thisExplorer = this;

            this.wwd = worldWindow;

            this.roundGlobe = this.wwd.globe;

            this.createProjectionList();

            $("#projectionDropdown").find("li").on("click", function (e) {
                thisExplorer.onProjectionClick(e);
            });

            this.synchronizeLayerList();

            $("#searchBox").find("button").on("click", function (e) {
                thisExplorer.onSearchButton(e);
            });

            this.geocoder = new WorldWind.NominatimGeocoder();
            this.goToAnimator = new WorldWind.GoToAnimator(this.wwd);
            $("#searchText").on("keypress", function (e) {
                thisExplorer.onSearchTextKeyPress($(this), e);
            });
        };

        LayerManager.prototype.onProjectionClick = function (event) {
            var projectionName = event.target.innerText || event.target.innerHTML;
            $("#projectionDropdown").find("button").html(projectionName + ' <span class="caret"></span>');

            if (projectionName === "3D") {
                if (!this.roundGlobe) {
                    this.roundGlobe = new WorldWind.Globe(new WorldWind.EarthElevationModel());
                }

                if (this.wwd.globe !== this.roundGlobe) {
                    this.wwd.globe = this.roundGlobe;
                }
            } else {
                if (!this.flatGlobe) {
                    this.flatGlobe = new WorldWind.Globe2D();
                }

                if (projectionName === "Equirectangular") {
                    this.flatGlobe.projection = new WorldWind.ProjectionEquirectangular();
                } else if (projectionName === "Mercator") {
                    this.flatGlobe.projection = new WorldWind.ProjectionMercator();
                } else if (projectionName === "North Polar") {
                    this.flatGlobe.projection = new WorldWind.ProjectionPolarEquidistant("North");
                } else if (projectionName === "South Polar") {
                    this.flatGlobe.projection = new WorldWind.ProjectionPolarEquidistant("South");
                } else if (projectionName === "North UPS") {
                    this.flatGlobe.projection = new WorldWind.ProjectionUPS("North");
                } else if (projectionName === "South UPS") {
                    this.flatGlobe.projection = new WorldWind.ProjectionUPS("South");
                }

                if (this.wwd.globe !== this.flatGlobe) {
                    this.wwd.globe = this.flatGlobe;
                }
            }

            this.wwd.redraw();
        };

        LayerManager.prototype.onLayerClick = function (layerButton) {
            var layerName = layerButton.text();

            // Update the layer state for the selected layer.
            for (var i = 0, len = this.wwd.layers.length; i < len; i++) {
                var layer = this.wwd.layers[i];
                if (layer.hide) {
                    continue;
                }

                if (layer.displayName === layerName) {
                    layer.enabled = !layer.enabled;
                    if (layer.enabled) {
                        layerButton.addClass("active");
                    } else {
                        layerButton.removeClass("active");
                    }
                    this.wwd.redraw();
                }
            }
        };

        LayerManager.prototype.synchronizeLayerList = function () {
            var thisExplorer = this;
            var layerListItem = $("#layerList");

            layerListItem.find("button").off("click");
            layerListItem.find("button").remove();

            // Synchronize the displayed layer list with the World Window's layer list.
            for (var i = 0, len = this.wwd.layers.length; i < len; i++) {
                var layer = this.wwd.layers[i];
                if (layer.hide) {
                    continue;
                }
                var layerItem = $('<button class="list-group-item btn btn-block">' + layer.displayName + '</button>');
                layerListItem.append(layerItem);

                if (layer.enabled) {
                    layerItem.addClass("active");
                } else {
                    layerItem.removeClass("active");
                }
                this.wwd.redraw();
            }

            layerListItem.find("button").on("click", function (e) {
                thisExplorer.onLayerClick($(this));
            });



        };

        LayerManager.prototype.createProjectionList = function () {
            var projectionNames = [
                "3D",
                "Equirectangular",
                "Mercator",
                "North Polar",
                "South Polar",
                "North UPS",
                "South UPS"
            ];
            var projectionDropdown = $("#projectionDropdown");

            var dropdownButton = $('<button class="btn btn-info btn-block dropdown-toggle" type="button" data-toggle="dropdown">3D<span class="caret"></span></button>');
            projectionDropdown.append(dropdownButton);

            var ulItem = $('<ul class="dropdown-menu">');

            projectionDropdown.append(ulItem);

            for (var i = 0; i < projectionNames.length; i++) {
                var projectionItem = $('<li><a >' + projectionNames[i] + '</a></li>');
                ulItem.append(projectionItem);
            }

            ulItem = $('</ul>');
            projectionDropdown.append(ulItem);
        };

        LayerManager.prototype.onSearchButton = function (event) {
            this.performSearch($("#searchText")[0].value)
        };

        LayerManager.prototype.onSearchTextKeyPress = function (searchInput, event) {
            if (event.keyCode === 13) {
                searchInput.blur();
                this.performSearch($("#searchText")[0].value)
            }
        };

        LayerManager.prototype.performSearch = function (queryString) {
            if (queryString) {
                var thisLayerManager = this,
                    latitude, longitude;

                if (queryString.match(WorldWind.WWUtil.latLonRegex)) {
                    var tokens = queryString.split(",");
                    latitude = parseFloat(tokens[0]);
                    longitude = parseFloat(tokens[1]);
                    thisLayerManager.goToAnimator.goTo(new WorldWind.Location(latitude, longitude));
                } else {
                    this.geocoder.lookup(queryString, function (geocoder, result) {
                        if (result.length > 0) {
                            latitude = parseFloat(result[0].lat);
                            longitude = parseFloat(result[0].lon);

                            WorldWind.Logger.log(
                                WorldWind.Logger.LEVEL_INFO, queryString + ": " + latitude + ", " + longitude);

                            thisLayerManager.goToAnimator.goTo(new WorldWind.Location(latitude, longitude));
                        }
                    });
                }
            }
        };

        /*
        * Creates a hud with an html anchor for the layer manager to construct itself on.
        *
        * @param wwd: Worldwindow to apply to.
         */
        function LayerManagerHud ( wwd ) {
            var jQueryDoc = $(window.document);

            var anchorForLayerManager = new HUDMaker('Layer Menu', [jQueryDoc.width()-240,0]);

            var layerAnchor = $('<div>');
            layerAnchor.attr('class', 'list-group');
            layerAnchor.attr('id', 'layerList');
            anchorForLayerManager.addAnchor(layerAnchor);
            this.anchor = anchorForLayerManager
            this.layerMan = new LayerManager(wwd)

        }

        return LayerManagerHud
    }



)