917 lines
35 KiB
JavaScript
917 lines
35 KiB
JavaScript
// Initialize map layers
|
|
const osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap contributors',
|
|
maxNativeZoom: 19,
|
|
maxZoom: 23
|
|
});
|
|
|
|
const 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
|
|
const map = L.map('map', {
|
|
maxZoom: 23
|
|
}).setView([0, 0], 2);
|
|
osmLayer.addTo(map);
|
|
|
|
let currentLayer = 'osm';
|
|
let geojsonLayer = null;
|
|
let labelsLayer = null;
|
|
let millsLayer = null;
|
|
let millMarkers = {};
|
|
let mills = [];
|
|
let currentGeojsonData = null;
|
|
let featuresList = [];
|
|
let showLabels = false;
|
|
let showMills = false;
|
|
|
|
// Color scheme for countries (for mills)
|
|
const countryColors = {
|
|
'South Africa': '#FF6B6B',
|
|
'Zimbabwe': '#4ECDC4',
|
|
'eSwatini': '#45B7D1',
|
|
'Mozambique': '#96CEB4',
|
|
'Malawi': '#FFEAA7',
|
|
'Zambia': '#DDA15E',
|
|
'Uganda': '#EE6C4D',
|
|
'Kenya': '#F1A208',
|
|
'Tanzania': '#A23B72',
|
|
'Rwanda': '#8E7DBE',
|
|
'Burundi': '#C9ADA7',
|
|
'Mexico': '#006846',
|
|
};
|
|
|
|
// Toggle map layer
|
|
const mapToggle = document.getElementById('mapToggle');
|
|
const mapTypeLabel = document.getElementById('mapTypeLabel');
|
|
|
|
mapToggle.addEventListener('change', () => {
|
|
if (mapToggle.checked) {
|
|
// Switch to satellite
|
|
map.removeLayer(osmLayer);
|
|
satelliteLayer.addTo(map);
|
|
mapTypeLabel.textContent = 'SAT';
|
|
currentLayer = 'satellite';
|
|
} else {
|
|
// Switch to OSM
|
|
map.removeLayer(satelliteLayer);
|
|
osmLayer.addTo(map);
|
|
mapTypeLabel.textContent = 'OSM';
|
|
currentLayer = 'osm';
|
|
}
|
|
});
|
|
|
|
// Toggle labels visibility
|
|
const labelsToggle = document.getElementById('labelsToggle');
|
|
labelsToggle.addEventListener('change', () => {
|
|
showLabels = labelsToggle.checked;
|
|
if (!labelsLayer) {
|
|
console.warn('Labels layer not initialized');
|
|
return;
|
|
}
|
|
|
|
if (showLabels) {
|
|
labelsLayer.addTo(map);
|
|
updateLabelsVisibility();
|
|
} else {
|
|
map.removeLayer(labelsLayer);
|
|
}
|
|
});
|
|
|
|
// Toggle mills visibility
|
|
const millsToggle = document.getElementById('millsToggle');
|
|
millsToggle.addEventListener('change', () => {
|
|
showMills = millsToggle.checked;
|
|
|
|
if (showMills) {
|
|
if (mills.length === 0) {
|
|
loadAndRenderMills();
|
|
} else if (!map.hasLayer(millsLayer)) {
|
|
millsLayer.addTo(map);
|
|
}
|
|
} else {
|
|
if (millsLayer && map.hasLayer(millsLayer)) {
|
|
map.removeLayer(millsLayer);
|
|
}
|
|
}
|
|
});
|
|
|
|
// Elements
|
|
const geojsonInput = document.getElementById('geojsonFile');
|
|
const fileNameDisplay = document.getElementById('fileName');
|
|
const errorMessage = document.getElementById('errorMessage');
|
|
const successMessage = document.getElementById('successMessage');
|
|
const statsSection = document.getElementById('statsSection');
|
|
const featuresSection = document.getElementById('featuresSection');
|
|
const propertiesSection = document.getElementById('propertiesSection');
|
|
const propertiesContent = document.getElementById('propertiesContent');
|
|
const featureCountEl = document.getElementById('featureCount');
|
|
const geomTypeEl = document.getElementById('geomType');
|
|
const boundsEl = document.getElementById('bounds');
|
|
const featureLst = document.getElementById('featuresList');
|
|
const clearBtn = document.getElementById('clearBtn');
|
|
const downloadBtn = document.getElementById('downloadBtn');
|
|
const featureModal = document.getElementById('featureModal');
|
|
const modalTitle = document.getElementById('modalTitle');
|
|
const modalBody = document.getElementById('modalBody');
|
|
const summarySection = document.getElementById('summarySection');
|
|
const tableSection = document.getElementById('tableSection');
|
|
const clientNameEl = document.getElementById('clientName');
|
|
const totalFieldsEl = document.getElementById('totalFields');
|
|
const totalHectaresEl = document.getElementById('totalHectares');
|
|
const totalAcresEl = document.getElementById('totalAcres');
|
|
const featureSearch = document.getElementById('featureSearch');
|
|
|
|
// 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);
|
|
}
|
|
|
|
// Calculate area in square meters using Turf.js
|
|
function getFeatureArea(feature) {
|
|
try {
|
|
if (!feature || !feature.geometry) return 0;
|
|
const geomType = feature.geometry.type;
|
|
if (geomType === 'Point' || geomType === 'LineString' || geomType === 'MultiLineString') return 0;
|
|
// Only Polygon and MultiPolygon are valid for area
|
|
if (geomType === 'Polygon' || geomType === 'MultiPolygon') {
|
|
// turf.area expects a GeoJSON Feature or Geometry
|
|
return turf.area(feature);
|
|
}
|
|
} catch (e) {
|
|
console.warn('Error calculating area:', e);
|
|
return 0;
|
|
}
|
|
return 0;
|
|
}
|
|
|
|
// Deprecated: Calculate polygon area using Shoelace formula
|
|
// Use Turf.js for area calculation instead
|
|
function calculatePolygonArea(coords) {
|
|
// Accepts coordinates, but now returns 0 and logs warning
|
|
console.warn('calculatePolygonArea is deprecated. Use getFeatureArea(feature) with Turf.js instead.');
|
|
return 0;
|
|
}
|
|
|
|
// Convert square meters to hectares and acres
|
|
function convertArea(squareMeters) {
|
|
const hectares = squareMeters / 10000;
|
|
const acres = squareMeters / 4046.856;
|
|
return { hectares, acres };
|
|
}
|
|
|
|
// Get first property key (field code)
|
|
function getFirstPropertyValue(properties) {
|
|
if (!properties) return '';
|
|
const keys = Object.keys(properties);
|
|
if (keys.length === 0) return '';
|
|
return properties[keys[0]];
|
|
}
|
|
|
|
// Create labels layer from features
|
|
function createLabelsLayer(features) {
|
|
labelsLayer = L.featureGroup([]);
|
|
|
|
// First pass: collect all label positions
|
|
const labelPositions = [];
|
|
features.forEach((feature, index) => {
|
|
const props = feature.properties || {};
|
|
const fieldCode = getFirstPropertyValue(props);
|
|
const displayLabel = fieldCode || `Feature ${index + 1}`;
|
|
|
|
if (feature.geometry && feature.geometry.type !== 'Point') {
|
|
// Get centroid for polygon features
|
|
const bounds = L.geoJSON(feature).getBounds();
|
|
const center = bounds.getCenter();
|
|
|
|
labelPositions.push({
|
|
fieldName: displayLabel,
|
|
latlng: center,
|
|
originalLatlng: center,
|
|
iconAnchor: [0, 0],
|
|
isPoint: false
|
|
});
|
|
} else if (feature.geometry && feature.geometry.type === 'Point') {
|
|
// For points, add label above the marker
|
|
const latlng = L.GeoJSON.coordsToLatLng(feature.geometry.coordinates);
|
|
labelPositions.push({
|
|
fieldName: displayLabel,
|
|
latlng: latlng,
|
|
originalLatlng: latlng,
|
|
iconAnchor: [0, 30],
|
|
isPoint: true
|
|
});
|
|
}
|
|
});
|
|
|
|
// Create markers
|
|
labelPositions.forEach((pos) => {
|
|
const label = L.marker(pos.latlng, {
|
|
icon: L.divIcon({
|
|
className: 'field-label',
|
|
html: `<div style="
|
|
background: rgba(102, 126, 234, 0.9);
|
|
color: white;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
|
border: 2px solid white;
|
|
pointer-events: none;
|
|
text-align: center;
|
|
max-width: 200px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
">${pos.fieldName}</div>`,
|
|
iconSize: [null, null],
|
|
iconAnchor: pos.iconAnchor
|
|
}),
|
|
interactive: false
|
|
});
|
|
labelsLayer.addLayer(label);
|
|
});
|
|
}
|
|
|
|
// Update labels visibility based on zoom level
|
|
function updateLabelsVisibility() {
|
|
const zoomLevel = map.getZoom();
|
|
const minZoomForLabels = 16; // Only show labels at zoom level 13 and above
|
|
|
|
if (labelsLayer && showLabels) {
|
|
if (zoomLevel >= minZoomForLabels) {
|
|
labelsLayer.eachLayer(layer => {
|
|
layer.setOpacity(1);
|
|
});
|
|
} else {
|
|
labelsLayer.eachLayer(layer => {
|
|
layer.setOpacity(0);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// Load mills data and render on map
|
|
async function loadAndRenderMills() {
|
|
try {
|
|
// Try to load from Google Sheets first
|
|
let csvText = await fetchGoogleSheetData();
|
|
|
|
// Fallback to local CSV if Google Sheets fails
|
|
if (!csvText) {
|
|
console.log('Falling back to local CSV file...');
|
|
const response = await fetch('../sugar_mill_locator/sugar_cane_factories_africa.csv');
|
|
if (response.ok) {
|
|
csvText = await response.text();
|
|
showMessage('Using local data (Google Sheet unavailable)', 'error');
|
|
}
|
|
} else {
|
|
showMessage('Sugar mills loaded from Google Sheets', 'success');
|
|
}
|
|
|
|
if (csvText) {
|
|
mills = parseMillsCSV(csvText);
|
|
renderMills();
|
|
}
|
|
} catch (error) {
|
|
console.warn('Could not load mills data:', error);
|
|
showMessage('Sugar mills data not available', 'error');
|
|
}
|
|
}
|
|
|
|
// Parse CSV for mills data
|
|
function parseMillsCSV(csvText) {
|
|
const lines = csvText.trim().split('\n');
|
|
const headers = lines[0].split(',').map(h => h.trim());
|
|
|
|
return lines.slice(1).map((line, index) => {
|
|
const values = parseMillsCSVLine(line);
|
|
const row = {};
|
|
headers.forEach((header, idx) => {
|
|
row[header] = values[idx] ? values[idx].trim() : '';
|
|
});
|
|
row._id = index;
|
|
return row;
|
|
}).filter(row => row.Latitude && row.Longitude);
|
|
}
|
|
|
|
// Parse CSV line handling quoted values
|
|
function parseMillsCSVLine(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;
|
|
}
|
|
|
|
// Render mills on map
|
|
function renderMills() {
|
|
// Create or clear mills layer
|
|
if (millsLayer) {
|
|
map.removeLayer(millsLayer);
|
|
}
|
|
millsLayer = L.featureGroup();
|
|
millMarkers = {};
|
|
|
|
mills.forEach(mill => {
|
|
const lat = parseFloat(mill.Latitude);
|
|
const lng = parseFloat(mill.Longitude);
|
|
|
|
if (!isNaN(lat) && !isNaN(lng)) {
|
|
const production = parseFloat(String(mill['Annual Sugar Production (tons)'] || '0').replace(/[, ]/g, '')) || 0;
|
|
const size = getMillCircleSize(production);
|
|
const color = countryColors[mill.Country] || '#999';
|
|
|
|
const marker = L.circleMarker([lat, lng], {
|
|
radius: size,
|
|
fillColor: color,
|
|
color: 'white',
|
|
weight: 2,
|
|
opacity: 0.8,
|
|
fillOpacity: 0.7
|
|
});
|
|
|
|
const popup = createMillPopup(mill);
|
|
marker.bindPopup(popup);
|
|
millsLayer.addLayer(marker);
|
|
millMarkers[mill._id] = marker;
|
|
}
|
|
});
|
|
|
|
millsLayer.addTo(map);
|
|
}
|
|
|
|
// Get circle size based on production
|
|
function getMillCircleSize(production) {
|
|
if (production > 150000) return 15;
|
|
if (production > 50000) return 10;
|
|
return 6;
|
|
}
|
|
|
|
// Create popup content for mills
|
|
function createMillPopup(mill) {
|
|
const production = mill['Annual Sugar Production (tons)'] || 'N/A';
|
|
const capacity = mill['Crushing Capacity (tons/year)'] || 'N/A';
|
|
const year = mill['Data Year'] || '';
|
|
|
|
return `
|
|
<div style="font-size: 13px; width: 280px;">
|
|
<strong style="font-size: 14px; color: #333;">${mill['Mill/Factory']}</strong><br>
|
|
<small style="color: #666;">${mill['Country']} • ${mill['Province/Region']}</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;">Company:</td>
|
|
<td>${mill.Company || 'N/A'}</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="font-weight: 600; color: #333;">Production:</td>
|
|
<td>${formatMillNumber(production)} tons/year</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="font-weight: 600; color: #333;">Capacity:</td>
|
|
<td>${formatMillNumber(capacity)} tons/year</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="font-weight: 600; color: #333;">Coordinates:</td>
|
|
<td>${parseFloat(mill.Latitude).toFixed(4)}, ${parseFloat(mill.Longitude).toFixed(4)}</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="font-weight: 600; color: #333;">Data Year:</td>
|
|
<td>${year}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Format numbers for display
|
|
function formatMillNumber(num) {
|
|
if (!num || num === 'N/A') return 'N/A';
|
|
const n = parseFloat(String(num).replace(/[, ]/g, ''));
|
|
if (isNaN(n)) return 'N/A';
|
|
return n.toLocaleString('en-US', { maximumFractionDigits: 0 });
|
|
}
|
|
|
|
// Handle file upload
|
|
geojsonInput.addEventListener('change', (e) => {
|
|
const file = e.target.files[0];
|
|
if (!file) return;
|
|
|
|
fileNameDisplay.textContent = `📄 ${file.name}`;
|
|
fileNameDisplay.classList.add('active');
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = (event) => {
|
|
try {
|
|
const geojson = JSON.parse(event.target.result);
|
|
const success = loadGeojson(geojson, file.name);
|
|
if (success) {
|
|
showMessage('GeoJSON loaded successfully!', 'success');
|
|
}
|
|
} catch (error) {
|
|
showMessage(`Error parsing file: ${error.message}`, 'error');
|
|
}
|
|
};
|
|
reader.onerror = () => {
|
|
showMessage('Error reading file', 'error');
|
|
};
|
|
reader.readAsText(file);
|
|
});
|
|
|
|
// Validate CRS
|
|
function validateCRS(geojson) {
|
|
// If no CRS is specified, assume WGS84 (default for GeoJSON)
|
|
if (!geojson.crs) {
|
|
return { valid: true, message: 'No CRS specified (default WGS84)' };
|
|
}
|
|
|
|
const crs = geojson.crs;
|
|
let crsName = '';
|
|
|
|
// Extract CRS name from different possible formats
|
|
if (crs.properties && crs.properties.name) {
|
|
crsName = crs.properties.name;
|
|
} else if (typeof crs === 'string') {
|
|
crsName = crs;
|
|
}
|
|
|
|
// Check if it's WGS84 (various possible names)
|
|
const wgs84Variations = [
|
|
'EPSG:4326',
|
|
'epsg:4326',
|
|
'urn:ogc:def:crs:EPSG::4326',
|
|
'urn:ogc:def:crs:EPSG:4.3:4326',
|
|
'WGS84',
|
|
'wgs84',
|
|
'urn:ogc:def:crs:OGC:1.3:CRS84'
|
|
];
|
|
|
|
const isWGS84 = wgs84Variations.some(variant =>
|
|
crsName.toUpperCase().includes(variant.toUpperCase())
|
|
);
|
|
|
|
if (isWGS84) {
|
|
return { valid: true, message: 'CRS: WGS84' };
|
|
} else {
|
|
return {
|
|
valid: false,
|
|
message: `Non-supported CRS (${JSON.stringify(crs)})`
|
|
};
|
|
}
|
|
}
|
|
|
|
// Load and display GeoJSON
|
|
function loadGeojson(geojson, fileName) {
|
|
// Validate CRS first
|
|
const crsValidation = validateCRS(geojson);
|
|
if (!crsValidation.valid) {
|
|
showMessage(crsValidation.message, 'error');
|
|
return false;
|
|
}
|
|
|
|
// Clear previous layer
|
|
if (geojsonLayer) {
|
|
map.removeLayer(geojsonLayer);
|
|
}
|
|
|
|
// Clear previous labels
|
|
if (labelsLayer) {
|
|
map.removeLayer(labelsLayer);
|
|
}
|
|
|
|
currentGeojsonData = geojson;
|
|
featuresList = [];
|
|
|
|
// Handle both FeatureCollection and individual features
|
|
const features = geojson.type === 'FeatureCollection'
|
|
? geojson.features
|
|
: [geojson];
|
|
|
|
if (features.length === 0) {
|
|
showMessage('GeoJSON contains no features', 'error');
|
|
return false;
|
|
}
|
|
|
|
// Inject calculated area directly into feature properties
|
|
features.forEach(feature => {
|
|
if (!feature.properties) feature.properties = {};
|
|
const areaM2 = getFeatureArea(feature);
|
|
|
|
if (areaM2 > 0) {
|
|
const { hectares, acres } = convertArea(areaM2);
|
|
feature.properties['Area (ha)'] = Number(hectares.toFixed(2));
|
|
feature.properties['Area (acres)'] = Number(acres.toFixed(2));
|
|
}
|
|
});
|
|
|
|
// Create layer with popups
|
|
geojsonLayer = L.geoJSON(geojson, {
|
|
onEachFeature: (feature, layer) => {
|
|
const index = featuresList.length;
|
|
featuresList.push({ feature, layer, index });
|
|
|
|
// Add click handler to open modal
|
|
layer.on('click', (e) => {
|
|
L.DomEvent.stopPropagation(e);
|
|
openFeatureModal(feature);
|
|
selectFeature(index);
|
|
});
|
|
|
|
// Hover effect
|
|
layer.on('mouseover', () => {
|
|
if (layer.setStyle) {
|
|
layer.setStyle({
|
|
weight: 3,
|
|
opacity: 1,
|
|
dashArray: ''
|
|
});
|
|
}
|
|
});
|
|
|
|
layer.on('mouseout', () => {
|
|
if (layer.setStyle) {
|
|
geojsonLayer.resetStyle(layer);
|
|
}
|
|
});
|
|
},
|
|
style: {
|
|
color: '#667eea',
|
|
weight: 2,
|
|
opacity: 0.7,
|
|
fillOpacity: 0.5
|
|
},
|
|
pointToLayer: (feature, latlng) => {
|
|
return L.circleMarker(latlng, {
|
|
radius: 8,
|
|
fillColor: '#667eea',
|
|
color: '#fff',
|
|
weight: 2,
|
|
opacity: 1,
|
|
fillOpacity: 0.8
|
|
});
|
|
}
|
|
}).addTo(map);
|
|
|
|
// Create labels layer
|
|
createLabelsLayer(features);
|
|
|
|
// Fit bounds
|
|
const bounds = geojsonLayer.getBounds();
|
|
map.fitBounds(bounds, { padding: [50, 50] });
|
|
|
|
// Update labels visibility based on zoom level
|
|
updateLabelsVisibility();
|
|
map.on('zoom', updateLabelsVisibility);
|
|
|
|
// Update stats
|
|
updateStats(geojson, features);
|
|
|
|
// Display features list
|
|
displayFeaturesList();
|
|
|
|
// Build attribute table
|
|
buildAttributeTable(features);
|
|
|
|
// Calculate and display summary
|
|
updateSummary(geojson, features);
|
|
|
|
// Show/hide elements
|
|
summarySection.style.display = 'block';
|
|
statsSection.style.display = 'block';
|
|
featuresSection.style.display = 'block';
|
|
tableSection.style.display = 'block';
|
|
downloadBtn.style.display = 'block';
|
|
|
|
return true;
|
|
}
|
|
|
|
// Update statistics
|
|
function updateStats(geojson, features) {
|
|
featureCountEl.textContent = features.length;
|
|
|
|
// Get geometry type
|
|
const types = new Set();
|
|
features.forEach(f => {
|
|
if (f.geometry) {
|
|
types.add(f.geometry.type);
|
|
}
|
|
});
|
|
geomTypeEl.textContent = Array.from(types).join(', ') || '-';
|
|
|
|
// Get bounds
|
|
const bounds = geojsonLayer.getBounds();
|
|
const sw = bounds.getSouthWest();
|
|
const ne = bounds.getNorthEast();
|
|
boundsEl.textContent = `[${sw.lat.toFixed(2)}, ${sw.lng.toFixed(2)}] - [${ne.lat.toFixed(2)}, ${ne.lng.toFixed(2)}]`;
|
|
}
|
|
|
|
// Display features list
|
|
function displayFeaturesList() {
|
|
featureLst.innerHTML = '';
|
|
featureSearch.value = '';
|
|
|
|
featuresList.forEach((item, index) => {
|
|
const div = document.createElement('div');
|
|
div.className = 'feature-item';
|
|
|
|
// Get first property value (field code)
|
|
const props = item.feature.properties || {};
|
|
const fieldCode = getFirstPropertyValue(props);
|
|
const name = fieldCode || `Feature ${index + 1}`;
|
|
|
|
div.textContent = name;
|
|
div.dataset.index = index;
|
|
|
|
div.addEventListener('click', () => selectFeature(index));
|
|
featureLst.appendChild(div);
|
|
});
|
|
}
|
|
|
|
// Select feature
|
|
function selectFeature(index) {
|
|
const item = featuresList[index];
|
|
if (!item) {
|
|
console.error('Feature not found at index:', index);
|
|
return;
|
|
}
|
|
|
|
// Update feature list UI
|
|
document.querySelectorAll('.feature-item').forEach((el, i) => {
|
|
el.classList.toggle('active', i === index);
|
|
});
|
|
|
|
// Display properties in sidebar
|
|
displayProperties(item.feature);
|
|
|
|
// Open modal with properties
|
|
openFeatureModal(item.feature);
|
|
|
|
// Zoom to feature on map
|
|
setTimeout(() => {
|
|
try {
|
|
if (item.feature.geometry.type === 'Point') {
|
|
const latlng = item.layer.getLatLng();
|
|
map.setView(latlng, 14);
|
|
} else {
|
|
const bounds = L.geoJSON(item.feature).getBounds();
|
|
map.fitBounds(bounds, { padding: [100, 100] });
|
|
}
|
|
} catch (e) {
|
|
console.error('Error zooming to feature:', e);
|
|
}
|
|
}, 100);
|
|
|
|
// Update map styling
|
|
if (item.layer.setStyle) {
|
|
item.layer.setStyle({
|
|
weight: 3,
|
|
opacity: 1
|
|
});
|
|
}
|
|
}
|
|
|
|
// Display properties
|
|
function displayProperties(feature) {
|
|
propertiesSection.classList.add('active');
|
|
propertiesContent.innerHTML = '';
|
|
|
|
const props = feature.properties || {};
|
|
if (Object.keys(props).length === 0) {
|
|
propertiesContent.innerHTML = '<div class="no-data">No properties</div>';
|
|
return;
|
|
}
|
|
|
|
Object.entries(props).forEach(([key, value]) => {
|
|
const row = document.createElement('div');
|
|
row.className = 'property-row';
|
|
|
|
const keyEl = document.createElement('div');
|
|
keyEl.className = 'property-key';
|
|
keyEl.textContent = key;
|
|
|
|
const valueEl = document.createElement('div');
|
|
valueEl.className = 'property-value';
|
|
valueEl.textContent = typeof value === 'object'
|
|
? JSON.stringify(value, null, 2)
|
|
: value;
|
|
|
|
row.appendChild(keyEl);
|
|
row.appendChild(valueEl);
|
|
propertiesContent.appendChild(row);
|
|
});
|
|
}
|
|
|
|
// Build attribute table
|
|
function buildAttributeTable(features) {
|
|
const tableHeader = document.getElementById('tableHeader');
|
|
const tableBody = document.getElementById('tableBody');
|
|
|
|
tableHeader.innerHTML = '';
|
|
tableBody.innerHTML = '';
|
|
|
|
if (features.length === 0) return;
|
|
|
|
const allKeys = new Set();
|
|
features.forEach(f => {
|
|
if (f.properties) {
|
|
Object.keys(f.properties).forEach(key => allKeys.add(key));
|
|
}
|
|
});
|
|
|
|
const headerKeys = Array.from(allKeys);
|
|
headerKeys.forEach(key => {
|
|
const th = document.createElement('th');
|
|
th.textContent = key;
|
|
tableHeader.appendChild(th);
|
|
});
|
|
|
|
features.forEach((feature, idx) => {
|
|
const row = document.createElement('tr');
|
|
row.style.cursor = 'pointer';
|
|
row.addEventListener('click', () => selectFeature(idx));
|
|
row.addEventListener('mouseover', () => row.style.backgroundColor = '#f0f0f0');
|
|
row.addEventListener('mouseout', () => row.style.backgroundColor = '');
|
|
|
|
const props = feature.properties || {};
|
|
|
|
headerKeys.forEach(key => {
|
|
const td = document.createElement('td');
|
|
td.textContent = props[key] !== undefined ? props[key] : '-';
|
|
row.appendChild(td);
|
|
});
|
|
|
|
tableBody.appendChild(row);
|
|
});
|
|
}
|
|
|
|
// Update summary section
|
|
function updateSummary(geojson, features) {
|
|
// Try to get client name from GeoJSON properties or filename
|
|
let clientName = 'Unknown Project';
|
|
if (geojson.name) {
|
|
clientName = geojson.name;
|
|
} else if (geojson.properties && geojson.properties.name) {
|
|
clientName = geojson.properties.name;
|
|
}
|
|
|
|
// Calculate totals
|
|
let totalHa = 0;
|
|
let totalAc = 0;
|
|
|
|
features.forEach(feature => {
|
|
const areaM2 = getFeatureArea(feature);
|
|
const { hectares, acres } = convertArea(areaM2);
|
|
totalHa += hectares;
|
|
totalAc += acres;
|
|
});
|
|
|
|
// Update UI
|
|
clientNameEl.textContent = clientName;
|
|
totalFieldsEl.textContent = features.length;
|
|
totalHectaresEl.textContent = totalHa.toFixed(2);
|
|
totalAcresEl.textContent = totalAc.toFixed(2);
|
|
}
|
|
|
|
// Open feature modal
|
|
function openFeatureModal(feature) {
|
|
const props = feature.properties || {};
|
|
const featureName = props.name || props.id || 'Feature Details';
|
|
|
|
modalTitle.textContent = featureName;
|
|
modalBody.innerHTML = '';
|
|
|
|
if (Object.keys(props).length === 0) {
|
|
modalBody.innerHTML = '<div class="modal-empty">No properties available</div>';
|
|
featureModal.classList.add('active');
|
|
return;
|
|
}
|
|
|
|
Object.entries(props).forEach(([key, value]) => {
|
|
const propDiv = document.createElement('div');
|
|
propDiv.className = 'modal-property';
|
|
|
|
const keyEl = document.createElement('div');
|
|
keyEl.className = 'modal-property-key';
|
|
keyEl.textContent = key;
|
|
|
|
const valueEl = document.createElement('div');
|
|
valueEl.className = 'modal-property-value';
|
|
valueEl.textContent = typeof value === 'object'
|
|
? JSON.stringify(value, null, 2)
|
|
: value;
|
|
|
|
propDiv.appendChild(keyEl);
|
|
propDiv.appendChild(valueEl);
|
|
modalBody.appendChild(propDiv);
|
|
});
|
|
|
|
featureModal.classList.add('active');
|
|
}
|
|
|
|
// Close feature modal
|
|
function closeFeatureModal() {
|
|
featureModal.classList.remove('active');
|
|
}
|
|
|
|
// Close modal when clicking outside
|
|
featureModal.addEventListener('click', (e) => {
|
|
if (e.target === featureModal) {
|
|
closeFeatureModal();
|
|
}
|
|
});
|
|
|
|
// Close modal with Escape key
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') {
|
|
closeFeatureModal();
|
|
}
|
|
});
|
|
|
|
// Clear all
|
|
clearBtn.addEventListener('click', () => {
|
|
if (confirm('Are you sure you want to clear all data?')) {
|
|
if (geojsonLayer) {
|
|
map.removeLayer(geojsonLayer);
|
|
geojsonLayer = null;
|
|
}
|
|
if (labelsLayer) {
|
|
map.removeLayer(labelsLayer);
|
|
labelsLayer = null;
|
|
}
|
|
currentGeojsonData = null;
|
|
featuresList = [];
|
|
geojsonInput.value = '';
|
|
fileNameDisplay.textContent = '';
|
|
fileNameDisplay.classList.remove('active');
|
|
summarySection.style.display = 'none';
|
|
statsSection.style.display = 'none';
|
|
tableSection.style.display = 'none';
|
|
featuresSection.style.display = 'none';
|
|
downloadBtn.style.display = 'none';
|
|
propertiesSection.classList.remove('active');
|
|
propertiesContent.innerHTML = '<div class="no-data">Select a feature to view properties</div>';
|
|
map.setView([0, 0], 2);
|
|
}
|
|
});
|
|
|
|
// Download
|
|
downloadBtn.addEventListener('click', () => {
|
|
if (!currentGeojsonData) return;
|
|
|
|
const dataStr = JSON.stringify(currentGeojsonData, null, 2);
|
|
const dataBlob = new Blob([dataStr], { type: 'application/json' });
|
|
const url = URL.createObjectURL(dataBlob);
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = 'geojson-export.geojson';
|
|
link.click();
|
|
URL.revokeObjectURL(url);
|
|
showMessage('GeoJSON downloaded!', 'success');
|
|
});
|
|
|
|
// Search features
|
|
featureSearch.addEventListener('input', (e) => {
|
|
const searchTerm = e.target.value.toLowerCase();
|
|
const items = document.querySelectorAll('.feature-item');
|
|
|
|
items.forEach(item => {
|
|
const text = item.textContent.toLowerCase();
|
|
if (text.includes(searchTerm)) {
|
|
item.style.display = '';
|
|
} else {
|
|
item.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
|
|
// Initialize Google Sheets integration
|
|
initGoogleSheetsAutoRefresh();
|
|
showGoogleSheetsSetup();
|