Use react load of astrowebmaps in Leaflet map

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" : [],

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>

src/components/container/MapContainer.jsx

@@ -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)

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"];
+    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["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 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();
+              }); 
           }
         }
       }