Commit 036666d1 authored by Kaitlyn's avatar Kaitlyn
Browse files

Moved wfs layer code to LayerCollection. Loads middle-man server for now.

parent 2ca9b025

app/src/js/AstroMap.js

+39 −53
Original line number Diff line number Diff line 
import AstroProj from "./AstroProj";

import LayerCollection from "./LayerCollection";

import $ from "jquery";



/*

 * @class AstroMap

 * @aka L.Map.AstroMap
@@ -31,18 +31,26 @@ export default L.Map.AstroMap = L.Map.extend({ 
   *          each supported projection and setting default options.

   *

   * @param {String} mapDiv - ID of the div for the map.

   *

   * @param {String} target - Name of target to display layers for.

   *

   * @param {Object} options - Options for the map.

   */

  initialize: function(mapDiv, target, options) {

    this.mapDiv = mapDiv;

    this.target = target;

    this.astroProj = new AstroProj();

    this.radii = this.astroProj.getRadii(this.target);

    this._mapDiv = mapDiv;

    this._target = target;

    this._astroProj = new AstroProj();

    this._radii = this._astroProj.getRadii(this._target);

    this.layers = {

      cylindrical: new LayerCollection(this.target, "cylindrical"),

      northPolar: new LayerCollection(this.target, "north-polar stereographic"),

      southPolar: new LayerCollection(this.target, "south-polar stereographic")

      northPolar: new LayerCollection(

        this._target,

        "north-polar stereographic"

      ),

      southPolar: new LayerCollection(

        this._target,

        "south-polar stereographic"

      ),

      cylindrical: new LayerCollection(this._target, "cylindrical")

    };



    if (this.layers["northPolar"].isEmpty()) {
@@ -56,22 +64,12 @@ export default L.Map.AstroMap = L.Map.extend({ 
      this._hasSouthPolar = true;

    }



    this.defaultProj = L.extend({}, L.CRS.EPSG4326, { R: this.radii["a"] });

    this.options["crs"] = this.defaultProj;

    this._defaultProj = L.extend({}, L.CRS.EPSG4326, { R: this._radii["a"] });

    this.options["crs"] = this._defaultProj;



    L.setOptions(this, options);

    L.Map.prototype.initialize.call(this, this.mapDiv, this.options);

    L.Map.prototype.initialize.call(this, this._mapDiv, this.options);

    this.loadLayerCollection("cylindrical");



    this.featureLayer = new L.GeoJSON(null, {

      onEachFeature: function(feature, layer) {

        if (feature.properties && feature.properties.name) {

          layer.bindPopup(feature.properties.name);

        }

      }

    }).addTo(this);

    this.load_wfs();

    this.on("moveend", this.load_wfs);

  },



  /**
@@ -87,14 +85,15 @@ export default L.Map.AstroMap = L.Map.extend({ 
   * @details Changes the projection of the map and resets the center and view.

   * 

   * @param {String} name - Name of Projection.

   * 

   * @param {List} center - Center of map based off of projection.

]   */

  changeProjection: function(name, center) {

    let newCRS = null;

    if (name == "cylindrical") {

      newCRS = this.defaultProj;

      newCRS = this._defaultProj;

    } else {

      let proj = this.astroProj.getStringAndCode(this.target, name);

      let proj = this._astroProj.getStringAndCode(this._target, name);

      newCRS = new L.Proj.CRS(proj["code"], proj["string"], {

        resolutions: [8192, 4096, 2048, 1024, 512, 256, 128],

        origin: [0, 0]
@@ -106,42 +105,29 @@ export default L.Map.AstroMap = L.Map.extend({ 
    this.loadLayerCollection(name);

  },



  /**

   * @details Checks if the map has a layer collection for northPolar.

   *

   * @return {Boolean} Returns true if there is a northPolar collection.

   */

  hasNorthPolar: function() {

    return this._hasNorthPolar;

  },



  /**

   * @details Checks if the map has a layer collection for southPolar.

   *

   * @return {Boolean} Returns true if there is a southPolar collection.

   */

  hasSouthPolar: function() {

    return this._hasSouthPolar;

  },



  load_wfs: function() {

    var geoJsonUrl =

      "https://astrocloud.wr.usgs.gov/dataset/data/nomenclature/" +

      this.target.toUpperCase() +

      "/WFS";

    var defaultParameters = {

      service: "WFS",

      version: "1.1.0",

      request: "GetFeature",

      outputFormat: "application/json",

      srsName: "EPSG:4326"

    };



    var customParams = {

      bbox: this.getBounds().toBBoxString()

    };

    var parameters = L.Util.extend(defaultParameters, customParams);

    console.log(geoJsonUrl + L.Util.getParamString(parameters));



    var that = this;

    $.ajax({

      url: geoJsonUrl + L.Util.getParamString(parameters),

      dataType: "json",

      timeout: 30000,

      success: function(data) {

        // this.featureLayer.clearLayers();

        that.featureLayer.addData(data);

      }

    });

  /**

   * @details Retusn the name of the target.

   * @return {String} Name of target.

   */

  target: function() {

    return this._target;

  }

});

app/src/js/AstroProj.js

+5 −4
Original line number Diff line number Diff line
@@ -11,7 +11,8 @@ export default class AstroProj { 
   * @details Finds the a and c radii of a given target.

   *

   * @param {String} target - Name of the target.

   * @return {Object} Radii Object in form: {'a': , 'c'}.

   *

   * @return {Object} Radii Object in form: {'a': , 'c': }.

   */

  getRadii(target) {

    var targets = MY_JSON_MAPS["targets"];
@@ -28,13 +29,13 @@ export default class AstroProj { 
    return radii;

  }



  // @method getStringAndCode(target: String, name: String): [String, String]

  // Returns the proj-string for a requested target and projection name.

  /**

   * @details Returns the proj-string for a requested target and projection name.

   *

   * @param {String} target - Name of the target.

   *

   * @param {String} name - Name of the projection.

   *

   * @return {Object} Object storing the proj-string and code

   *                  in the form: {'code': , 'string'}.

   */

app/src/js/LayerCollection.js

+76 −11
Original line number Diff line number Diff line 
import { MY_JSON_MAPS } from "./layers";

import $ from "jquery";



/*

 * @class LayerCollection

 * @aka L.Class.LayerCollection
@@ -12,6 +14,7 @@ export default L.LayerCollection = L.Class.extend({ 
   * @details Constructor that creates the layers.

   *

   * @param {String} target Name of the target.

   *

   * @param {String} projName Name of the projection.

   */

  initialize: function(target, projName) {
@@ -20,6 +23,7 @@ export default L.LayerCollection = L.Class.extend({ 
    this.baseLayers = {};

    this.overlays = {};

    this.defaultLayerIndex = 0;

    this.wfsLayer = null;

    L.LayerCollection.layerControl = null;



    let layers = this.parseJSON();
@@ -28,8 +32,9 @@ export default L.LayerCollection = L.Class.extend({ 
  },



  /**

   * Parses the USGS JSON, creates layer objects for a particular

   * @details Parses the USGS JSON, creates layer objects for a particular

   *          target and projection, and stores them in a JS object.

   *

   * @return {Object} - Dictionary containing the layer information in

   *                    the format: {base: [], overlays: []}

   */
@@ -74,7 +79,8 @@ export default L.LayerCollection = L.Class.extend({ 
  },



  /**

   * Creates WMS layers and adds them to the list of base layers.

   * @details Creates WMS layers and adds them to the list of base layers.

   *

   * @param  {List} layers - List of base layer information.

   */

  createBaseLayers: function(layers) {
@@ -94,7 +100,8 @@ export default L.LayerCollection = L.Class.extend({ 
  },



  /**

   * Creates WMS layers and adds them to the list of overlays.

   * @details Creates WMS layers and adds them to the list of overlays.

   *

   * @param  {List} layers - List of overlay information.

   */

  createOverlays: function(layers) {
@@ -111,11 +118,21 @@ export default L.LayerCollection = L.Class.extend({ 
      let name = String(layer["displayname"]);

      this.overlays[name] = overlay;

    }



    this.wfsLayer = new L.GeoJSON(null, {

      onEachFeature: function(feature, layer) {

        if (feature.properties && feature.properties.name) {

          layer.bindPopup(feature.properties.name);

        }

      }

    });

    this.overlays["Show Feature Names WFS"] = this.wfsLayer;

  },



  /**

   * Removes the current layers, adds the base layers and overlays to the map,

   * @details Removes the current layers, adds the base layers and overlays to the map,

   *          and sets teh default layer.

   *

   * @param {AstroMap} map - Map to add layers to.

   */

  addTo: function(map) {
@@ -138,9 +155,57 @@ export default L.LayerCollection = L.Class.extend({ 
      );

      L.LayerCollection.layerControl.addTo(map);

    }



    this.loadWFS(map);

    // Commented out for now because WFS queries are super slow.

    // map.on("moveend", this.loadWFS);

  },



  /**

   * @details Checks to see if there are any base layers.

   * @return {Boolean} Returns true if there are no base layers,

   *                   false otherwise.

   */

  isEmpty: function() {

    return (Object.entries(this.baseLayers).length == 0);

    return Object.entries(this.baseLayers).length == 0;

  },



  /**

   * @details Creates the GeoServer query, queries GeoServer for

   *          the feature names, and adds the data to the GeoJSON layer.

   *

   * @param  {AstroMap} map - The AstroMap to add the GeoJSON layer to.

   */

  loadWFS: function(map) {

    let geoJsonUrl =

      "https://astrocloud.wr.usgs.gov/dataset/data/nomenclature/" +

      map.target().toUpperCase() +

      "/WFS";



    let defaultParameters = {

      service: "WFS",

      version: "1.1.0",

      request: "GetFeature",

      outputFormat: "application/json",

      srsName: "EPSG:4326"

    };



    let customParams = {

      bbox: map.getBounds().toBBoxString()

    };



    let parameters = L.Util.extend(defaultParameters, customParams);

    console.log(geoJsonUrl + L.Util.getParamString(parameters));



    let thisContext = this;

    $.ajax({

      url: geoJsonUrl + L.Util.getParamString(parameters),

      dataType: "json",

      timeout: 30000,

      success: function(data) {

        // this.featureLayer.clearLayers();

        thisContext.wfsLayer.addData(data);

      }

    });

  }

});

app/src/js/Projection.js

+12 −8
Original line number Diff line number Diff line
@@ -8,10 +8,11 @@ import "leaflet"; 
 * Uses predefined GUI elements.

 */

export default L.Control.Projection = L.Control.extend({

 

  /**

   * Grabs the button GUI elements and adds onclick events to them.

   * @details Grabs the button GUI elements and adds onclick events to them.

   *

   * @param  {AstroMap} map - The map to add the control to.

   *

   * @return {Div} Container containing the projection buttons.

   */

  onAdd: function(map) {
@@ -38,7 +39,8 @@ export default L.Control.Projection = L.Control.extend({ 
  },



  /**

   * Sets the map's projection to north-polar stereographic.

   * @details Sets the map's projection to north-polar stereographic.

   *

   * @param  {Event} e - Onclick event.

   */

  loadNorthPolar: function(e) {
@@ -47,7 +49,8 @@ export default L.Control.Projection = L.Control.extend({ 
  },



  /**

   * Sets the map's projection to south-polar stereographic.

   * @details Sets the map's projection to south-polar stereographic.

   *

   * @param  {Event} e - Onclick event.

   */

  loadSouthPolar: function(e) {
@@ -56,7 +59,8 @@ export default L.Control.Projection = L.Control.extend({ 
  },



  /**

   * Sets the map's projection to cylindrical.

   * @details Sets the map's projection to cylindrical.

   *

   * @param  {Event} e - Onclick event.

   */

  loadCylindrical: function(e) {