Create ODK Viewer web tool

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>

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');
+}

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>