Fix hectares and acres calculation and display

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

View file

@ -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>

View file

@ -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] : '-';
}
row.appendChild(td);
});