Fix read data asynchronously

public/js/functions.js

@@ -2,7 +2,7 @@
  * Copyright 2021 - All rights reserved.
  * Rodrigo Tapia-McClung
  *
- * February-July 2021
+ * February-July 2021 - August 2023
  */
 
 /* global mapboxgl, turf, Papa */
@@ -20,8 +20,41 @@ let cdmx, estaciones, ozono, fechas,
     playing = false,
     animate;
 
+const readData = async () => {
+    // Read CDMX boundaries
+    let cdmx = await fetch(`${baseUrl}/data/cdmx.geojson`)
+        .then(response => response.json())
+
+    // Read and parse csv station data
+    let estaciones = await fetch(`${baseUrl}/data/cat_estacion.csv`)
+        .then(response => response.arrayBuffer())
+        .then(d => new TextDecoder("iso-8859-1").decode(d).split(/\r\n|\n|\r/))
+        .then(d => { // arrange elements as a decent array
+            let array = [];
+            d.forEach( d => array.push(d.split(",")));
+            let array2 = array.slice(1, -1); // remove spurious first and last line
+            const [keys, ...values] = array2; // deconstruct
+            let estacionesCSV = values.map( array2 => // create useful object of key:value pairs for each station
+                array2.reduce((a, v, i) => ({ ...a, [keys[i]]: v }), {})
+            );
+            let estacionesArray = [];
+            estacionesCSV.forEach( e => { // create features for feature collection
+                let location = turf.point([+e.longitud, +e.latitud], {
+                    cve_estac: e.cve_estac,
+                    nom_estac: e.nom_estac,
+                    longitud: +e.longitud,
+                    latitud: +e.latitud,
+                    alt: +e.alt
+                });
+                estacionesArray.push(location);
+            });
+            return turf.featureCollection(estacionesArray);
+        });
+
+    return {cdmx, estaciones}
+}
 // Read CDMX boundaries
-fetch(`${baseUrl}/data/cdmx.geojson`)
+/*let cdmx = fetch(`${baseUrl}/data/cdmx.geojson`)
     .then(response => response.json())
     .then(d => cdmx = d);
 
@@ -50,7 +83,7 @@ fetch(`${baseUrl}/data/cat_estacion.csv`)
         });
         estaciones = turf.featureCollection(estacionesArray);
     });
-
+*/
 const papaPromise = url => {
     return new Promise(function (resolve, reject) {
         Papa.parse(url, {
@@ -195,6 +228,10 @@ const run = () => {
 
 map.on("style.load", async () => {
 
+    let data = await readData();
+    cdmx = data.cdmx;
+    estaciones = data.estaciones;
+
     // add vector tile source
     /*map.addSource("estaciones", {
         "type": "vector",