Commit eca9b918 authored by Kaitlyn's avatar Kaitlyn
Browse files

Added AstroPoj class and documentation.

parent c43da2b9

examples/mars.html

+2 −1
Original line number Diff line number Diff line
@@ -15,9 +15,10 @@ 
    <script src="../lib/proj4leaflet.js"></script>

    <!-- <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> -->

    <script src="../src/layers.js"></script>

    <script src="../src/PlanetaryMap.js"></script>

    <script src="../src/AstroMap.js"></script>

    <script src="../src/LayerCollection.js"></script>

    <script src="../src/Projection.js"></script>

    <script src="../src/AstroProj.js"></script>



    <title>Mars Map</title>

  </head>

examples/script.js

+1 −4
Original line number Diff line number Diff line 
var marsMap = new L.Map.AstroMap("map", "Mars");

var marsMap = new L.Map.AstroMap("map", "Mars", {});



var projectionControl = new L.Control.Projection();

projectionControl.addTo(marsMap);
@@ -14,19 +14,16 @@ northPoleProjection.onclick = function() { 
  northPoleProjection.src = "./images/north-pole-hot.png";

  southPoleProjection.src = "./images/south-pole.png";

  cylindricalProjection.src = "./images/cylindrical.png";

  // marsMap.createMap(northPoleProjection.title);

};



southPoleProjection.onclick = function() {

  northPoleProjection.src = "./images/north-pole.png";

  southPoleProjection.src = "./images/south-pole-hot.png";

  cylindricalProjection.src = "./images/cylindrical.png";

  // marsMap.createMap(southPoleProjection.title);

};



cylindricalProjection.onclick = function() {

  northPoleProjection.src = "./images/north-pole.png";

  southPoleProjection.src = "./images/south-pole.png";

  cylindricalProjection.src = "./images/cylindrical-hot.png";

  // marsMap.createMap(cylindricalProjection.title);

};

src/AstroMap.js

+40 −10
Original line number Diff line number Diff line 
/*

 * @class AstroMap

 * @aka L.Map.AstroMap

 * @inherits L.Map

 *

 * The central class that creates an interactive map in the HTML.

 * Works with all target bodies supported by the USGS by loading the body's

 * base layers and overlays in a LayerCollection. Allows users to change

 * the projection of the map.

 *

 * @example

 *

 * ```js

 * // initialize the map on the "map" div with the target Mars

 * L.Map.AstroMap("map", "Mars", {});

 * ```

 */

