From de9027434f55f06efcfab03fc49c51b86f7558de Mon Sep 17 00:00:00 2001
From: Nik Verweel <nikverweel@gmail.com>
Date: Thu, 26 Feb 2026 09:33:19 +0100
Subject: [PATCH] Fix hectares and acres calculation and display

---
 webapps/geojson_viewer/index.html |  7 ++++---
 webapps/geojson_viewer/script.js  | 29 +++++++++++++----------------
 2 files changed, 17 insertions(+), 19 deletions(-)
diff --git a/webapps/geojson_viewer/index.html b/webapps/geojson_viewer/index.html
index e38ba66..09b43d9 100644
--- a/webapps/geojson_viewer/index.html
+++ b/webapps/geojson_viewer/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>GeoJSON Viewer</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>
     <link rel="stylesheet" href="../theme.css">
     <link rel="icon" type="image/x-icon" href="../res/pin.png">
     <style>
@@ -384,9 +385,9 @@
 </head>
 <body>
     <script>
-        // if (sessionStorage.getItem('authenticated') !== 'true') {
-        //     window.location.href = '../login.html';
-        // }
+        if (sessionStorage.getItem('authenticated') !== 'true') {
+            window.location.href = '../login.html';
+        }
     </script>
     
     <header>
diff --git a/webapps/geojson_viewer/script.js b/webapps/geojson_viewer/script.js
index bc1234f..77b80b4 100644
--- a/webapps/geojson_viewer/script.js
+++ b/webapps/geojson_viewer/script.js
@@ -519,6 +519,18 @@
                 return false;
             }
 
+            // Inject calculated area directly into feature properties
+            features.forEach(feature => {
+                if (!feature.properties) feature.properties = {};
+                const areaM2 = getFeatureArea(feature);
+                
+                if (areaM2 > 0) {
+                    const { hectares, acres } = convertArea(areaM2);
+                    feature.properties['Area (ha)'] = Number(hectares.toFixed(2));
+                    feature.properties['Area (acres)'] = Number(acres.toFixed(2));
+                }
+            });
+
             // Create layer with popups
             geojsonLayer = L.geoJSON(geojson, {
                 onEachFeature: (feature, layer) => {
@@ -726,7 +738,6 @@
             
             if (features.length === 0) return;
             
-            // Collect all unique property keys
             const allKeys = new Set();
             features.forEach(f => {
                 if (f.properties) {
@@ -734,11 +745,6 @@
                 }
             });
             
-            // Add area columns
-            allKeys.add('Area (ha)');
-            allKeys.add('Area (acres)');
-            
-            // Create header
             const headerKeys = Array.from(allKeys);
             headerKeys.forEach(key => {
                 const th = document.createElement('th');
@@ -746,7 +752,6 @@
                 tableHeader.appendChild(th);
             });
             
-            // Create rows
             features.forEach((feature, idx) => {
                 const row = document.createElement('tr');
                 row.style.cursor = 'pointer';
@@ -755,18 +760,10 @@
                 row.addEventListener('mouseout', () => row.style.backgroundColor = '');
                 
                 const props = feature.properties || {};
-                const areaM2 = getFeatureArea(feature);
-                const { hectares, acres } = convertArea(areaM2);
                 
                 headerKeys.forEach(key => {
                     const td = document.createElement('td');
-                    if (key === 'Area (ha)') {
-                        td.textContent = hectares.toFixed(2);
-                    } else if (key === 'Area (acres)') {
-                        td.textContent = acres.toFixed(2);
-                    } else {
-                        td.textContent = props[key] !== undefined ? props[key] : '-';
-                    }
+                    td.textContent = props[key] !== undefined ? props[key] : '-';
                     row.appendChild(td);
                 });
                 
