From b1cffdad1d979ab7bf6a5a92392eebf9622b8024 Mon Sep 17 00:00:00 2001
From: Nik Verweel <nikverweel@gmail.com>
Date: Tue, 10 Feb 2026 10:33:47 +0100
Subject: [PATCH] Create ODK Viewer web tool

---
 webapps/index.html            |  15 +
 webapps/odk_viewer/app.js     | 531 ++++++++++++++++++++++++++++++++++
 webapps/odk_viewer/index.html | 473 ++++++++++++++++++++++++++++++
 webapps/res/magnify.png       | Bin 0 -> 8209 bytes
 4 files changed, 1019 insertions(+)
 create mode 100644 webapps/odk_viewer/app.js
 create mode 100644 webapps/odk_viewer/index.html
 create mode 100644 webapps/res/magnify.png

diff --git a/webapps/index.html b/webapps/index.html
index 6b7e6d8..a7d175f 100644
--- a/webapps/index.html
+++ b/webapps/index.html
@@ -246,6 +246,21 @@
                     <a href="./polygon_analysis_editor/" class="app-btn">Open Editor</a>
                 </div>
             </div>
+
+            <!-- ODK Viewer -->
+            <div class="app-card">
+                <div class="app-icon">🔎</div>
+                <div class="app-content">
+                    <h2>ODK Data Viewer</h2>
+                    <p>Upload ODK CSVs to visualise and turn field corner points into polygons</p>
+                    <ul class="app-features">
+                        <li>View ODK data</li>
+                        <li>Turn corner points into polygons</li>
+                        <li>Download created polygons</li>
+                    </ul>
+                    <a href="./odk_viewer/" class="app-btn">Open Viewer</a>
+                </div>
+            </div>
         </div>
         
         <footer>
