Colonialism Imperialism Data Mapper
Colonial Landscape Timeline
1914
Legend:
Click on a country for details.
View by Colonizing Power
Select a colonizing power to see its territories.
View by Colonized Region/Country
Select a region to see its colonial history.
No specific colonial history found in this dataset for this region.
"; } infoPanel.innerHTML = infoHTML; if (geoJsonData) { geoJsonLayer = L.geoJson(geoJsonData, { style: feature => ({ fillColor: feature.properties.ISO_A3 === selectedISO ? getComputedStyle(document.documentElement).getPropertyValue('--map-highlight-color').trim() : getComputedStyle(document.documentElement).getPropertyValue('--map-default-color').trim(), weight: feature.properties.ISO_A3 === selectedISO ? 2 : 1, color: '#333', fillOpacity: 0.7 }), onEachFeature: (feature, layer) => { layer.bindPopup(`${feature.properties.ADMIN || feature.properties.NAME}`); } }).addTo(mapInstance); // Fly to selected country const selectedFeature = geoJsonData.features.find(f => f.properties.ISO_A3 === selectedISO); if (selectedFeature) { const bounds = L.geoJson(selectedFeature).getBounds(); if (bounds.isValid()) mapInstance.flyToBounds(bounds, {padding: [50,50]}); } } }); // --- PDF Download --- downloadPdfBtn.addEventListener('click', async () => { const activeTabId = document.querySelector('.cidm-tab-button.active').dataset.tab; const { jsPDF } = window.jspdf; const doc = new jsPDF('p', 'pt', 'a4'); // Using points for better control with autoTable const timestamp = new Date().toLocaleString(); let mapToCapture; let dataForPdf = []; let title = "Colonialism & Imperialism Report"; doc.setFontSize(18); doc.text(title, doc.internal.pageSize.getWidth() / 2, 30, { align: 'center' }); doc.setFontSize(10); doc.text(`Generated: ${timestamp}`, doc.internal.pageSize.getWidth() / 2, 45, { align: 'center' }); let yPos = 60; if (activeTabId === 'timelineView') { const year = document.getElementById('year-slider').value; doc.setFontSize(14); doc.text(`Timeline View - Year: ${year}`, 14, yPos); yPos += 20; mapToCapture = maps.timelineView.getContainer(); const activeRelations = colonialHistoryData.filter(entry => year >= entry.startYear && year < entry.endYear) .map(e => [e.territoryName, e.colonizerName, `${e.startYear}-${e.endYear}`]); if(activeRelations.length > 0){ doc.autoTable({ startY: yPos, head: [['Territory', 'Colonizing Power', 'Period (in selected year)']], body: activeRelations, theme: 'grid', headStyles: { fillColor: [74, 74, 74] }, // --primary-bg styles: { fontSize: 8 } }); yPos = doc.lastAutoTable.finalY + 15; } else { doc.text("No active colonial relationships in this year based on the dataset.", 14, yPos); yPos += 15; } } else if (activeTabId === 'byColonizer') { const colonizer = colonizerSelect.value; if (!colonizer) { alert("Please select a colonizing power first."); return; } doc.setFontSize(14); doc.text(`Report for Colonizing Power: ${empires[colonizer] ? empires[colonizer].name : colonizer}`, 14, yPos); yPos += 20; mapToCapture = maps.byColonizer.getContainer(); const territories = colonialHistoryData.filter(item => item.colonizerName === colonizer) .map(t => [t.territoryName, `${t.startYear} - ${t.endYear}`]); if(territories.length > 0){ doc.autoTable({ startY: yPos, head: [['Territory', 'Colonial Period']], body: territories, theme: 'grid', headStyles: { fillColor: [74, 74, 74] }, styles: { fontSize: 8 } }); yPos = doc.lastAutoTable.finalY + 15; } else { doc.text("No territories found for this colonizer in the dataset.", 14, yPos); yPos += 15; } } else if (activeTabId === 'byRegion') { const regionISO = regionSelect.value; if (!regionISO) { alert("Please select a region first."); return; } const regionName = regionSelect.options[regionSelect.selectedIndex].text; doc.setFontSize(14); doc.text(`Colonial History for: ${regionName}`, 14, yPos); yPos += 20; mapToCapture = maps.byRegion.getContainer(); const history = colonialHistoryData.filter(item => (Array.isArray(item.territoryISO_A3) && item.territoryISO_A3.includes(regionISO)) || item.territoryISO_A3 === regionISO) .map(h => [h.colonizerName, `${h.startYear} - ${h.endYear}`]); if(history.length > 0){ doc.autoTable({ startY: yPos, head: [['Colonizing Power', 'Colonial Period']], body: history, theme: 'grid', headStyles: { fillColor: [74, 74, 74] }, styles: { fontSize: 8 } }); yPos = doc.lastAutoTable.finalY + 15; } else { doc.text("No colonial history found for this region in the dataset.", 14, yPos); yPos += 15; } } // Add map image if (mapToCapture) { const zoomControls = mapToCapture.querySelector('.leaflet-control-container'); if (zoomControls) zoomControls.style.display = 'none'; try { await new Promise(resolve => setTimeout(resolve, 500)); // wait for tiles const canvas = await html2canvas(mapToCapture, { useCORS: true, logging: false, scale: 1 }); const imgData = canvas.toDataURL('image/png'); if (zoomControls) zoomControls.style.display = ''; const imgProps = doc.getImageProperties(imgData); const pdfWidth = doc.internal.pageSize.getWidth(); const imgWidth = pdfWidth * 0.9; // 90% of page width const imgHeight = (imgProps.height * imgWidth) / imgProps.width; if (yPos + imgHeight + 20 > doc.internal.pageSize.getHeight()) { doc.addPage(); yPos = 30; } doc.addImage(imgData, 'PNG', (pdfWidth - imgWidth) / 2, yPos, imgWidth, imgHeight); } catch (e) { console.error("Error capturing map for PDF:", e); if (zoomControls) zoomControls.style.display = ''; doc.text("Map image could not be captured.", 14, yPos + 10); } } doc.save(`Colonialism_Report_${activeTabId}_${new Date().toISOString().slice(0,10)}.pdf`); }); // Initialize updateNavButtons(); initMap('cidm-map-timeline', 'timelineView'); // Init map for default tab // Initial population for other tabs, but their maps will init on tab switch populateColonizerSelect(); // populateRegionSelect needs geoJsonData, will be called on tab switch or after fetch fetchGeoJsonData().then(() => { populateRegionSelect(); if (document.querySelector('.cidm-tab-button.active').dataset.tab === 'timelineView') { updateTimelineMap(maps.timelineView, parseInt(document.getElementById('year-slider').value)); } }); });