Added polygon analysis functionality
This commit is contained in:
Nik Verweel
parent
e87f0f46aa
commit
06299cc99f
642
webapps/polygon_analysis_editor/app.js
Normal file
642
webapps/polygon_analysis_editor/app.js
Normal file
|
|
@ -0,0 +1,642 @@
|
|||
|
||||
// State
|
||||
let rawGeoJSON = null;
|
||||
let cleanedGeoJSON = null;
|
||||
let analysisLog = [];
|
||||
let overlapCsvData = [];
|
||||
let originalFileName = "polygons";
|
||||
|
||||
// DOM Elements
|
||||
const dropZone = document.getElementById('dropZone');
|
||||
const fileInput = document.getElementById('geojsonFile');
|
||||
const fileLabelText = document.getElementById('fileLabelText');
|
||||
const analyzeBtn = document.getElementById('analyzeBtn');
|
||||
const resultsCard = document.getElementById('resultsCard');
|
||||
const logOutput = document.getElementById('logOutput');
|
||||
const downloadLogBtn = document.getElementById('downloadLogBtn');
|
||||
const downloadCsvBtn = document.getElementById('downloadCsvBtn');
|
||||
const editCard = document.getElementById('editCard');
|
||||
const applyEditsBtn = document.getElementById('applyEditsBtn');
|
||||
const editResults = document.getElementById('editResults');
|
||||
const editLogOutput = document.getElementById('editLogOutput');
|
||||
const downloadCleanedBtn = document.getElementById('downloadCleanedBtn');
|
||||
const downloadEditLogBtn = document.getElementById('downloadEditLogBtn');
|
||||
|
||||
// Event Listeners
|
||||
dropZone.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.style.backgroundColor = '#e0f2f1';
|
||||
});
|
||||
dropZone.addEventListener('dragleave', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.style.backgroundColor = 'rgba(42, 171, 149, 0.05)';
|
||||
});
|
||||
dropZone.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.style.backgroundColor = 'rgba(42, 171, 149, 0.05)';
|
||||
if (e.dataTransfer.files.length) {
|
||||
fileInput.files = e.dataTransfer.files;
|
||||
handleFile(e.dataTransfer.files[0]);
|
||||
}
|
||||
});
|
||||
fileInput.addEventListener('change', (e) => {
|
||||
if (fileInput.files.length) {
|
||||
handleFile(fileInput.files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
analyzeBtn.addEventListener('click', runAnalysis);
|
||||
downloadLogBtn.addEventListener('click', () => downloadText(analysisLog.join('\n'), `${originalFileName}_log.txt`));
|
||||
downloadCsvBtn.addEventListener('click', downloadCsv);
|
||||
applyEditsBtn.addEventListener('click', runEdits);
|
||||
downloadCleanedBtn.addEventListener('click', () => downloadJson(cleanedGeoJSON, `${originalFileName}_SmartCane.geojson`));
|
||||
|
||||
// Logic
|
||||
|
||||
function handleFile(file) {
|
||||
originalFileName = file.name.replace(/\.geojson$/i, '').replace(/\.json$/i, '');
|
||||
fileLabelText.innerHTML = `<strong>${file.name}</strong><br><small>Ready to analyze</small>`;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
try {
|
||||
rawGeoJSON = JSON.parse(e.target.result);
|
||||
analyzeBtn.disabled = false;
|
||||
// Reset UI
|
||||
resultsCard.classList.add('hidden');
|
||||
editCard.classList.add('hidden');
|
||||
editResults.classList.add('hidden');
|
||||
} catch (err) {
|
||||
alert("Invalid GeoJSON file");
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
||||
function log(msg, targetLog = analysisLog, targetEl = logOutput) {
|
||||
// Add timestamp or just raw msg? R script uses simple text.
|
||||
targetLog.push(msg);
|
||||
targetEl.innerText = targetLog.join('\n');
|
||||
// Auto scroll
|
||||
targetEl.scrollTop = targetEl.scrollHeight;
|
||||
}
|
||||
|
||||
async function runAnalysis() {
|
||||
// Reset
|
||||
analysisLog = [];
|
||||
overlapCsvData = [];
|
||||
resultsCard.classList.remove('hidden');
|
||||
editCard.classList.add('hidden');
|
||||
analyzeBtn.disabled = true;
|
||||
analyzeBtn.innerText = "Analyzing...";
|
||||
|
||||
// Use setTimeout to allow UI to update
|
||||
setTimeout(async () => {
|
||||
try {
|
||||
await analyze();
|
||||
analyzeBtn.disabled = false;
|
||||
analyzeBtn.innerText = "Analyze Polygons";
|
||||
editCard.classList.remove('hidden');
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
log(`ERROR: ${err.message}`);
|
||||
analyzeBtn.disabled = false;
|
||||
analyzeBtn.innerText = "Analyze Polygons";
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function cleanDuplicateVertices(feature) {
|
||||
if (feature.geometry.type === 'Polygon') {
|
||||
feature.geometry.coordinates = feature.geometry.coordinates.map(ring =>
|
||||
ring.filter((coord, i, arr) =>
|
||||
i === 0 || JSON.stringify(coord) !== JSON.stringify(arr[i - 1])
|
||||
)
|
||||
);
|
||||
} else if (feature.geometry.type === 'MultiPolygon') {
|
||||
feature.geometry.coordinates = feature.geometry.coordinates.map(polygon =>
|
||||
polygon.map(ring =>
|
||||
ring.filter((coord, i, arr) =>
|
||||
i === 0 || JSON.stringify(coord) !== JSON.stringify(arr[i - 1])
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
return feature;
|
||||
}
|
||||
|
||||
async function analyze() {
|
||||
log(`Processing log for: ${originalFileName}`);
|
||||
log("==================================================");
|
||||
|
||||
let features = rawGeoJSON.features;
|
||||
if (!features) {
|
||||
log("Error: No features found in GeoJSON.");
|
||||
return;
|
||||
}
|
||||
|
||||
log(`${features.length} geometries found.`);
|
||||
|
||||
// 1. Check duplicates FIRST
|
||||
log("\n=== Checking for duplicates... ===");
|
||||
const fieldCounts = {};
|
||||
features.forEach(f => {
|
||||
const id = getFieldNo(f);
|
||||
if (id) {
|
||||
fieldCounts[id] = (fieldCounts[id] || 0) + 1;
|
||||
}
|
||||
});
|
||||
|
||||
const duplicates = Object.entries(fieldCounts).filter(([id, count]) => count > 1);
|
||||
|
||||
if (duplicates.length > 0) {
|
||||
log(`✕ ${duplicates.length} duplicate field codes detected.`);
|
||||
log("Removing duplicate fields...");
|
||||
|
||||
const duplicateIds = new Set(duplicates.map(d => d[0]));
|
||||
const beforeDedup = features.length;
|
||||
features = features.filter(f => !duplicateIds.has(getFieldNo(f)));
|
||||
|
||||
duplicates.forEach(d => {
|
||||
log(`• Field ${d[0]}: ${d[1]} occurrences (Removed)`);
|
||||
});
|
||||
|
||||
log(`✓ Removed ${beforeDedup - features.length} duplicate entries!`);
|
||||
} else {
|
||||
log("✓ No duplicates found!");
|
||||
}
|
||||
|
||||
// 2. Filter empty
|
||||
log("\n=== Checking empty geometries... ===");
|
||||
const initialCount = features.length;
|
||||
features = features.filter(f => f.geometry && f.geometry.coordinates && f.geometry.coordinates.length > 0);
|
||||
const emptyCount = initialCount - features.length;
|
||||
|
||||
if (emptyCount > 0) {
|
||||
log(`${emptyCount} empty geometries detected! Deleting...`);
|
||||
} else {
|
||||
log(`✓ No empty geometries found.`);
|
||||
}
|
||||
|
||||
// 3. Clean duplicate vertices & validity check
|
||||
log("\n=== Cleaning duplicate vertices & checking geometry validity... ===");
|
||||
let invalidCount = 0;
|
||||
let duplicateVertexCount = 0;
|
||||
|
||||
let fixedFeatures = [];
|
||||
for (let f of features) {
|
||||
// Clean duplicate vertices first
|
||||
const beforeClean = JSON.stringify(f.geometry);
|
||||
f = cleanDuplicateVertices(f);
|
||||
const afterClean = JSON.stringify(f.geometry);
|
||||
|
||||
if (beforeClean !== afterClean) {
|
||||
duplicateVertexCount++;
|
||||
}
|
||||
|
||||
// Drop Z if present (Turf truncate)
|
||||
f = turf.truncate(f, {precision: 6, coordinates: 2});
|
||||
|
||||
try {
|
||||
const kinks = turf.kinks(f);
|
||||
if (kinks.features.length > 0) {
|
||||
invalidCount++;
|
||||
// Try to fix by unkinking
|
||||
const unkinked = turf.unkinkPolygon(f);
|
||||
unkinked.features.forEach(uf => {
|
||||
uf.properties = {...f.properties};
|
||||
fixedFeatures.push(uf);
|
||||
});
|
||||
} else {
|
||||
fixedFeatures.push(f);
|
||||
}
|
||||
} catch (e) {
|
||||
log(`⚠ Warning: Could not process geometry for ${getFieldNo(f)}: ${e.message}`);
|
||||
// Still add it, but log the issue
|
||||
fixedFeatures.push(f);
|
||||
}
|
||||
}
|
||||
|
||||
if (duplicateVertexCount > 0) {
|
||||
log(`✓ Cleaned duplicate vertices in ${duplicateVertexCount} geometries.`);
|
||||
}
|
||||
|
||||
if (invalidCount > 0) {
|
||||
log(`✕ ${invalidCount} invalid geometries detected (self-intersections). Attempting fix...`);
|
||||
log(`✓ Fixed by splitting self-intersections.`);
|
||||
} else {
|
||||
log(`✓ All geometries valid (no self-intersections).`);
|
||||
}
|
||||
features = fixedFeatures;
|
||||
log(`Current geometry count: ${features.length}`);
|
||||
|
||||
// 4. Check Overlaps
|
||||
log("\n=== Checking for plot overlap... ===");
|
||||
|
||||
// Build RBush Index
|
||||
const tree = new RBush();
|
||||
const items = features.map((f, index) => {
|
||||
const bbox = turf.bbox(f);
|
||||
return {
|
||||
minX: bbox[0],
|
||||
minY: bbox[1],
|
||||
maxX: bbox[2],
|
||||
maxY: bbox[3],
|
||||
feature: f,
|
||||
id: getFieldNo(f) || `Unknown-${index}`,
|
||||
area: turf.area(f),
|
||||
index: index
|
||||
};
|
||||
});
|
||||
tree.load(items);
|
||||
|
||||
const overlaps = [];
|
||||
const checkedPairs = new Set();
|
||||
let fieldsWithOverlap = new Set();
|
||||
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const itemA = items[i];
|
||||
const candidates = tree.search(itemA);
|
||||
|
||||
for (const itemB of candidates) {
|
||||
if (itemA.index === itemB.index) continue;
|
||||
|
||||
// Sort IDs to ensure uniqueness of pair
|
||||
const pairId = [itemA.index, itemB.index].sort().join('_');
|
||||
if (checkedPairs.has(pairId)) continue;
|
||||
checkedPairs.add(pairId);
|
||||
|
||||
// Check intersection
|
||||
let intersection = null;
|
||||
try {
|
||||
intersection = turf.intersect(itemA.feature, itemB.feature);
|
||||
} catch (e) {
|
||||
console.warn("Intersection error", e);
|
||||
}
|
||||
|
||||
if (intersection) {
|
||||
const intersectArea = turf.area(intersection);
|
||||
if (intersectArea > 1) {
|
||||
overlaps.push({
|
||||
a: itemA,
|
||||
b: itemB,
|
||||
area: intersectArea
|
||||
});
|
||||
|
||||
fieldsWithOverlap.add(itemA.id);
|
||||
fieldsWithOverlap.add(itemB.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (overlaps.length > 0) {
|
||||
log(`✕ ${fieldsWithOverlap.size} fields with overlap found.`);
|
||||
|
||||
// We need to calculate total overlap percentage for each field to decide if it's > 30%
|
||||
// Map: FieldID -> TotalOverlapArea
|
||||
const fieldOverlapMap = {};
|
||||
|
||||
overlaps.forEach(o => {
|
||||
// Add to A
|
||||
if (!fieldOverlapMap[o.a.id]) fieldOverlapMap[o.a.id] = 0;
|
||||
fieldOverlapMap[o.a.id] += o.area;
|
||||
|
||||
// Add to B
|
||||
if (!fieldOverlapMap[o.b.id]) fieldOverlapMap[o.b.id] = 0;
|
||||
fieldOverlapMap[o.b.id] += o.area;
|
||||
});
|
||||
|
||||
// Report significant overlaps
|
||||
let severeCount = 0;
|
||||
|
||||
Object.keys(fieldOverlapMap).forEach(fid => {
|
||||
const item = items.find(it => it.id === fid); // This lookup might be slow if many items, but okay for now
|
||||
if (!item) return;
|
||||
|
||||
const totalOverlap = fieldOverlapMap[fid];
|
||||
const originalArea = item.area;
|
||||
const pct = (totalOverlap / originalArea) * 100;
|
||||
|
||||
let category = "<30%";
|
||||
if (pct >= 30) category = ">30%";
|
||||
|
||||
// Add to CSV Data
|
||||
overlapCsvData.push({
|
||||
Field_No: fid,
|
||||
Original_Area_ha: (originalArea / 10000).toFixed(4),
|
||||
Overlap_Area_ha: (totalOverlap / 10000).toFixed(4),
|
||||
Overlap_Percentage: pct.toFixed(1),
|
||||
Overlap_Category: category
|
||||
});
|
||||
|
||||
if (pct > 30) {
|
||||
log(`Field number ${fid} overlap >30% (${pct.toFixed(1)}%) -- Will be deleted`);
|
||||
severeCount++;
|
||||
}
|
||||
});
|
||||
|
||||
if (severeCount === 0) {
|
||||
log("✓ No significant overlap (>30%) detected.");
|
||||
} else {
|
||||
log(`✕ ${severeCount} fields have significant overlap (>30%).`);
|
||||
}
|
||||
|
||||
} else {
|
||||
log("✓ No overlap found!");
|
||||
}
|
||||
|
||||
// Save state for editing
|
||||
// We keep 'features' (which are fixed/deduplicated)
|
||||
rawGeoJSON.features = features;
|
||||
|
||||
}
|
||||
|
||||
function getFieldNo(feature) {
|
||||
return feature.properties['Field No'] || feature.properties['field'] || feature.properties['Field_No'];
|
||||
}
|
||||
|
||||
async function runEdits() {
|
||||
const editLog = [];
|
||||
editResults.classList.remove('hidden');
|
||||
editLogOutput.innerText = "Processing edits...";
|
||||
|
||||
function logEdit(msg) {
|
||||
editLog.push(msg);
|
||||
editLogOutput.innerText = editLog.join('\n');
|
||||
editLogOutput.scrollTop = editLogOutput.scrollHeight;
|
||||
}
|
||||
|
||||
setTimeout(async () => {
|
||||
let features = rawGeoJSON.features;
|
||||
|
||||
// Clean all features before processing
|
||||
features = features.map(f => cleanDuplicateVertices(f));
|
||||
|
||||
let delCount = 0;
|
||||
|
||||
// 1. Remove > 30% overlaps
|
||||
// We need to re-calculate overlaps because we want to be precise
|
||||
|
||||
// Build Index again
|
||||
let tree = new RBush();
|
||||
let items = features.map((f, index) => ({
|
||||
minX: turf.bbox(f)[0],
|
||||
minY: turf.bbox(f)[1],
|
||||
maxX: turf.bbox(f)[2],
|
||||
maxY: turf.bbox(f)[3],
|
||||
feature: f,
|
||||
id: getFieldNo(f),
|
||||
area: turf.area(f),
|
||||
index: index
|
||||
}));
|
||||
tree.load(items);
|
||||
|
||||
// Calculate overlap per field
|
||||
let fieldOverlapMap = {};
|
||||
|
||||
// Find all overlaps
|
||||
// Note: This is slightly inefficient to re-do, but safer.
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const itemA = items[i];
|
||||
const candidates = tree.search(itemA);
|
||||
for (const itemB of candidates) {
|
||||
if (itemA.index < itemB.index) { // Only check pair once
|
||||
const intersection = turf.intersect(itemA.feature, itemB.feature);
|
||||
if (intersection) {
|
||||
const area = turf.area(intersection);
|
||||
if (area > 1) {
|
||||
if (!fieldOverlapMap[itemA.id]) fieldOverlapMap[itemA.id] = 0;
|
||||
fieldOverlapMap[itemA.id] += area;
|
||||
|
||||
if (!fieldOverlapMap[itemB.id]) fieldOverlapMap[itemB.id] = 0;
|
||||
fieldOverlapMap[itemB.id] += area;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Identify fields to delete
|
||||
const toDelete = new Set();
|
||||
Object.keys(fieldOverlapMap).forEach(fid => {
|
||||
const item = items.find(it => it.id == fid);
|
||||
if (item) {
|
||||
const pct = (fieldOverlapMap[fid] / item.area) * 100;
|
||||
if (pct > 30) {
|
||||
toDelete.add(fid);
|
||||
logEdit(`Field ${fid} overlap ${pct.toFixed(1)}% > 30% -- ✕ Deleted!`);
|
||||
delCount++;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Apply Deletion
|
||||
features = features.filter(f => !toDelete.has(getFieldNo(f)));
|
||||
|
||||
if (delCount > 0) {
|
||||
logEdit(`✓ Significant overlap fixed - ${delCount} geometries deleted.`);
|
||||
} else {
|
||||
logEdit(`✓ No significant overlap detected.`);
|
||||
}
|
||||
|
||||
// 2. Fix remaining overlaps (< 30%)
|
||||
// Loop through intersections and split up difference
|
||||
logEdit("\nChecking for remaining overlaps (<30%) to fix...");
|
||||
|
||||
// Re-index with remaining features
|
||||
items = features.map((f, index) => ({
|
||||
minX: turf.bbox(f)[0],
|
||||
minY: turf.bbox(f)[1],
|
||||
maxX: turf.bbox(f)[2],
|
||||
maxY: turf.bbox(f)[3],
|
||||
feature: f,
|
||||
id: getFieldNo(f),
|
||||
area: turf.area(f),
|
||||
index: index
|
||||
}));
|
||||
tree = new RBush();
|
||||
tree.load(items);
|
||||
|
||||
let fixCount = 0;
|
||||
|
||||
let pairs = [];
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const itemA = items[i];
|
||||
const candidates = tree.search(itemA);
|
||||
for (const itemB of candidates) {
|
||||
if (itemA.index < itemB.index) {
|
||||
const intersection = turf.intersect(itemA.feature, itemB.feature);
|
||||
if (intersection && turf.area(intersection) > 1) {
|
||||
pairs.push({a: itemA, b: itemB});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (const pair of pairs) {
|
||||
const f1 = pair.a.feature; // Reference to object in 'features' array
|
||||
const f2 = pair.b.feature;
|
||||
|
||||
// Check if they are still valid/exist (in case we deleted one? No we filtered already)
|
||||
// Re-check intersection because one might have been modified by a previous iteration
|
||||
const intersection = turf.intersect(f1, f2);
|
||||
if (!intersection || turf.area(intersection) <= 1) continue;
|
||||
|
||||
const area1 = turf.area(f1);
|
||||
const area2 = turf.area(f2);
|
||||
|
||||
// "Add the overlapping area to the biggest plot"
|
||||
// Means subtract overlap from the smallest plot.
|
||||
|
||||
let updated = false;
|
||||
if (area1 > area2) {
|
||||
// f1 is bigger. Subtract f1 from f2.
|
||||
// poly2 <- st_difference(poly2, st_union(poly1))
|
||||
// effectively poly2 = poly2 - poly1
|
||||
try {
|
||||
const diff = turf.difference(f2, f1);
|
||||
if (diff) {
|
||||
f2.geometry = diff.geometry;
|
||||
updated = true;
|
||||
logEdit(`✓ Fixed conflict between ${getFieldNo(f1)} and ${getFieldNo(f2)} (Trimmed ${getFieldNo(f2)})`);
|
||||
} else {
|
||||
// f2 completely inside f1?
|
||||
logEdit(`! ${getFieldNo(f2)} is completely inside ${getFieldNo(f1)} - Removed ${getFieldNo(f2)}`);
|
||||
features = features.filter(f => f !== f2);
|
||||
}
|
||||
} catch(e) {
|
||||
console.warn("Difference failed", e);
|
||||
}
|
||||
} else {
|
||||
// f2 is bigger or equal. Subtract f2 from f1.
|
||||
try {
|
||||
const diff = turf.difference(f1, f2);
|
||||
if (diff) {
|
||||
f1.geometry = diff.geometry;
|
||||
updated = true;
|
||||
logEdit(`✓ Fixed conflict between ${getFieldNo(f1)} and ${getFieldNo(f2)} (Trimmed ${getFieldNo(f1)})`);
|
||||
} else {
|
||||
logEdit(`! ${getFieldNo(f1)} is completely inside ${getFieldNo(f2)} - Removed ${getFieldNo(f1)}`);
|
||||
features = features.filter(f => f !== f1);
|
||||
}
|
||||
} catch(e) {
|
||||
console.warn("Difference failed", e);
|
||||
}
|
||||
}
|
||||
|
||||
if (updated) fixCount++;
|
||||
}
|
||||
|
||||
if (fixCount === 0) {
|
||||
logEdit("✓ No <30% overlap detected.");
|
||||
}
|
||||
|
||||
// 3. Dissolve/Merge polygons by field ID
|
||||
logEdit("\n=== Dissolving polygons by field ID... ===");
|
||||
|
||||
// Group features by field ID
|
||||
const groupedByField = {};
|
||||
features.forEach(f => {
|
||||
const fieldId = getFieldNo(f);
|
||||
if (!groupedByField[fieldId]) {
|
||||
groupedByField[fieldId] = [];
|
||||
}
|
||||
groupedByField[fieldId].push(f);
|
||||
});
|
||||
|
||||
let dissolveCount = 0;
|
||||
const dissolvedFeatures = [];
|
||||
|
||||
Object.keys(groupedByField).forEach(fieldId => {
|
||||
const group = groupedByField[fieldId];
|
||||
|
||||
if (group.length === 1) {
|
||||
// No dissolve needed
|
||||
dissolvedFeatures.push(group[0]);
|
||||
} else {
|
||||
// Multiple polygons with same field ID - need to union them
|
||||
logEdit(` Dissolving ${group.length} polygons for field ${fieldId}...`);
|
||||
|
||||
try {
|
||||
// Union all geometries for this field
|
||||
let unionGeom = group[0];
|
||||
|
||||
for (let i = 1; i < group.length; i++) {
|
||||
unionGeom = turf.union(unionGeom, group[i]);
|
||||
if (!unionGeom) {
|
||||
logEdit(`⚠ Warning: Could not union all parts of field ${fieldId}`);
|
||||
// Fall back to keeping individual parts
|
||||
dissolvedFeatures.push(...group);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Preserve original properties from first feature
|
||||
unionGeom.properties = {...group[0].properties};
|
||||
dissolvedFeatures.push(unionGeom);
|
||||
dissolveCount++;
|
||||
logEdit(`✓ Field ${fieldId}: Merged ${group.length} parts into 1`);
|
||||
} catch (e) {
|
||||
logEdit(`⚠ Error dissolving field ${fieldId}: ${e.message}`);
|
||||
// Fall back to keeping individual parts
|
||||
dissolvedFeatures.push(...group);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (dissolveCount > 0) {
|
||||
logEdit(`✓ Dissolved ${dissolveCount} fields with multiple parts.`);
|
||||
} else {
|
||||
logEdit(`✓ No multi-part fields detected.`);
|
||||
}
|
||||
|
||||
features = dissolvedFeatures;
|
||||
|
||||
// Prepare download
|
||||
cleanedGeoJSON = {
|
||||
type: "FeatureCollection",
|
||||
features: features,
|
||||
crs: rawGeoJSON.crs
|
||||
};
|
||||
|
||||
logEdit("\n=== Saving edited shapefiles... ===");
|
||||
logEdit(`✓ Ready to download ${features.length} geometries.`);
|
||||
|
||||
// Add event listener for download edit log
|
||||
downloadEditLogBtn.onclick = () => downloadText(editLog.join('\n'), `${originalFileName}_edit_log.txt`);
|
||||
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function downloadText(content, filename) {
|
||||
const blob = new Blob([content], {type: "text/plain;charset=utf-8"});
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
function downloadJson(content, filename) {
|
||||
const blob = new Blob([JSON.stringify(content, null, 2)], {type: "application/json"});
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
function downloadCsv() {
|
||||
if (overlapCsvData.length === 0) {
|
||||
alert("No overlap data to download.");
|
||||
return;
|
||||
}
|
||||
const headers = Object.keys(overlapCsvData[0]);
|
||||
const rows = overlapCsvData.map(row => headers.map(h => row[h]).join(';'));
|
||||
const csvContent = [headers.join(';')].concat(rows).join('\n');
|
||||
downloadText(csvContent, `${originalFileName}_overlap_details.csv`);
|
||||
}
|
||||
220
webapps/polygon_analysis_editor/index.html
Normal file
220
webapps/polygon_analysis_editor/index.html
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Polygon Analysis & Editor</title>
|
||||
<link rel="stylesheet" href="../theme.css">
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: #faf8f3;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
}
|
||||
header {
|
||||
background: linear-gradient(135deg, var(--sc-primary) 0%, var(--sc-primary-light) 100%);
|
||||
color: white;
|
||||
padding: 15px 20px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
.back-btn {
|
||||
background: rgba(255,255,255,0.2);
|
||||
color: white;
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: background 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.back-btn:hover {
|
||||
background: rgba(255,255,255,0.3);
|
||||
}
|
||||
header h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
}
|
||||
.container {
|
||||
flex: 1;
|
||||
max-width: 1200px;
|
||||
margin: 30px auto;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.card {
|
||||
background: white;
|
||||
padding: 25px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
border: 1px solid #e0d9d0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card h2 {
|
||||
margin-top: 0;
|
||||
color: #333;
|
||||
border-bottom: 2px solid var(--sc-primary);
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.file-input-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.file-input-label {
|
||||
display: block;
|
||||
padding: 30px;
|
||||
border: 2px dashed var(--sc-primary);
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
background: rgba(42, 171, 149, 0.05);
|
||||
}
|
||||
.file-input-label:hover {
|
||||
border-color: var(--sc-primary-light);
|
||||
background: rgba(37, 150, 190, 0.05);
|
||||
}
|
||||
.file-input-wrapper input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
button {
|
||||
background: var(--sc-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
button:hover {
|
||||
background: #238b7d;
|
||||
}
|
||||
button:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.log-output {
|
||||
background: #1e1e1e;
|
||||
color: #d4d4d4;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
white-space: pre-wrap;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 15px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.actions-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
footer {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-top: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
border: 1px solid #e0d9d0;
|
||||
}
|
||||
/* Spinner */
|
||||
.spinner {
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid var(--sc-primary);
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
animation: spin 2s linear infinite;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
if (sessionStorage.getItem('authenticated') !== 'true') {
|
||||
window.location.href = '../login.html';
|
||||
}
|
||||
</script>
|
||||
<header>
|
||||
<button class="back-btn" onclick="window.location.href='../';" title="Back to main tools">← Back</button>
|
||||
<h1>🔷 Polygon Analysis & Editor</h1>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
<h2><span style="font-size: 24px;">🗺️</span> Upload GeoJSON</h2>
|
||||
<p>Upload a GeoJSON file containing the polygons to analyze. The tool will check for overlaps and other issues.</p>
|
||||
<div class="file-input-wrapper" id="dropZone">
|
||||
<label class="file-input-label" for="geojsonFile">
|
||||
<div id="fileLabelText">Drop your GeoJSON file here<br><small>or click to browse</small></div>
|
||||
</label>
|
||||
<input type="file" id="geojsonFile" accept=".geojson,.json" />
|
||||
</div>
|
||||
<div style="text-align: center; margin-top: 20px;">
|
||||
<button id="analyzeBtn" disabled>Analyze Polygons</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card hidden" id="resultsCard">
|
||||
<h2>Analysis Log</h2>
|
||||
<div id="logOutput" class="log-output"></div>
|
||||
|
||||
<div class="actions-row">
|
||||
<button id="downloadLogBtn">Download Log</button>
|
||||
<button id="downloadCsvBtn">Download Overlap CSV</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card hidden" id="editCard">
|
||||
<h2>Apply Edits?</h2>
|
||||
<p>Would you like to automatically clean the polygons based on the analysis? (Fields with >30% overlap will be deleted, others trimmed)</p>
|
||||
<div class="actions-row">
|
||||
<button id="applyEditsBtn">✅ Yes, Apply Edits</button>
|
||||
</div>
|
||||
<div id="editResults" class="hidden" style="margin-top: 20px;">
|
||||
<h3>Edit Results</h3>
|
||||
<div id="editLogOutput" class="log-output"></div>
|
||||
<button id="downloadCleanedBtn">Download Cleaned GeoJSON</button>
|
||||
<button id="downloadEditLogBtn">Download Edit Log</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
Polygon Analysis Editor | Powered by Turf.js
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- Libraries -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/rbush@3/rbush.min.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue