refactor to modern fetch approach

NOAA-CEFI-Portal · Sep 18, 2024 · 1a95af2 · 1a95af2
1 parent 249f153
commit 1a95af2
Showing 1 changed file with 53 additions and 21 deletions.
diff --git a/lmesPlotlyMapbox.js b/lmesPlotlyMapbox.js
@@ -1,7 +1,14 @@
-// read geojson and create plotly plot
-readTextFile("lms_choropleth_mapbox.json", function(text){
-    var datajson = JSON.parse(text);
-    lmesPlotlyMapbox(datajson);
+// Using fetch() to read the JSON file
+fetch('lms_choropleth_mapbox.json')
+  .then(response => {
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.json(); // Parse the JSON
+  })
+  .then(dataJson => {
+    // create the plotly plot
+    lmesPlotlyMapbox(dataJson);
 
     // auto-click the reset button to make the mapbox plot show normal view
     var inputElement = document.querySelector('a[data-title="Reset view"]')
@@ -17,22 +24,10 @@ readTextFile("lms_choropleth_mapbox.json", function(text){
         }
         ,500);
     });
-
-});
-
-// function to read geojson
-function readTextFile(file, callback) {
-    var rawFile = new XMLHttpRequest();
-    rawFile.overrideMimeType("application/json");
-    rawFile.open("GET", file, true);
-    rawFile.onreadystatechange = function() {
-        if (rawFile.readyState === 4 && rawFile.status == "200") {
-            callback(rawFile.responseText);
-        }
-    }
-    rawFile.send(null);
-}
-
+  })
+  .catch(error => {
+    console.error('There was a problem with the fetch operation:', error);
+  });
 
 // plot the plotly figure
 function lmesPlotlyMapbox(datajson) {
@@ -43,4 +38,41 @@ function lmesPlotlyMapbox(datajson) {
             datajson
         )
     }
-}
+}
+
+
+// // read geojson and create plotly plot
+// readTextFile("lms_choropleth_mapbox.json", function(text){
+//     var datajson = JSON.parse(text);
+//     lmesPlotlyMapbox(datajson);
+
+//     // auto-click the reset button to make the mapbox plot show normal view
+//     var inputElement = document.querySelector('a[data-title="Reset view"]')
+//     // first wait for 1 sec for plotly plot in modal to finish and assign the element
+//     setTimeout(()=> {
+//         inputElement = document.querySelector('a[data-title="Reset view"]')
+//     }
+//     ,1000);
+//     // reset button is clicked once the modal open (sufficient time out is necessary)
+//     $('#lmeButton').on("click", function () {
+//         setTimeout(()=> {
+//             inputElement.click()
+//         }
+//         ,500);
+//     });
+
+// });
+
+// // function to read geojson
+// function readTextFile(file, callback) {
+//     var rawFile = new XMLHttpRequest();
+//     rawFile.overrideMimeType("application/json");
+//     rawFile.open("GET", file, true);
+//     rawFile.onreadystatechange = function() {
+//         if (rawFile.readyState === 4 && rawFile.status == "200") {
+//             callback(rawFile.responseText);
+//         }
+//     }
+//     rawFile.send(null);
+// }
+