Commit 76e44352 authored by Amy Stamile's avatar Amy Stamile
Browse files

Added footprint layer legend.

parent 04c4b4ca

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

+7 −5
Original line number Diff line number Diff line 




//https://jat52qc8c0.execute-api.us-west-2.amazonaws.com/dev/collections

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 += "?page1";

            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

+46 −4
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
@@ -120,20 +121,61 @@ export default L.Map.AstroMap = L.Map.extend({ 
    var geoLayers = [];

    var footprintCollection = {};



    getItemCollection(name).then(result => {

    getItemCollection(name, 1).then(result => {

      if (result != undefined) {

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

          let geoLayer = L.geoJSON().addTo(this);

          let geoLayer = L.geoJSON();

          footprintCollection[result[i].features[0].collection] = geoLayer;

          for (let j = 0; j < result[i].features.length; j++) {

            geoLayer.addData(result[i].features[j]);

          }

        }

        L.control.layers(null, footprintCollection).addTo(this);

        this.addFootprintLegend(name, footprintCollection);

      }

    });

  },





  /**

   * @function AstroMap.prototype.addFootprintLegend

   * @description Adds legend for each footprint layer

   *

   * @param {Object} footprintCollection - dictonary of footprint layers

   */

  addFootprintLegend: function(name, footprintCollection) {

    for (const layer in footprintCollection) {

      var legend = L.control.htmllegend({

        legends: [{

            name: layer,

            layer: footprintCollection[layer],

            elements: [{

                html: `<div class="pagination">

                        <a id="left">&laquo;</a>

                        <a id="pageNumber">1</a>

                        <a id="right">&raquo;</a>

                      </div>`

            }]

         }]

      });

      this.addControl(legend);

    }

    var left = document.getElementById('left');

    var right = document.getElementById('right');

    var page = document.getElementById('pageNumber');



    left.onclick = function(){

      if (page.innerHTML > 1){

        page.innerHTML = parseInt(page.innerHTML) - 1;

      }

    };

    right.onclick = function(){

      if (page.innerHTML >= 1){

        page.innerHTML = parseInt(page.innerHTML) + 1;

      }

    };

  },



  /**

   * @function AstroMap.prototype.parseJSON

   * @description Parses the USGS JSON, creates layer objects for a particular target and projection,

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;

}