L.Map.AstroMap = L.Map.extend({

  options: {

    center: [0, 0],
@@ -7,9 +24,13 @@ L.Map.AstroMap = L.Map.extend({ 
    attributionControl: false

  },



  // @method initialize(mapDiv: String, target: String, options?: Zoom/pan options)

  // Initializes the map by loading the LayerCollection for each supported projection

  // and setting the default options.

  initialize: function(mapDiv, target, options) {

    this.mapDiv = mapDiv;

    this.target = target;

    this.AstroProj = new AstroProj();

    this.layers = {

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

      northPolar: new L.LayerCollection(
@@ -27,22 +48,31 @@ L.Map.AstroMap = L.Map.extend({ 
    this.loadLayerCollection("geodesic");

  },



  // @method loadLayerCollection(name: String)

  // Adds the LayerCollection with the requrested projection name.

  loadLayerCollection: function(name) {

    this.layers[name].addTo(this);

  },



  changeProjection: function(projName, center) {

    var northStere = new L.Proj.CRS(

      "EPSG:32661",

      "+proj=stere +lat_0=90 +lon_0=0" +

        "+k=1 +x_0=0 +y_0=0 +a=3396190 +b=3376200 +units=m +no_defs",

      {

  // @method changeProjection(name: String, center: List)

  // Changes the projection of the map and resets the center and view.

  changeProjection: function(name, center) {

    let newCRS = null;

    if (name == "geodesic") {

      newCRS = L.CRS.EPSG4326;

    } else {

      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]

      });

    }

    );

    this.options.crs = northStere;

    this.options.crs = newCRS;

    this._resetView(center, 1, true);

    this.loadLayerCollection(projName);

    this.loadLayerCollection(name);

  }

});



// exports.L.map.astroMap = function(mapDiv, target, options) {

//   return new L.map.astroMap(mapDiv, target, options);

// };

src/AstroProj.js

0 → 100644
+56 −0
Original line number Diff line number Diff line 
let projectionDefs = {

  mars: [

    {

      name: "northpolar",

      code: "EPSG:32661",

      string:

        "+proj=stere +lat_0=90 +lon_0=0 +k=1 +x_0=0 +y_0=0 +a=3396190 +b=3396190 +units=m +no_defs"

    },

    {

      name: "southpolar",

      code: "EPSG:32761",

      string:

        "+proj=stere +lat_0=-90 +lon_0=0 +k=1 +x_0=0 +y_0=0 +a=3396190 +b=3376200 +units=m +no_defs"

    },

    {

      name: "geodesic",

      code: "EPSG:4326",

      string: "+proj=longlat +a=3396190 +b=3396190 +no_defs"

    }

  ]

};



/*

 * @class AstroProj

 *

 * Helper class that stores projections for each target supported

 * by the USGS.

 */

class AstroProj {

  // @method getString(target: String, code: String): String

  // Returns the proj-string for a requested target given the proj-code.

  getString(target, code) {

    let projections = projectionDefs[target.toLowerCase()];

    for (let i = 0; i < projections.length; i++) {

      if (code == projections[i]["code"]) {

        return projections[i]["string"];

      }

    }

    console.log("No projection found for the target");

  }



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

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

  getStringAndCode(target, name) {

    let projections = projectionDefs[target.toLowerCase()];

    for (let i = 0; i < projections.length; i++) {

      if (name.toLowerCase() == projections[i]["name"]) {

        return {

          code: projections[i]["code"],

          string: projections[i]["string"]

        };

      }

    }

    console.log("No projection found for the target");

  }

}

src/LayerCollection.js

+41 −17
Original line number Diff line number Diff line 
/*

 * @class LayerCollection

 * @aka L.Class.LayerCollection

 * @inherits L.Class

 *

 * Holds the base layers and overlays of a particular projection

 * for quick and easy use in the AstroMap class.

 */

L.LayerCollection = L.Class.extend({

  // @method initialize(target: String. projName: String)

  // Constructor that creates the layers.

  initialize: function(target, projName) {

    this.target = target;

    this.projName = projName;
@@ -7,26 +17,29 @@ L.LayerCollection = L.Class.extend({ 
    this.defaultLayerIndex = 0;

    L.LayerCollection.layerControl = null;



    var layers = this.parseJSON();

    let layers = this.parseJSON();

    this.createBaseLayers(layers["base"]);

    this.createOverlays(layers["overlays"]);

  },



  // @method parseJSON(): Object of Layers

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

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

  parseJSON: function() {

    var layers = {

    let layers = {

      base: [],

      overlays: [],

      wfs: []

    };



    var targets = myJSONmaps["targets"];

    for (var i = 0; i < targets.length; i++) {

      var currentTarget = targets[i];

    let targets = myJSONmaps["targets"];

    for (let i = 0; i < targets.length; i++) {

      let currentTarget = targets[i];



      if (currentTarget["name"].toLowerCase() == this.target.toLowerCase()) {

        var jsonLayers = currentTarget["webmap"];

        for (var j = 0; j < jsonLayers.length; j++) {

          var currentLayer = jsonLayers[j];

        let jsonLayers = currentTarget["webmap"];

        for (let j = 0; j < jsonLayers.length; j++) {

          let currentLayer = jsonLayers[j];

          if (

            currentLayer["projection"].toLowerCase() !=

            this.projName.toLowerCase()
@@ -52,26 +65,30 @@ L.LayerCollection = L.Class.extend({ 
    return layers;

  },



  // @method createBaseLayers(layers: Object of layers)

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

  createBaseLayers: function(layers) {

    for (var i = 0; i < layers.length; i++) {

      var layer = layers[i];

    for (let i = 0; i < layers.length; i++) {

      let layer = layers[i];

      if (layer["projection"] == this.projName) {

        var baseLayer = L.tileLayer.wms(

        let baseLayer = L.tileLayer.wms(

          String(layer["url"]) + "?map=" + String(layer["map"]),

          {

            layers: String(layer["layer"])

          }

        );

        var name = String(layer["displayname"]);

        let name = String(layer["displayname"]);

        this.baseLayers[name] = baseLayer;

      }

    }

  },



  // @method createOverlays(layers: Object of layers)

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

  createOverlays: function(layers) {

    for (var i = 0; i < layers.length; i++) {

      var layer = layers[i];

      var overlay = L.tileLayer.wms(

    for (let i = 0; i < layers.length; i++) {

      let layer = layers[i];

      let overlay = L.tileLayer.wms(

        String(layer["url"]) + "?map=" + String(layer["map"]),

        {

          layers: String(layer["layer"]),
@@ -79,11 +96,14 @@ L.LayerCollection = L.Class.extend({ 
          format: "image/png"

        }

      );

      var name = String(layer["displayname"]);

      let name = String(layer["displayname"]);

      this.overlays[name] = overlay;

    }

  },



  // @method addTo(map: AstroMap)

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

  // and sets teh default layer.

  addTo: function(map) {

    // Remove old layers

    map.eachLayer(function(layer) {
@@ -94,7 +114,7 @@ L.LayerCollection = L.Class.extend({ 
      L.LayerCollection.layerControl.remove();

    }



    var defaultLayer = Object.keys(this.baseLayers)[this.defaultLayerIndex];

    let defaultLayer = Object.keys(this.baseLayers)[this.defaultLayerIndex];

    this.baseLayers[defaultLayer].addTo(map);



    L.LayerCollection.layerControl = L.control.layers(
@@ -104,3 +124,7 @@ L.LayerCollection = L.Class.extend({ 
    L.LayerCollection.layerControl.addTo(map);

  }

});



// exports.L.layerCollection = function(target, projName) {

//   return new L.LayerCollection(target, projName);

// };