From fa221a299c05330d2cc28a8a4fc428eec09868c8 Mon Sep 17 00:00:00 2001
From: Clark <tclark@usgs.gov>
Date: Thu, 16 Mar 2023 06:12:36 -0700
Subject: [PATCH] Use react load of astrowebmaps in Leaflet map

---
 src/components/container/App.jsx          |  3 ++
 src/components/container/GeoStacApp.jsx   |  3 +-
 src/components/container/MapContainer.jsx |  6 +--
 src/js/AstroMap.js                        | 49 ++++++++---------------
 4 files changed, 25 insertions(+), 36 deletions(-)

diff --git a/src/components/container/App.jsx b/src/components/container/App.jsx
index f61ccb019..c95d43300 100644
--- a/src/components/container/App.jsx
+++ b/src/components/container/App.jsx
@@ -128,6 +128,9 @@ export default function App() {
                     "name" : target.name,
                     "naif" : target.naif,
                     "hasFootprints" : hasFootprints,
+                    "aaxisradius": target.aaxisradius,
+                    "baxisradius": target.baxisradius,
+                    "caxisradius":target.caxisradius,
                     "layers" : {
                         "base" : [],
                         "overlays" : [],
diff --git a/src/components/container/GeoStacApp.jsx b/src/components/container/GeoStacApp.jsx
index d7b1f8c35..fbc31f876 100644
--- a/src/components/container/GeoStacApp.jsx
+++ b/src/components/container/GeoStacApp.jsx
@@ -29,6 +29,7 @@ let css = {
  * @component
  */
 export default function GeoStacApp(props) {
+  console.log(props);
   const [targetPlanet, setTargetPlanet] = React.useState("Mars");
 
   const [footprintData, setFootprintData] = React.useState([]);
@@ -68,7 +69,7 @@ export default function GeoStacApp(props) {
             bodyChange={handleTargetBodyChange}
           />
           <div id="map-area">
-            <MapContainer target={targetPlanet} />
+            <MapContainer target={targetPlanet} mapList={props.mapList} />
           </div>
           <QueryConsole />
         </div>
diff --git a/src/components/container/MapContainer.jsx b/src/components/container/MapContainer.jsx
index fa48f8660..b253ca974 100644
--- a/src/components/container/MapContainer.jsx
+++ b/src/components/container/MapContainer.jsx
@@ -12,7 +12,7 @@ import AstroControlManager from "../../js/AstroControlManager";
  * @param {target, map, mapChange}
  */
 export default function MapContainer(props) {
-  
+
   const [oldTarget, setOldTarget] = React.useState("");
 
   /**
@@ -20,7 +20,7 @@ export default function MapContainer(props) {
    * handles all of the map intialization and creation.
    */
   useEffect( () => {
-    let map = new AstroMap("map-container", props.target, {});
+    let map = new AstroMap("map-container", props.target, props.mapList, {});
     let controlManager = new AstroControlManager(map);
     controlManager.addTo(map);
     setOldTarget(props.target)
@@ -48,7 +48,7 @@ export default function MapContainer(props) {
       document.getElementById("projectionSouthPole").classList.remove("disabled");
 
       // create new map with updated target
-      let map = new AstroMap("map-container", props.target, {});
+      let map = new AstroMap("map-container", props.target, props.mapList,{});
       let controlManager = new AstroControlManager(map);
       controlManager.addTo(map);
       setOldTarget(props.target)
diff --git a/src/js/AstroMap.js b/src/js/AstroMap.js
index e4618db25..d075ea20c 100644
--- a/src/js/AstroMap.js
+++ b/src/js/AstroMap.js
@@ -43,7 +43,8 @@ export default L.Map.AstroMap = L.Map.extend({
     zoomControl: false
   },
 
-  initialize: function(mapDiv, target, options) {
+  initialize: function(mapDiv, target, mapList, options) {
+    this._mapList = mapList
     this._mapDiv = mapDiv;
     this._target = target;
     this._astroProj = new AstroProj();
@@ -216,37 +217,21 @@ export default L.Map.AstroMap = L.Map.extend({
       wfs: []
     };
 
-    let targets = MY_JSON_MAPS["targets"];
-    for (let i = 0; i < targets.length; i++) {
-      let currentTarget = targets[i];
-
-      if (currentTarget["name"].toLowerCase() == this._target.toLowerCase()) {
-        this._radii["a"] = parseFloat(currentTarget["aaxisradius"] * 1000);
-        this._radii["c"] = parseFloat(currentTarget["caxisradius"] * 1000);
-        let jsonLayers = currentTarget["webmap"];
-        for (let j = 0; j < jsonLayers.length; j++) {
-          let currentLayer = jsonLayers[j];
-          if (
-            currentLayer["projection"].toLowerCase() != projection.toLowerCase()
-          ) {
-            continue;
-          }
-          if (currentLayer["type"] == "WMS") {
-            // Base layer check
-            if (currentLayer["transparent"] == "false") {
-              layers["base"].push(currentLayer);
-            } else {
-              // Do not add "Show Feature Names" PNG layer.
-              if (currentLayer["displayname"] != "Show Feature Names") {
-                layers["overlays"].push(currentLayer);
-              } else {
-                if(currentLayer["layer"] == "NOMENCLATURE"){
-                  layers["nomenclature"].push(currentLayer);
-                }
-              }
-            }
-          } else {
-            layers["wfs"].push(currentLayer);
+    let systems = this._mapList["systems"];
+    for(let x = 0; x < systems.length; x++){
+      let targets = systems[x].bodies
+    
+      for (let i = 0; i < targets.length; i++) {
+        let currentTarget = targets[i];
+        if (currentTarget["name"].toLowerCase() == this._target.toLowerCase()) {
+          this._radii["a"] = parseFloat(currentTarget["aaxisradius"] * 1000);
+          this._radii["c"] = parseFloat(currentTarget["caxisradius"] * 1000);
+          let jsonLayers = currentTarget.layers;
+          console.log(jsonLayers['base']);
+          for (let key of Object.keys(jsonLayers)){
+              layers[key] =jsonLayers[key].filter(function(currentLayer){
+                  return currentLayer["projection"].toLowerCase() == projection.toLowerCase();
+              }); 
           }
         }
       }
-- 
GitLab