Merge remote-tracking branch 'upstream/master' (30d8901a) · Commits · aflab / astrogeology / Asc Geostac

app/src/components/App.jsx

+4 −2

Original line number	Diff line number	Diff line
		@@ -16,7 +16,7 @@ export default class App extends Component {
		}

		componentDidMount() {
		let map = new AstroMap("map-container", "Mars", {});
		let map = new AstroMap("map-container", "mars", {});
		let projectionControl = new Projection();

		let mouseControl = new MousePosition({
		@@ -25,6 +25,8 @@ export default class App extends Component {
		});

		projectionControl.addTo(map);
		let scaleControl = new L.Control.Scale({ imperial: false });
		scaleControl.addTo(map);
		mouseControl.addTo(map);
		}

app/src/js/AstroMap.js

+31 −19

Original line number	Diff line number	Diff line
		@@ -22,53 +22,65 @@ export default L.Map.AstroMap = L.Map.extend({
		center: [0, 0],
		zoom: 1,
		maxZoom: 8,
		crs: L.CRS.EPSG4326,
		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.
		/**
		* @details Initializes the map by loading the LayerCollection for
		* 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.astroProj = new AstroProj();
		this.radii = this.astroProj.getRadii(this.target);
		this.layers = {
		geodesic: new LayerCollection(this.target, "cylindrical"),
		cylindrical: new LayerCollection(this.target, "cylindrical"),
		northPolar: new LayerCollection(this.target, "north-polar stereographic"),
		southPolar: new LayerCollection(this.target, "south-polar stereographic")
		};

		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);
		this.loadLayerCollection("geodesic");
		this.loadLayerCollection("cylindrical");
		},

		// @method loadLayerCollection(name: String)
		// Adds the LayerCollection with the requrested projection name.
		/**
		* @details Adds the LayerCollection with the requrested projection name.
		*
		* @param {String} name - Name of the projection.
		*/
		loadLayerCollection: function(name) {
		this.layers[name].addTo(this);
		},

		// @method changeProjection(name: String, center: List)
		// Changes the projection of the map and resets the center and view.
		/**
		* @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 == "geodesic") {
		newCRS = L.CRS.EPSG4326;
		if (name == "cylindrical") {
		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]
		});
		}

		this.options.crs = newCRS;
		this._resetView(center, 1, true);
		this.setView(center, 1, true);
		this.loadLayerCollection(name);
		}
		});

		// exports.L.map.astroMap = function(mapDiv, target, options) {
		// return new L.map.astroMap(mapDiv, target, options);
		// };

app/src/js/AstroProj.js

+47 −38

Original line number	Diff line number	Diff line
		const 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"
		}
		]
		};
		import { MY_JSON_MAPS } from "./layers";

		/*
		* @class AstroProj
		@@ -27,30 +7,59 @@ const projectionDefs = {
		* by the USGS.
		*/
		export default 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"];
		/**
		* @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'}.
		*/
		getRadii(target) {
		var targets = MY_JSON_MAPS["targets"];

		let radii = {};
		for (let i = 0; i < targets.length; i++) {
		let currentTarget = targets[i];
		if (currentTarget["name"].toLowerCase() == target.toLowerCase()) {
		radii["a"] = parseFloat(currentTarget["aaxisradius"] * 1000);
		radii["c"] = parseFloat(currentTarget["caxisradius"] * 1000);
		break;
		}
		}
		console.log("No projection found for the target");
		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'}.
		*/
		getStringAndCode(target, name) {
		let projections = projectionDefs[target.toLowerCase()];
		for (let i = 0; i < projections.length; i++) {
		if (name.toLowerCase() == projections[i]["name"]) {
		let radii = this.getRadii(target);

		if (name == "northPolar") {
		return {
		code: projections[i]["code"],
		string: projections[i]["string"]
		code: "EPSG:32661",
		string:
		"+proj=stere +lat_0=90 +lon_0=0 +k=1 +x_0=0 +y_0=0 +a=${radii['a']} +b=${radii['c']} +units=m +no_defs"
		};
		} else if (name == "southPolar") {
		return {
		code: "EPSG:32761",
		string:
		"+proj=stere +lat_0=-90 +lon_0=0 +k=1 +x_0=0 +y_0=0 +a=${radii['a']} +b=${radii['c']} +units=m +no_defs"
		};
		} else if (name == "cylindrical") {
		return {
		code: "EPSG:4326",
		string: "+proj=longlat +a=${radii['a']} +b=${radii['c']} +no_defs"
		};
		} else {
		console.log("No projection found for the target and name given.");
		}
		}
		console.log("No projection found for the target");
		}
		}

app/src/js/LayerCollection.js

+25 −16

Original line number	Diff line number	Diff line
		@@ -8,8 +8,12 @@ import { MY_JSON_MAPS } from "./layers";
		* for quick and easy use in the AstroMap class.
		*/
		export default L.LayerCollection = L.Class.extend({
		// @method initialize(target: String. projName: String)
		// Constructor that creates the layers.
		/**
		* @details Constructor that creates the layers.
		*
		* @param {String} target Name of the target.
		* @param {String} projName Name of the projection.
		*/
		initialize: function(target, projName) {
		this.target = target;
		this.projName = projName;
		@@ -23,9 +27,12 @@ export default L.LayerCollection = L.Class.extend({
		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.
		/**
		* 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}
		*/
		parseJSON: function() {
		let layers = {
		base: [],
		@@ -66,8 +73,10 @@ export default 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.
		/**
		* Creates WMS layers and adds them to the list of base layers.
		* @param {List} layers - List of base layer information.
		*/
		createBaseLayers: function(layers) {
		for (let i = 0; i < layers.length; i++) {
		let layer = layers[i];
		@@ -84,8 +93,10 @@ export default L.LayerCollection = L.Class.extend({
		}
		},

		// @method createOverlays(layers: Object of layers)
		// Creates WMS layers and adds them to the list of overlays.
		/**
		* Creates WMS layers and adds them to the list of overlays.
		* @param {List} layers - List of overlay information.
		*/
		createOverlays: function(layers) {
		for (let i = 0; i < layers.length; i++) {
		let layer = layers[i];
		@@ -102,9 +113,11 @@ export default L.LayerCollection = L.Class.extend({
		}
		},

		// @method addTo(map: AstroMap)
		// Removes the current layers, adds the base layers and overlays to the map,
		// and sets teh default layer.
		/**
		* 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) {
		// Remove old layers
		map.eachLayer(function(layer) {
		@@ -125,7 +138,3 @@ export default L.LayerCollection = L.Class.extend({
		L.LayerCollection.layerControl.addTo(map);
		}
		});

		// exports.L.layerCollection = function(target, projName) {
		// return new L.LayerCollection(target, projName);
		// };

app/src/js/Projection.js

+22 −16

Original line number	Diff line number	Diff line
		@@ -8,43 +8,49 @@ import "leaflet";
		* Uses predefined GUI elements.
		*/
		export default L.Control.Projection = L.Control.extend({
		// @method onAdd(map: AstroMap)
		// Grabs the button GUI elements and adds onclick events to them.

		/**
		* 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) {
		let container = L.DomUtil.create("div");

		this.northPolar = L.DomUtil.get("projectionNorthPole");
		L.DomEvent.on(this.northPolar, "click", this.loadNorthPolar, this);
		this.geodesic = L.DomUtil.get("projectionCylindrical");
		L.DomEvent.on(this.geodesic, "click", this.loadGeodesic, this);
		this.cylindrical = L.DomUtil.get("projectionCylindrical");
		L.DomEvent.on(this.cylindrical, "click", this.loadCylindrical, this);
		this.southPolar = L.DomUtil.get("projectionSouthPole");
		L.DomEvent.on(this.southPolar, "click", this.loadSouthPolar, this);

		return container;
		},

		// @method loadNorthPolar(e: DomEvent)
		// Sets the map's projection to north-polar stereographic.
		/**
		* Sets the map's projection to north-polar stereographic.
		* @param {Event} e - Onclick event.
		*/
		loadNorthPolar: function(e) {
		let center = [90, 0];
		this._map.changeProjection("northPolar", center);
		},

		// @method loadSouthPolar(e: DomEvent)
		// Sets the map's projection to south-polar stereographic.
		/**
		* Sets the map's projection to south-polar stereographic.
		* @param {Event} e - Onclick event.
		*/
		loadSouthPolar: function(e) {
		let center = [-90, 0];
		this._map.changeProjection("southPolar", center);
		},

		// @method loadGeodesic(e: DomEvent)
		// Sets the map's projection to geodesic.
		loadGeodesic: function(e) {
		/**
		* Sets the map's projection to cylindrical.
		* @param {Event} e - Onclick event.
		*/
		loadCylindrical: function(e) {
		let center = [0, 0];
		this._map.changeProjection("geodesic", center);
		this._map.changeProjection("cylindrical", center);
		}
		});

		// exports.L.control.projection = function(options) {
		// return new L.Control.Projection(options);
		// };