Commit 387ca21e authored by Jacob Cain's avatar Jacob Cain
Browse files

loadFeatureCollections cleanup

parent 49b5c05c

src/components/presentational/FootprintResults.jsx

+26 −3
Original line number Diff line number Diff line
@@ -14,8 +14,6 @@ import ExpandMore from '@mui/icons-material/ExpandMore'; 


// geotiff thumbnail viewer... Should we be using DisplayGeoTiff.jsx instead?

import GeoTiffViewer from "../../js/geoTiffViewer.js";

import { lineHeight } from "@mui/system";





/**

 * Skeleton to show when footprints are loading
@@ -57,7 +55,7 @@ function NoFootprints(){ 
  return(

    <div style={{padding: 10, maxWidth: 268}}>

      <p>

        This target has no footprints. To see 

        This target has no footprints. To find 

        footprints, go to the dropdown menu 

        in the upper left and pick a target 

        body with the <TravelExploreIcon sx={{fontSize: 16, verticalAlign: "middle"}}/> icon next to it.
@@ -66,6 +64,24 @@ function NoFootprints(){ 
  );

}



function FilterTooStrict(){

  return(

    <div style={{padding: 10, maxWidth: 268}}>

      <p>

        No footprints match this filter.

      </p>

      <p>

        To find more footprints: 

      </p>

      <ul>

        <li>Uncheck current filters</li>

        <li>Draw a larger search area</li>

        <li>Enter a wider date range to filter by</li>

      </ul>

    </div>

  );

}



function FootprintCard(props){



  // Metadata Popup
@@ -289,6 +305,11 @@ export default function FootprintResults(props) { 


  }, [props.target.name, props.queryString]);



  let noFootprintsReturned = true;

  for(const collection of featureCollections){

    if(collection.numberReturned > 0) noFootprintsReturned = false;

  }



  return (

    <div style={css.root} className="scroll-parent">

      <div className="resultHeader">
@@ -309,6 +330,8 @@ export default function FootprintResults(props) { 
      </div>

      {isLoading ? 

        <LoadingFootprints/>

      : noFootprintsReturned ?

        <FilterTooStrict/>

      : hasFootprints ?   

        <div className="resultsList">

          <List sx={{maxWidth: 265, paddingTop: 0}}>

src/components/presentational/SearchAndFilterInput.jsx

+0 −1
Original line number Diff line number Diff line
@@ -262,7 +262,6 @@ export default function SearchAndFilterInput(props) { 
  }, [sortVal, sortAscCheckVal, areaCheckVal, areaTextVal, keywordCheckVal, keywordTextVal, dateCheckVal, dateFromVal, dateToVal, props.currentStep, props.currentPage]);



  const onBoxDraw = event => {

    console.info("Window meassage received from: ", event.origin);  // For production, check if messages coming from prod url

    if(typeof event.data == "object" && event.data[0] === "setWkt"){

      const receivedWkt = event.data[1];

      setAreaTextVal(receivedWkt);

src/js/AstroMap.js

+26 −28
Original line number Diff line number Diff line
@@ -95,13 +95,6 @@ export default L.Map.AstroMap = L.Map.extend({ 
    L.Map.prototype.initialize.call(this, this._mapDiv, this.options);

    this.loadLayerCollection("cylindrical");



    // Remove this once loading from react works?

    // setCurrentPage(1);

    // this.loadFootprintLayer(target, "?page=1");



    // Listener for list of features sent from React

    // L.DomEvent.on(window, "message", this.loadFeatureCollections, this);



    // Listen to baselayerchange event so that we can set the current layer being

    // viewed by the map.

    this.on("baselayerchange", function(e) {
@@ -152,33 +145,38 @@ export default L.Map.AstroMap = L.Map.extend({ 
    } 



    if (featureCollections != undefined) {

      let matched = 0;

      let returned = 0;

      

        // Init _geoLayers, at the length of one layer per collection

      this._geoLayers = new Array(featureCollections.length);



        // For each Collection (and each geoLayer)

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



            // Add the click handler for each Layer

        this._geoLayers[i] = L.geoJSON().on({click: handleClick}).addTo(this);

        matched += featureCollections[i].numberMatched;

        returned += featureCollections[i].context["returned"];

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

          this._footprintCollection[featureCollections[i].features[j].collection] = this._geoLayers[i];

          this._geoLayers[i].addData(featureCollections[i].features[j]);



            // Add each _geoLayer that has footprints to the FootprintCollection object.

            // The collection title is used as the property name, and it

            // shows up as the layer title when added to the Leaflet control

        if(featureCollections[i].numberReturned > 0) {

          this._footprintCollection[featureCollections[i].title] = this._geoLayers[i];

        }

            // Delete layers with no Footprints

        else {

          delete this._footprintCollection[featureCollections[i].title];

        }



      var collectionNames = {};

      for(const collection of featureCollections) {

        collectionNames[collection.id] = collection.title;

            // Add each feature to _geoLayers.

            // _geoLayers is the footprint outlines shown on the map

        for(const feature of featureCollections[i].features) {

          this._geoLayers[i].addData(feature);

        }



      for (var key in this._footprintCollection){

          let title = collectionNames[key];

          this._footprintCollection[title]= this._footprintCollection[key];

          delete this._footprintCollection[key];

      }

      

        this._footprintControl = L.control

        .layers(null, this._footprintCollection, {collapsed: true})

        .addTo(this)

      this._footprintControl = L.control                          // 1. Make a leaflet control

      .layers(null, this._footprintCollection, {collapsed: true}) // 2. Add the footprint collections to the control as layers

      .addTo(this)                                                // 3. Add the control to leaflet.

                                                                  // Now the user show/hide layers (and see their titles)

    }

  },