updates

Author: noussairlazrak

index.html

@@ -73,22 +73,22 @@
 
 
 
-    .locations-container {
+.locations-container {
     width: 100%;
-    position: fixed;
+    position: absolute;
     margin-bottom: 0;
-    bottom: 0;
+    bottom: 2px;
     background: #02020252;
+    z-index: 10;
 }
 a.launch-local-forecasts {
     text-decoration: none;
 }
 
 div#map {
-    position: absolute;
+    min-height: 90vh !important;
+    height: 90vh !important;
     width: 100%;
-    height: 100%;
-    z-index: 0 !important;
 }
 
 header.p-3.bg-dark.text-white {
@@ -220,19 +220,30 @@
  </div>
 
 
-    <footer class="bg-dark text-inverse">
-        
+
+    <footer class="bg-white text-inverse pt-3">
+        <div class="container pb-2">
+            <div class="row align-items-center">
+                <div class="col-12 d-flex justify-content-start">
+                    <a href="https://gmao.gsfc.nasa.gov/" target="_blank" rel="noopener">
+                        <img src="parametres/ESD-logo.png" alt="NASA Logo" style="height:40px; margin-left:18px;">
+                    </a>
+                    <a href="https://marroninstitute.nyu.edu/" target="_blank" rel="noopener">
+                        <img src="parametres/Marron_logo.png" alt="NYU Marron Logo" style="height:40px; margin-left:18px;">
+                    </a>
+                </div>
+            </div>
+        </div>
         <div class="container">
             <div class="d-md-flex align-items-center justify-content-between">
-                <div class="footer-left text-white">
+                <div class="footer-left">
                     <p class="mb-0">© 2025 SNWG Localized Forecasts.</p>
                 </div>
-                <div class="footer-right text-white">
+                <div class="footer-right">
                     <p class="mb-0">Version: 1.1</p>
                 </div>
             </div>
         </div>
-        
     </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

local_forecasts.js

@@ -1046,7 +1046,6 @@ function readApiBaker(options = {}) {
     fetch(fileUrl)
         .then(response => {
             if (!response.ok) {
-                // Try again with underscores if hyphens fail
                 const fallbackUrl = `precomputed/all_dts/${location.replace(/[-\s]/g, "_")}.json`;
                 return fetch(fallbackUrl).then(fallbackResponse => {
                     if (!fallbackResponse.ok) throw new Error('Network response was not ok');
@@ -1284,24 +1283,31 @@ function readApiBaker(options = {}) {
                 let currentValue = 'N/A';
                 let nextValue = 'N/A';
 
+                               // ...inside readApiBaker, after defining currentValue and nextValue for each plot...
+                
                 if (plot.param === "pm25") {
-
+                    // For PM2.5, use 3-hour window logic for current and next values
+                    currentValue = 'N/A';
+                    nextValue = 'N/A';
                     for (let i = 0; i < masterData.master_datetime.length; i++) {
                         const dtStr = masterData.master_datetime[i];
                         if (!dtStr) continue;
                         const forecastStart = new Date(dtStr.replace(' ', 'T'));
                         const forecastEnd = new Date(forecastStart.getTime() + 3 * 60 * 60 * 1000);
+                        // Current: is now within this 3-hour window?
                         if (siteLocalNow >= forecastStart && siteLocalNow < forecastEnd) {
                             currentValue = masterData[plot.columns[0].column][i];
                         }
-
+                        // Next: is 1 hour from now within this 3-hour window?
                         const nextLocalDate = new Date(siteLocalNow.getTime() + 1 * 60 * 60 * 1000);
                         if (nextLocalDate >= forecastStart && nextLocalDate < forecastEnd) {
                             nextValue = masterData[plot.columns[0].column][i];
                         }
                     }
                 } else {
-
+                    // For other species, match by hour
+                    currentValue = 'N/A';
+                    nextValue = 'N/A';
                     for (let i = 0; i < masterData.master_datetime.length; i++) {
                         const dtStr = masterData.master_datetime[i];
                         if (!dtStr) continue;
@@ -1314,17 +1320,8 @@ function readApiBaker(options = {}) {
                         }
                     }
                 }
-
-                for (let i = 0; i < masterData.master_datetime.length; i++) {
-                    const dtStr = masterData.master_datetime[i];
-                    const hour = parseInt(dtStr.slice(11, 13), 10);
-                    if (hour === currentHour) {
-                        currentValue = masterData[plot.columns[0].column][i];
-                    }
-                    if (hour === nextHour) {
-                        nextValue = masterData[plot.columns[0].column][i];
-                    }
-                }
+                
+                // Remove the extra for-loop that matches by hour for all species (it would overwrite the correct 3-hour logic for PM2.5)
 
                 if (plot.displayAQI) {
                     const currentAqi = currentValue;
@@ -1712,21 +1709,21 @@ function generateMetricsHtml({
             <div class="d-xvg">
                 <div class="xvg_aqi me-3">${currentVal !== 'N/A' ? currentVal : '--'}</div>
                 <div class="xvg_aqi-change ${change.class}">${change.arrow} ${change.sign}${change.diff} (${change.sign}${change.pct !== "N/A" ? change.pct + "%" : "--"})</div>
-                <div class="xvg_timestamp">Current AQI (US Scale): ${formatTime(currentIdx)}</div>
+                <div class="xvg_timestamp">Current AQI (US Scale)}</div>
             </div>
             
         </div>
 
         <div class="d-xvg">
             <div class="xvg_aqi me-3">${nextVal !== 'N/A' ? nextVal : '--'}</div>
             <div class="xvg_aqi-change ${nextChange.class}">${nextChange.arrow} ${nextChange.sign}${nextChange.diff} (${nextChange.sign}${nextChange.pct !== "N/A" ? nextChange.pct + "%" : "--"})</div>
-            <div class="xvg_timestamp">Next hour: ${formatTime(nextIdx)}</div>
+            <div class="xvg_timestamp">Next hour</div>
         </div>
         
         <div class="d-xvg">
             <div class="xvg_aqi me-3">${prevVal !== 'N/A' ? prevVal : '--'}</div>
             <div class="xvg_aqi-change ${prevChange.class}">${prevChange.arrow} ${prevChange.sign}${prevChange.diff} (${prevChange.sign}${prevChange.pct !== "N/A" ? prevChange.pct + "%" : "--"})</div>
-            <div class="xvg_timestamp">Previous hour: ${formatTime(prevIdx)}</div>
+            <div class="xvg_timestamp">Previous hour</div>
         </div>
         <div class="d-xvg">
             <div class="xvg_aqi me-3">${dailyAvg !== 'N/A' ? dailyAvg.toFixed(2) : '--'}</div>

parametres/ESD-logo.png

@@ -864,7 +864,7 @@ a#global-view {
 }
 
 button#toggle-locations-box {
-    bottom: 25px;
+    bottom: 13px;
     background: none;
     color: #ffffff;
     display: flex;
@@ -874,6 +874,8 @@ button#toggle-locations-box {
     border-radius: 0px !important;
     padding-left: 1%;
     width: 100%;
+    font-size: large;
+    font-weight: 600;
 }
 
 input#filter-input {
@@ -1005,7 +1007,7 @@ h5.plot_title {
 }
 
 section.wrapper.image-wrapper.bg-image.bg-overlay.bg-overlay-300 {
-    min-height: 100vh;
+    min-height: 90vh;
 }
 
 div#species-filter-container {

parametres/Marron_logo.png

@@ -17,7 +17,7 @@
             <span>Hide Locations</span>
         </button>
         <div id="species-filter-container" style="color: white;">
-            <label for="species-filter" style="font-weight:600;margin-right:8px;">Species:</label>
+            <label for="species-filter" style="font-weight:600;margin-right:8px;">Species</label>
             <select id="species-filter" class="form-select form-select-sm" style="width:auto;display:inline-block;">
                 <option value="no2">NO₂</option>
                 <option value="pm25" selected>PM2.5</option>