532 lines
16 KiB
JavaScript
532 lines
16 KiB
JavaScript
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');
|
|
}
|