Timon/SmartCane
1
1
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Fix hectares and acres calculation and display

Browse source
This commit is contained in:
Nik Verweel 2026-02-26 09:33:19 +01:00
parent a5a8c16363
commit de9027434f
2 changed files with 17 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
webapps/geojson_viewer/index.html
View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GeoJSON Viewer</title> <title>GeoJSON Viewer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" /> <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="stylesheet" href="../theme.css">
<link rel="icon" type="image/x-icon" href="../res/pin.png"> <link rel="icon" type="image/x-icon" href="../res/pin.png">
<style> <style>
@ -384,9 +385,9 @@
</head> </head>
<body> <body>
<script> <script>
// if (sessionStorage.getItem('authenticated') !== 'true') { if (sessionStorage.getItem('authenticated') !== 'true') {
// window.location.href = '../login.html'; window.location.href = '../login.html';
// } }
</script> </script>
<header> <header>

29
webapps/geojson_viewer/script.js
View file

@ -519,6 +519,18 @@
return false; 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 // Create layer with popups
geojsonLayer = L.geoJSON(geojson, { geojsonLayer = L.geoJSON(geojson, {
onEachFeature: (feature, layer) => { onEachFeature: (feature, layer) => {
@ -726,7 +738,6 @@
if (features.length === 0) return; if (features.length === 0) return;
// Collect all unique property keys
const allKeys = new Set(); const allKeys = new Set();
features.forEach(f => { features.forEach(f => {
if (f.properties) { 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); const headerKeys = Array.from(allKeys);
headerKeys.forEach(key => { headerKeys.forEach(key => {
const th = document.createElement('th'); const th = document.createElement('th');
@ -746,7 +752,6 @@
tableHeader.appendChild(th); tableHeader.appendChild(th);
}); });
// Create rows
features.forEach((feature, idx) => { features.forEach((feature, idx) => {
const row = document.createElement('tr'); const row = document.createElement('tr');
row.style.cursor = 'pointer'; row.style.cursor = 'pointer';
@ -755,18 +760,10 @@
row.addEventListener('mouseout', () => row.style.backgroundColor = ''); row.addEventListener('mouseout', () => row.style.backgroundColor = '');
const props = feature.properties || {}; const props = feature.properties || {};
const areaM2 = getFeatureArea(feature);
const { hectares, acres } = convertArea(areaM2);
headerKeys.forEach(key => { headerKeys.forEach(key => {
const td = document.createElement('td'); const td = document.createElement('td');
if (key === 'Area (ha)') { td.textContent = props[key] !== undefined ? props[key] : '-';
td.textContent = hectares.toFixed(2);
} else if (key === 'Area (acres)') {
td.textContent = acres.toFixed(2);
} else {
td.textContent = props[key] !== undefined ? props[key] : '-';
}
row.appendChild(td); row.appendChild(td);
}); });