`;
circle.bindPopup(popupContent);
}
});
}
/**
* Main function to trigger data processing and visualization updates.
*/
window.updateDataAndVisualize = function() {
const parsed = parseCSV(dataInputEl.value);
if (parsed.data.length === 0 || !parsed.headers.includes('Latitude') || !parsed.headers.includes('Longitude')) {
alert('No data to plot or missing Latitude/Longitude columns. Please check your data.');
return;
}
currentData = parsed.data;
headers = parsed.headers;
populateValueSelector();
updateMapBubbles();
// Switch to dashboard tab to show results
changeTab('dashboard');
}
/**
* Handles switching between tabs.
*/
window.changeTab = function(tabName) {
activeTab = tabName;
Object.keys(tabButtons).forEach(key => {
const isCurrent = key === tabName;
tabButtons[key].classList.toggle('active', isCurrent);
tabContents[key].style.display = isCurrent ? 'block' : 'none';
});
updateNavButtons();
// Invalidate map size when switching to dashboard to ensure it renders correctly
if (tabName === 'dashboard' && map) {
setTimeout(() => map.invalidateSize(), 10);
}
}
/**
* Updates the visibility and state of Previous/Next buttons.
*/
function updateNavButtons() {
navButtons.prev.style.visibility = (activeTab === 'dashboard') ? 'hidden' : 'visible';
navButtons.next.style.visibility = (activeTab === 'dataConfig') ? 'hidden' : 'visible';
}
/**
* Handles navigation using the Previous/Next buttons.
*/
window.navigateTabs = function(direction) {
if (direction === 'next' && activeTab === 'dashboard') {
changeTab('dataConfig');
} else if (direction === 'prev' && activeTab === 'dataConfig') {
changeTab('dashboard');
}
}
/**
* Generates and downloads a PDF of the dashboard content.
*/
window.downloadPDF = function() {
const { jsPDF } = window.jspdf;
const dashboardContent = document.getElementById('dashboard-content');
const downloadBtn = document.getElementById('download-pdf-btn');
if (!dashboardContent) {
console.error('Dashboard content element not found!');
return;
}
downloadBtn.style.visibility = 'hidden';
html2canvas(dashboardContent, {
scale: 2,
useCORS: true, // Important for fetching map tiles
allowTaint: true,
backgroundColor: '#ffffff'
}).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({
orientation: 'landscape',
unit: 'px',
format: [canvas.width, canvas.height]
});
pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);
pdf.save('map_bubble_chart.pdf');
downloadBtn.style.visibility = 'visible';
}).catch(err => {
console.error("PDF generation failed:", err);
downloadBtn.style.visibility = 'visible';
});
}
// --- EVENT LISTENERS ---
valueColumnEl.addEventListener('change', updateMapBubbles);
// --- INITIALIZATION ---
function initializeTool() {
initializeMap();
dataInputEl.value = sampleData;
updateDataAndVisualize();
changeTab('dashboard');
}
initializeTool();
});