diff --git a/webapps/odk_viewer/app.js b/webapps/odk_viewer/app.js
new file mode 100644
index 0000000..2e3eb51
--- /dev/null
+++ b/webapps/odk_viewer/app.js
@@ -0,0 +1,531 @@
+let map;
+let osmLayer;
+let satelliteLayer;
+
+// Initialize map when DOM is ready
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize map layers
+    osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '© OpenStreetMap contributors',
+        maxNativeZoom: 19,
+        maxZoom: 23
+    });
+
+    satelliteLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+        attribution: '© Esri, DigitalGlobe, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community',
+        maxNativeZoom: 18,
+        maxZoom: 23
+    });
+
+    // Initialize map
+    map = L.map('map', {
+        maxZoom: 23,
+        preferCanvas: true
+    }).setView([0, 0], 2);
+    osmLayer.addTo(map);
+
+    // Invalidate map size to ensure proper rendering
+    setTimeout(() => {
+        map.invalidateSize();
+    }, 100);
+
+    // Initialize DOM elements
+    csvInput = document.getElementById('csvFile');
+    fileNameDisplay = document.getElementById('fileName');
+    errorMessage = document.getElementById('errorMessage');
+    successMessage = document.getElementById('successMessage');
+    statsSection = document.getElementById('statsSection');
+    featuresSection = document.getElementById('featuresSection');
+    recordCountEl = document.getElementById('recordCount');
+    columnCountEl = document.getElementById('columnCount');
+    mappedCountEl = document.getElementById('mappedCount');
+    featureLst = document.getElementById('featuresList');
+    clearBtn = document.getElementById('clearBtn');
+    downloadBtn = document.getElementById('downloadBtn');
+    featureSearch = document.getElementById('featureSearch');
+    polygonSection = document.getElementById('polygonSection');
+    createPolygonsBtn = document.getElementById('createPolygonsBtn');
+    downloadPolygonsBtn = document.getElementById('downloadPolygonsBtn');
+    polygonCount = document.getElementById('polygonCount');
+
+    // Setup event listeners
+    csvInput.addEventListener('change', handleCsvUpload);
+    clearBtn.addEventListener('click', handleClear);
+    downloadBtn.addEventListener('click', handleDownload);
+    featureSearch.addEventListener('input', handleSearch);
+    createPolygonsBtn.addEventListener('click', handleCreatePolygons);
+    downloadPolygonsBtn.addEventListener('click', handleDownloadPolygons);
+});
+
+let currentLayer = 'osm';
+let markerLayer = null;
+let polygonLayer = null;
+let currentCsvData = null;
+let featuresList = [];
+let markers = [];
+let selectedIndex = -1;
+let currentPolygons = null;
+
+// Toggle map layer
+let mapToggle;
+document.addEventListener('DOMContentLoaded', function() {
+    mapToggle = document.getElementById('mapToggle');
+    mapToggle.addEventListener('change', () => {
+        if (mapToggle.checked) {
+            map.removeLayer(currentLayer === 'osm' ? osmLayer : satelliteLayer);
+            satelliteLayer.addTo(map);
+            currentLayer = 'satellite';
+        } else {
+            map.removeLayer(currentLayer === 'satellite' ? satelliteLayer : osmLayer);
+            osmLayer.addTo(map);
+            currentLayer = 'osm';
+        }
+    });
+});
+
+// DOM Elements - will be initialized on DOMContentLoaded
+let csvInput, fileNameDisplay, errorMessage, successMessage, statsSection, featuresSection;
+let recordCountEl, columnCountEl, mappedCountEl, featureLst, clearBtn;
+let downloadBtn, featureSearch, polygonSection, createPolygonsBtn, downloadPolygonsBtn, polygonCount;
+
+// Show message
+function showMessage(message, type = 'error') {
+    const el = type === 'error' ? errorMessage : successMessage;
+    el.textContent = message;
+    el.classList.add('active');
+    setTimeout(() => el.classList.remove('active'), 5000);
+}
+
+// Parse CSV text
+function parseCSV(csvText) {
+    const lines = csvText.trim().split('\n');
+    if (lines.length === 0) return null;
+
+    const headers = lines[0].split(',').map(h => h.trim());
+    const data = [];
+
+    for (let i = 1; i < lines.length; i++) {
+        const fields = parseCSVLine(lines[i]);
+        if (fields.length === 0) continue;
+
+        const row = {};
+        for (let j = 0; j < headers.length; j++) {
+            row[headers[j]] = fields[j] || '';
+        }
+        data.push(row);
+    }
+
+    return { headers, data };
+}
+
+// Parse CSV line handling quoted values
+function parseCSVLine(line) {
+    const result = [];
+    let current = '';
+    let inQuotes = false;
+
+    for (let i = 0; i < line.length; i++) {
+        const char = line[i];
+        const nextChar = line[i + 1];
+
+        if (char === '"') {
+            if (inQuotes && nextChar === '"') {
+                current += '"';
+                i++;
+            } else {
+                inQuotes = !inQuotes;
+            }
+        } else if (char === ',' && !inQuotes) {
+            result.push(current);
+            current = '';
+        } else {
+            current += char;
+        }
+    }
+    result.push(current);
+    return result;
+}
+
+// Find column by name (case-insensitive, handle underscores and spaces)
+function findColumn(headers, searchName) {
+    const normalized = searchName.toLowerCase().replace(/[\s_]/g, '');
+    return headers.find(header => 
+        header.toLowerCase().replace(/[\s_]/g, '') === normalized
+    );
+}
+
+// Load CSV data
+function loadCSV(csvData) {
+    const { headers, data } = csvData;
+
+    // Find required columns
+    const latCol = findColumn(headers, 'start-geopoint-Latitude');
+    const lonCol = findColumn(headers, 'start-geopoint-Longitude');
+    const nameCol = findColumn(headers, 'field_id-field_name');
+    const codeCol = findColumn(headers, 'field_id-field_code');
+
+    if (!latCol || !lonCol) {
+        showMessage('CSV must contain "start-geopoint-Latitude" and "start-geopoint-Longitude" columns');
+        return false;
+    }
+
+    currentCsvData = { headers, data, latCol, lonCol, nameCol, codeCol };
+    featuresList = [];
+    markers = [];
+    selectedIndex = -1;
+
+    // Clear previous layer
+    if (markerLayer) {
+        map.removeLayer(markerLayer);
+    }
+    markerLayer = L.featureGroup();
+
+    let mappedCount = 0;
+    const bounds = L.latLngBounds();
+
+    // Create markers
+    data.forEach((row, index) => {
+        const lat = parseFloat(row[latCol]);
+        const lon = parseFloat(row[lonCol]);
+
+        if (isNaN(lat) || isNaN(lon)) return;
+
+        const fieldName = nameCol ? row[nameCol] : `Point ${index + 1}`;
+        const fieldCode = codeCol ? row[codeCol] : '';
+
+        const marker = L.circleMarker([lat, lon], {
+            radius: 6,
+            fillColor: '#667eea',
+            color: '#4a5fc1',
+            weight: 2,
+            opacity: 0.8,
+            fillOpacity: 0.7
+        });
+
+        // Create popup content
+        const popupContent = `
+            <div style="font-size: 13px; width: 280px;">
+                <strong style="font-size: 14px; color: #333;">${fieldName}</strong>
+                ${fieldCode ? `<br><small style="color: #666;">Code: ${fieldCode}</small>` : ''}
+                <hr style="margin: 8px 0; border: none; border-top: 1px solid #eee;">
+                <table style="width: 100%; font-size: 12px;">
+                    <tr>
+                        <td style="font-weight: 600; color: #333;">Latitude:</td>
+                        <td>${lat.toFixed(6)}</td>
+                    </tr>
+                    <tr>
+                        <td style="font-weight: 600; color: #333;">Longitude:</td>
+                        <td>${lon.toFixed(6)}</td>
+                    </tr>
+                </table>
+            </div>
+        `;
+
+        marker.bindPopup(popupContent);
+        marker.on('click', () => selectFeature(index));
+
+        markerLayer.addLayer(marker);
+        bounds.extend([lat, lon]);
+
+        featuresList.push({
+            name: fieldName,
+            code: fieldCode,
+            lat,
+            lon,
+            index,
+            row
+        });
+
+        mappedCount++;
+    });
+
+    // Add layer to map
+    markerLayer.addTo(map);
+
+    // Update stats
+    recordCountEl.textContent = data.length;
+    columnCountEl.textContent = headers.length;
+    mappedCountEl.textContent = mappedCount;
+
+    // Display features list
+    displayFeaturesList();
+
+    // Fit bounds
+    if (mappedCount > 0) {
+        map.fitBounds(bounds, { padding: [50, 50] });
+    }
+
+    // Show sections
+    statsSection.style.display = 'block';
+    featuresSection.style.display = 'block';
+    polygonSection.style.display = 'block';
+    downloadBtn.style.display = 'block';
+
+    showMessage(`Successfully loaded ${mappedCount} field locations`, 'success');
+    return true;
+}
+
+// Display features list
+function displayFeaturesList() {
+    featureLst.innerHTML = '';
+    if (featuresList.length === 0) {
+        featureLst.innerHTML = '<div style="padding: 8px; color: #999; text-align: center;">No features loaded</div>';
+        return;
+    }
+
+    featuresList.forEach((feature, index) => {
+        const item = document.createElement('div');
+        item.className = 'feature-item' + (selectedIndex === index ? ' active' : '');
+        item.innerHTML = `
+            <strong>${feature.name}</strong>
+            ${feature.code ? `<br><small style="color: #666;">Code: ${feature.code}</small>` : ''}
+        `;
+        item.addEventListener('click', () => selectFeature(index));
+        featureLst.appendChild(item);
+    });
+}
+
+// Select feature
+function selectFeature(index) {
+    selectedIndex = index;
+    const feature = featuresList[index];
+
+    // Update feature list highlight
+    displayFeaturesList();
+
+    // Zoom to marker
+    map.setView([feature.lat, feature.lon], 16);
+}
+
+
+
+
+
+// Handle file upload
+function handleCsvUpload(e) {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    fileNameDisplay.textContent = `📄 ${file.name}`;
+
+    const reader = new FileReader();
+    reader.onload = (event) => {
+        try {
+            const csvData = parseCSV(event.target.result);
+            if (!csvData) {
+                showMessage('Invalid CSV file');
+                return;
+            }
+            loadCSV(csvData);
+        } catch (err) {
+            showMessage(`Error parsing CSV: ${err.message}`);
+        }
+    };
+    reader.onerror = () => {
+        showMessage('Error reading file');
+    };
+    reader.readAsText(file);
+}
+
+// Clear all
+function handleClear() {
+    csvInput.value = '';
+    fileNameDisplay.textContent = 'No file selected';
+    
+    if (markerLayer) {
+        map.removeLayer(markerLayer);
+        markerLayer = null;
+    }
+    
+    currentCsvData = null;
+    featuresList = [];
+    markers = [];
+    selectedIndex = -1;
+
+    statsSection.style.display = 'none';
+    featuresSection.style.display = 'none';
+    polygonSection.style.display = 'none';
+    downloadBtn.style.display = 'none';
+    downloadPolygonsBtn.style.display = 'none';
+
+    if (polygonLayer) {
+        map.removeLayer(polygonLayer);
+        polygonLayer = null;
+    }
+    currentPolygons = null;
+
+    showMessage('Data cleared', 'success');
+}
+
+// Download CSV
+function handleDownload() {
+    if (!currentCsvData) return;
+
+    const { headers, data } = currentCsvData;
+    let csv = headers.map(h => `"${h}"`).join(',') + '\n';
+    
+    data.forEach(row => {
+        const values = headers.map(header => {
+            const value = row[header] || '';
+            return `"${String(value).replace(/"/g, '""')}"`;
+        });
+        csv += values.join(',') + '\n';
+    });
+
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'data.csv';
+    a.click();
+    window.URL.revokeObjectURL(url);
+
+    showMessage('CSV downloaded', 'success');
+}
+
+// Search features
+function handleSearch(e) {
+    const searchTerm = e.target.value.toLowerCase();
+    const items = document.querySelectorAll('.feature-item');
+    
+    items.forEach((item, index) => {
+        const feature = featuresList[index];
+        const match = feature.name.toLowerCase().includes(searchTerm) || 
+                      feature.code.toLowerCase().includes(searchTerm);
+        item.style.display = match ? 'block' : 'none';
+    });
+}
+
+// Parse boundary string to coordinates
+function parseBoundary(boundaryString) {
+    if (!boundaryString || boundaryString.trim() === '') return null;
+    
+    const coordinates = [];
+    const parts = boundaryString.split(';').map(p => p.trim()).filter(p => p.length > 0);
+    
+    for (const part of parts) {
+        const values = part.split(/\s+/);
+        if (values.length >= 2) {
+            const lat = parseFloat(values[0]);
+            const lon = parseFloat(values[1]);
+            
+            if (!isNaN(lat) && !isNaN(lon)) {
+                // GeoJSON uses [longitude, latitude] format
+                coordinates.push([lon, lat]);
+            }
+        }
+    }
+    
+    // Close the polygon ring if not already closed
+    if (coordinates.length > 0 && 
+        (coordinates[0][0] !== coordinates[coordinates.length - 1][0] || 
+         coordinates[0][1] !== coordinates[coordinates.length - 1][1])) {
+        coordinates.push(coordinates[0]);
+    }
+    
+    return coordinates.length > 3 ? [coordinates] : null;
+}
+
+// Create polygons from CSV data
+function handleCreatePolygons() {
+    if (!currentCsvData || !featuresList.length) {
+        showMessage('No data loaded. Please upload a CSV file first.');
+        return;
+    }
+
+    const { headers, data, latCol, lonCol, nameCol, codeCol } = currentCsvData;
+    const boundaryCol = findColumn(headers, 'field_id-field_boundary');
+
+    if (!boundaryCol) {
+        showMessage('CSV does not contain "field_id-field_boundary" column');
+        return;
+    }
+
+    // Clear previous polygons
+    if (polygonLayer) {
+        map.removeLayer(polygonLayer);
+    }
+    polygonLayer = L.featureGroup();
+
+    const features = [];
+    let polygonCount_val = 0;
+
+    // Create polygons from boundary data
+    data.forEach((row, index) => {
+        const boundaryString = row[boundaryCol];
+        const coordinates = parseBoundary(boundaryString);
+
+        if (!coordinates) return;
+
+        const fieldName = nameCol ? row[nameCol] : `Field ${index + 1}`;
+        const fieldCode = codeCol ? row[codeCol] : '';
+
+        // Create GeoJSON feature
+        const feature = {
+            type: 'Feature',
+            geometry: {
+                type: 'Polygon',
+                coordinates: coordinates
+            },
+            properties: {
+                name: fieldName,
+                code: fieldCode,
+                index: index
+            }
+        };
+
+        features.push(feature);
+
+        // Create Leaflet polygon
+        const polygon = L.geoJSON(feature, {
+            style: {
+                color: '#667eea',
+                weight: 2,
+                opacity: 0.7,
+                fillOpacity: 0.3
+            },
+            onEachFeature: (feature, layer) => {
+                const popupContent = `
+                    <div style="font-size: 13px;">
+                        <strong>${feature.properties.name}</strong>
+                        ${feature.properties.code ? `<br><small style="color: #666;">Code: ${feature.properties.code}</small>` : ''}
+                    </div>
+                `;
+                layer.bindPopup(popupContent);
+            }
+        }).addTo(polygonLayer);
+
+        polygonCount_val++;
+    });
+
+    // Add polygon layer to map
+    polygonLayer.addTo(map);
+
+    // Store polygons for download
+    currentPolygons = {
+        type: 'FeatureCollection',
+        features: features
+    };
+
+    // Update count
+    polygonCount.textContent = polygonCount_val;
+    downloadPolygonsBtn.style.display = 'block';
+
+    showMessage(`Successfully created ${polygonCount_val} polygons`, 'success');
+}
+
+// Download polygons as GeoJSON
+function handleDownloadPolygons() {
+    if (!currentPolygons) return;
+
+    const geojsonString = JSON.stringify(currentPolygons, null, 2);
+    const blob = new Blob([geojsonString], { type: 'application/json' });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'polygons.geojson';
+    a.click();
+    window.URL.revokeObjectURL(url);
+
+    showMessage('GeoJSON downloaded', 'success');
+}
diff --git a/webapps/odk_viewer/index.html b/webapps/odk_viewer/index.html
new file mode 100644
index 0000000..677918a
--- /dev/null
+++ b/webapps/odk_viewer/index.html
@@ -0,0 +1,473 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ODK Viewer</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" />
+    <link rel="stylesheet" href="../theme.css">
+    <link rel="icon" type="image/x-icon" href="../res/magnify.png">
+    <style>
+        /* Layout styling adapted from sugar_mill_locator to match theme */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: #faf8f3;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        
+        /* Header matches the locator tool */
+        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;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        h1 {
+            font-size: 20px;
+            font-weight: 600;
+            margin: 0;
+            flex: 1;
+            text-align: center;
+        }
+
+        .header-controls {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+        }
+
+        /* Main Container */
+        .container {
+            display: flex;
+            flex: 1;
+            overflow: hidden;
+            height: calc(100vh - 60px);
+            background: white;
+        }
+        
+        /* Map takes remaining space */
+        #map {
+            flex: 1;
+            position: relative;
+            background: #e0e0e0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+        }
+        
+        /* Sidebar Panel styling */
+        .panel {
+            width: 360px;
+            background: var(--sc-light);
+            border-left: 1px solid var(--sc-border);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            box-shadow: -2px 0 8px rgba(0,0,0,0.08);
+            z-index: 2;
+        }
+        
+        .panel-header {
+            background: linear-gradient(135deg, var(--sc-primary) 0%, var(--sc-primary-light) 100%);
+            color: white;
+            padding: 15px;
+            font-weight: 600;
+            font-size: 14px;
+            flex-shrink: 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .panel-content {
+            flex: 1;
+            overflow-y: auto;
+            padding: 15px;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        
+        .panel-section {
+            background: white;
+            padding: 15px;
+            border-radius: 8px;
+            border: 1px solid var(--sc-border);
+            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+        }
+        
+        .section-title {
+            font-weight: 600;
+            font-size: 13px;
+            color: var(--sc-text);
+            margin-bottom: 12px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            border-bottom: 1px solid #eee;
+            padding-bottom: 8px;
+        }
+
+        /* File Input Styling */
+        .file-input-wrapper {
+            position: relative;
+            margin-bottom: 10px;
+        }
+
+        .file-input-label {
+            display: block;
+            padding: 12px;
+            background: #f8f9fa;
+            border: 2px dashed var(--sc-primary-light);
+            border-radius: 6px;
+            text-align: center;
+            cursor: pointer;
+            color: var(--sc-primary);
+            font-weight: 600;
+            font-size: 13px;
+            transition: all 0.3s;
+        }
+
+        .file-input-label:hover {
+            background: #eef7f6;
+            transform: translateY(-1px);
+        }
+
+        input[type="file"] {
+            display: none;
+        }
+
+        .file-name {
+            font-size: 12px;
+            color: var(--sc-text-muted);
+            margin-top: 5px;
+            text-align: center;
+            word-break: break-all;
+        }
+
+        /* Stats & Summary */
+        .stat-item {
+            display: flex;
+            justify-content: space-between;
+            font-size: 13px;
+            padding: 6px 0;
+            border-bottom: 1px solid #f0f0f0;
+        }
+
+        .stat-item:last-child { border-bottom: none; }
+        
+        .stat-label { color: var(--sc-text-muted); }
+        .stat-value { font-weight: 600; color: var(--sc-text); }
+
+        /* Feature List */
+        .features-list {
+            max-height: 200px;
+            overflow-y: auto;
+            border: 1px solid #eee;
+            border-radius: 4px;
+        }
+
+        .feature-item {
+            padding: 8px 10px;
+            font-size: 12px;
+            border-bottom: 1px solid #eee;
+            cursor: pointer;
+            transition: background 0.2s;
+        }
+
+        .feature-item:hover { background: #f5f5f5; }
+        .feature-item.active { 
+            background: var(--sc-primary-light); 
+            color: white; 
+        }
+
+        /* Buttons */
+        .btn-group {
+            display: flex;
+            gap: 8px;
+        }
+
+        button {
+            padding: 8px 12px;
+            border: none;
+            border-radius: 4px;
+            font-size: 13px;
+            cursor: pointer;
+            transition: all 0.2s;
+            flex: 1;
+        }
+
+        /* Use theme colors via variables where possible, or match hex */
+        .btn-primary { background: var(--sc-primary); color: white; }
+        .btn-primary:hover { background: var(--sc-primary-light); }
+        
+        .btn-secondary { background: #f0f0f0; color: #333; border: 1px solid #ddd; }
+        .btn-secondary:hover { background: #e0e0e0; }
+
+        .btn-danger { background: var(--sc-danger); color: white; }
+        .btn-danger:hover { background: #c0392b; }
+
+        /* Map Controls (Satellite Toggle) */
+        .map-toggle-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            background: rgba(255,255,255,0.2);
+            padding: 5px 10px;
+            border-radius: 4px;
+            font-size: 13px;
+        }
+        
+        /* Modal Styling (Matching Locator) */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .modal.active { display: flex; }
+        
+        .modal-content {
+            background: white;
+            border-radius: 8px;
+            width: 90%;
+            max-width: 500px;
+            max-height: 85vh;
+            display: flex;
+            flex-direction: column;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+        }
+        
+        .modal-header {
+            background: linear-gradient(135deg, var(--sc-primary) 0%, var(--sc-primary-light) 100%);
+            color: white;
+            padding: 15px 20px;
+            border-radius: 8px 8px 0 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .modal-header h2 { font-size: 16px; margin: 0; }
+        
+        .modal-body {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .modal-property {
+            display: flex;       /* Enables side-by-side layout */
+            align-items: baseline;
+            padding: 8px 0;
+            border-bottom: 1px solid #eee;
+        }
+        
+        .modal-property:last-child {
+            border-bottom: none;
+        }
+
+        .modal-property-key {
+            flex: 0 0 40%;       /* First column: fixed 40% width */
+            font-weight: 700;    /* Bold text */
+            color: var(--sc-primary);
+            padding-right: 15px;
+            font-size: 13px;
+        }
+
+        .modal-property-value {
+            flex: 1;             /* Second column: takes remaining space */
+            color: #333;
+            word-break: break-word;
+            font-size: 13px;
+        }
+        
+        .close-btn {
+            background: none;
+            border: none;
+            color: white;
+            font-size: 24px;
+            padding: 0;
+            cursor: pointer;
+            opacity: 0.8;
+            flex: 0;
+        }
+        .close-btn:hover { opacity: 1; }
+
+        /* Property Table in Modal/Sidebar */
+        .property-row {
+            border-bottom: 1px solid #eee;
+            padding: 8px 0;
+            font-size: 13px;
+        }
+        .property-key { font-weight: 600; color: var(--sc-primary); display: block; margin-bottom: 2px; }
+        .property-value { color: #333; word-break: break-word; }
+
+        /* Alert Messages */
+        .alert {
+            padding: 10px;
+            border-radius: 4px;
+            margin-bottom: 15px;
+            font-size: 12px;
+            display: none;
+        }
+        .alert.active { display: block; }
+        .alert-error { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
+        .alert-success { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
+
+        /* Search Input */
+        .search-input {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid var(--sc-border);
+            border-radius: 4px;
+            font-size: 13px;
+        }
+        .search-input:focus {
+            outline: none;
+            border-color: var(--sc-primary);
+            box-shadow: 0 0 0 2px rgba(42, 171, 149, 0.1);
+        }
+
+        /* Attribute Table */
+        .table-wrapper {
+            overflow-x: auto;
+            border: 1px solid #eee;
+            border-radius: 4px;
+        }
+        .attribute-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 12px;
+        }
+        .attribute-table th {
+            background: #f8f9fa;
+            text-align: left;
+            padding: 8px;
+            font-weight: 600;
+            color: var(--sc-text);
+            border-bottom: 2px solid #eee;
+        }
+        .attribute-table td {
+            padding: 8px;
+            border-bottom: 1px solid #eee;
+            color: var(--sc-text);
+        }
+
+        /* Scrollbar Styling */
+        ::-webkit-scrollbar { width: 6px; height: 6px; }
+        ::-webkit-scrollbar-track { background: #f1f1f1; }
+        ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
+        ::-webkit-scrollbar-thumb:hover { background: #bbb; }
+    </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>🔎 ODK Viewer </h1>
+        <div class="header-controls">
+            <label class="map-toggle-wrapper" style="cursor: pointer;">
+                <input type="checkbox" id="mapToggle">
+                <span>🛰️ Satellite</span>
+            </label>
+        </div>
+    </header>
+    <div class="container">
+        <div id="map"></div>
+
+        <div class="panel">
+            <div class="panel-header">Controls & Data</div>
+            
+            <div class="panel-content">
+                <div class="alert alert-error" id="errorMessage"></div>
+                <div class="alert alert-success" id="successMessage"></div>
+
+                <div class="panel-section">
+                    <div class="section-title">📁 Upload File</div>
+                    <div class="file-input-wrapper">
+                        <label for="csvFile" class="file-input-label">
+                            Choose CSV File
+                        </label>
+                        <input type="file" id="csvFile" accept=".csv" />
+                        <div class="file-name" id="fileName">No file selected</div>
+                    </div>
+                    <div class="btn-group">
+                        <button id="clearBtn" class="btn-secondary">Clear</button>
+                        <button id="downloadBtn" class="btn-primary" style="display: none;">Download CSV</button>
+                    </div>
+                </div>
+
+                <div class="panel-section" id="statsSection" style="display: none;">
+                    <div class="section-title">📊 Data Stats</div>
+                    <div class="stat-item">
+                        <span class="stat-label">Total Records:</span>
+                        <span class="stat-value" id="recordCount">0</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-label">Columns:</span>
+                        <span class="stat-value" id="columnCount">0</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-label">Mapped Points:</span>
+                        <span class="stat-value" id="mappedCount">0</span>
+                    </div>
+                </div>
+
+                <div class="panel-section" id="polygonSection" style="display: none;">
+                    <div class="section-title">🔷 Create Polygons</div>
+                    <div class="btn-group">
+                        <button id="createPolygonsBtn" class="btn-primary">Create Polygons</button>
+                        <button id="downloadPolygonsBtn" class="btn-secondary" style="display: none;">Download GeoJSON</button>
+                    </div>
+                    <div class="stat-item" style="margin-top: 10px;">
+                        <span class="stat-label">Polygons:</span>
+                        <span class="stat-value" id="polygonCount">0</span>
+                    </div>
+                </div>
+
+                <div class="panel-section" id="featuresSection" style="display: none;">
+                    <div class="section-title">📍 Field Locations</div>
+                    <div style="margin-bottom: 10px;">
+                        <input 
+                            type="text" 
+                            id="featureSearch" 
+                            class="search-input"
+                            placeholder="Search by field name..." 
+                        />
+                    </div>
+                    <div class="features-list" id="featuresList"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/webapps/res/magnify.png b/webapps/res/magnify.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb0940820fa7250c78976fa54efdb92c5b079f30
GIT binary patch
literal 8209
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
D$VPfo

literal 0
HcmV?d00001