Merge pull request #14 from amystamile/pagination (af293bbe) · Commits · aflab / astrogeology / Asc Geostac

app/package.json

+2 −1

Original line number	Diff line number	Diff line
		@@ -90,6 +90,7 @@
		"react-dom": "^16.12.0",
		"requirejs": "^2.3.6",
		"typeface-roboto": "0.0.75",
		"wicket": "1.3.5"
		"wicket": "1.3.5",
		"leaflet-html-legend":"0.3.5"
		}
		}

app/src/js/ApiJsonCollection.js

+6 −4

Original line number	Diff line number	Diff line


		function callAPI() {
		return fetch("https://stac.astrogeology.usgs.gov/api/collections")
		.then(response => response.json());
		}

		function getItemCollection(name) {
		function getItemCollection(name, page) {
		var urlArray = [];
		return callAPI().then(result => {
		for (let i = 0; i < result.collections.length; i++) {
		@@ -14,7 +13,10 @@ function getItemCollection(name) {
		for (let j = 0; j < length; j++) {
		let link = result.collections[i].links[j];
		if (link.rel == 'items') {
		var url = new URL(result.collections[i].links[j].href);
		var url = result.collections[i].links[j].href;
		// this is temporary until stac.astrogeology is working with pagination
		url = url.replace("https://stac.astrogeology.usgs.gov/api/collections", "https://jat52qc8c0.execute-api.us-west-2.amazonaws.com/dev/collections");
		url = url + "?page=" + page;
		urlArray.push(url);
		}
		}
		@@ -25,7 +27,7 @@ function getItemCollection(name) {
		}
		let promiseArray = [];
		for (let i = 0; i < urlArray.length; i++) {
		promiseArray.push(fetch(urlArray[i]))
		promiseArray.push(fetch(urlArray[i]));
		}
		return Promise.all(promiseArray).then(function (responses) {
		return Promise.all(responses.map(function (response) {

app/src/js/AstroMap.js

+62 −13

Original line number	Diff line number	Diff line
		@@ -5,6 +5,7 @@ import AstroProj from "./AstroProj";
		import LayerCollection from "./LayerCollection";
		import { getItemCollection, url } from "./ApiJsonCollection";
		import { MY_JSON_MAPS } from "./layers";
		import "leaflet-html-legend";

		/**
		* @class AstroMap
		@@ -44,6 +45,9 @@ export default L.Map.AstroMap = L.Map.extend({
		a: "",
		c: ""
		};
		this._footprintCollection = {};
		this._footprintControl = null;
		this._geoLayer = null;

		// Set by layer collection or baselayerchange event
		this._currentLayer = null;
		@@ -91,7 +95,7 @@ export default L.Map.AstroMap = L.Map.extend({
		L.Map.prototype.initialize.call(this, this._mapDiv, this.options);
		this.loadLayerCollection("cylindrical");

		this.loadFootprintLayer(target);
		this.loadFootprintLayer(target, 1);

		// Listen to baselayerchange event so that we can set the current layer being
		// viewed by the map.
		@@ -114,22 +118,67 @@ export default L.Map.AstroMap = L.Map.extend({
		* @function AstroMap.prototype.loadFootprintLayer
		* @description Adds the ApiJsonCollection with the requested name.
		*
		* @param {String} name - Name of the STAC Catalog. example "ctx_dtms"
		* @param {String} name - Name of the target
		*
		* @param {Int} page - current selected page number of the pagination
		*/
		loadFootprintLayer: function(name) {
		var geoLayers = [];
		var footprintCollection = {};

		getItemCollection(name).then(result => {
		loadFootprintLayer: function(name, page) {
		getItemCollection(name, page).then(result => {
		if (result != undefined) {
		this._geoLayer = L.geoJSON().addTo(this);
		this._footprintCollection["Footprints"] = this._geoLayer;
		for (let i = 0; i < result.length; i++) {
		let geoLayer = L.geoJSON().addTo(this);
		footprintCollection[result[i].features[0].collection] = geoLayer;
		for (let j = 0; j < result[i].features.length; j++) {
		geoLayer.addData(result[i].features[j]);
		this._geoLayer.addData(result[i].features[j]);
		}
		}
		L.control.layers(null, footprintCollection).addTo(this);
		this._footprintControl = L.control.layers(null, this._footprintCollection).addTo(this);
		this.addFootprintLegend(name, page);
		}
		});
		},


		/**
		* @function AstroMap.prototype.addFootprintLegend
		* @description Adds legend for each footprint layer
		*
		* @param {String} name - Name of the projection
		*
		* @param {Int} page - current selected page number of the pagination
		*/
		addFootprintLegend: function(name, page) {
		var self = this;

		var legend = L.control.htmllegend({
		legends: [{
		name: 'Footprints',
		layer: this._geoLayer,
		elements: [{
		html: `<div class="pagination">
		<a id=footprint_left>«</a>
		<a id=footprint_pageNumber>${page}</a>
		<a id=footprint_right>»</a>
		</div>`
		}]
		}]
		});
		this.addControl(legend);

		$('#footprint_right').click(function () {
		page = page + 1;
		self._footprintControl.remove();
		self._geoLayer.clearLayers();
		self.removeControl(legend);
		self.loadFootprintLayer(name, page);
		});
		$('#footprint_left').click(function () {
		page = page - 1;
		if (page > 0) {
		self._footprintControl.remove();
		self._geoLayer.clearLayers();
		self.removeControl(legend);
		self.loadFootprintLayer(name, page);
		}
		});
		},

app/src/styles.css

+13 −0

Original line number	Diff line number	Diff line
		@import "../node_modules/leaflet/dist/leaflet.css";
		@import "../node_modules/leaflet-fullscreen/dist/leaflet.fullscreen.css";
		@import "https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css";
		@import "../node_modules/leaflet-html-legend/dist/L.Control.HtmlLegend.css";


		#map-container {
		width: 800px;
		@@ -88,3 +90,14 @@ Controls the CSS for projection buttons when there is no available projection
		.sidebar-button:hover {
		background-color: #ccc;
		}

		.pagination {
		display: inline-block;
		}

		.pagination a {
		color: black;
		float: left;
		padding: 8px 16px;
		text-decoration: none;
		}