diff --git a/src/components/presentational/FootprintResults.jsx b/src/components/presentational/FootprintResults.jsx
index 121935140d07c01133dc9c24ce4045d5ef5c0675..ca35d2d35873b72d4a26a9e60fad7c27fbaa4375 100644
--- a/src/components/presentational/FootprintResults.jsx
+++ b/src/components/presentational/FootprintResults.jsx
@@ -169,15 +169,39 @@ export default function FootprintResults(props) {
         }
       }
 
+      async function fetchSLD(sld_url) {
+        try {
+           const response = await fetch(sld_url)
+           if(!response.ok) {
+             throw new Error('SLD response not ok ' + response.statusText);
+             }
+            const SLD_DATA = await response.text();
+            //const parser = new DOMParser();
+            //const sld_file = parser.parseFromString(SLD_DATA, text/xml);
+           return SLD_DATA
+               } catch (error) {
+                  console.error('SLD unable to be fetched', error);
+               }
+     }
+
+
       (async () => {
         let collections = await FetchObjects(collectionUrls);
 
+
         // Add extra properties to each collection
         for(const key in collections){
           collections[key].id = key;
           collections[key].title = props.target.collections.find(collection => collection.id === key).title;
           collections[key].url = collectionUrls[key];
-          collections[key].styleSheets = styleSheetUrls[key];
+
+          let sldtext = null;
+
+          if (styleSheetUrls[key]) {
+            sldtext = await fetchSLD(styleSheetUrls[key]);
+            collections[key].styleSheets = sldtext;
+          }
+
         }
 
         // Updates collectionId if switching to a new set of collections (new target)
diff --git a/src/js/AstroMap.js b/src/js/AstroMap.js
index 566309c4cbbc1fc8e7082c559d06c2504be4e6e4..ff596ddafe5b1483a3c9c84474004376487591fb 100644
--- a/src/js/AstroMap.js
+++ b/src/js/AstroMap.js
@@ -302,7 +302,7 @@ export default L.Map.AstroMap = L.Map.extend({
 
         let title = featureCollections[i].title;
 
-        let sld_file =  featureCollections[i].styleSheets;
+        let sld_text = featureCollections[i].styleSheets;
         // set style if available
 
         let myStyle = null;
@@ -312,15 +312,8 @@ export default L.Map.AstroMap = L.Map.extend({
         // [old] and it shows up as the layer title when added to the separate Leaflet control
         if(featureCollections[i].features.length > 0) {
 
-
-
-          if (sld_file) {
-            let sldtext = fetch(sld_file);
-            let res = sldtext.res
-
-            console.log("good style wow");
-            this.SLDStyler = new L.SLDStyler(sldtext);
-
+          if (sld_text != null) {
+            this.SLDStyler = new L.SLDStyler(sld_text);
             myStyle = this.SLDStyler.getStyleFunction();
 
           }