${markerInfo.description}

`) .addTo(this.map); this.currentLayers.push(marker); }); } }); infoPanel.innerHTML = journeyHtml; // Adjust map view if (explorer.mapFocus) { this.map.setView(explorer.mapFocus.center, explorer.mapFocus.zoom); } else if (explorer.journeys[0] && explorer.journeys[0].routePoints && explorer.journeys[0].routePoints.length > 0) { this.map.fitBounds(explorer.journeys[0].routePoints); // Fit to first journey's route } }, async downloadJourneyPDF() { const pdfButton = document.getElementById('fejm-pdf-button'); pdfButton.textContent = "Generating PDF..."; pdfButton.disabled = true; const explorerId = document.getElementById('fejm-explorer-select').value; if (!explorerId) { alert("Please select an explorer first."); pdfButton.textContent = "Download Journey Map (PDF)"; pdfButton.disabled = false; return; } const explorer = this.explorersData.find(e => e.id === explorerId); const { jsPDF } = window.jspdf; const doc = new jsPDF('p', 'pt', 'a4'); // Portrait, points, A4 const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--fejm-primary-color').trim(); const textColor = '#333333'; // Standard dark text for PDF // Add Title doc.setFontSize(18); doc.setTextColor(primaryColor); doc.text(explorer.name + " - Journey Map", 40, 50); doc.setFontSize(12); doc.setTextColor(textColor); doc.text(`Era: ${explorer.era}`, 40, 70); let currentY = 90; // Add Bio const bioLines = doc.splitTextToSize(`Bio: ${explorer.bio}`, doc.internal.pageSize.getWidth() - 80); doc.text(bioLines, 40, currentY); currentY += bioLines.length * 15 + 10; // Estimate line height // Add Journey Details explorer.journeys.forEach(journey => { if (currentY > doc.internal.pageSize.getHeight() - 60) { doc.addPage(); currentY = 40; } doc.setFontSize(14); doc.setTextColor(primaryColor); doc.text(`Journey: ${journey.name}`, 40, currentY); currentY += 20; doc.setFontSize(10); doc.setTextColor(textColor); const descLines = doc.splitTextToSize(journey.description, doc.internal.pageSize.getWidth() - 80); doc.text(descLines, 40, currentY); currentY += descLines.length * 12 + 10; if (journey.markers && journey.markers.length > 0) { if (currentY > doc.internal.pageSize.getHeight() - (journey.markers.length * 15)) { doc.addPage(); currentY = 40; } doc.setFontSize(10); doc.text("Key Locations:", 40, currentY); currentY += 15; journey.markers.forEach(m => { if (currentY > doc.internal.pageSize.getHeight() - 30) { doc.addPage(); currentY = 40; } doc.text(`- ${m.title}: ${m.description}`, 50, currentY); currentY += 12; }); currentY += 10; } }); // Add Map Screenshot // Ensure map is fully rendered before capturing // A small timeout can sometimes help ensure all tiles are loaded if they were just panned/zoomed // For production, one might need more robust ways to check map ready state. await new Promise(resolve => setTimeout(resolve, 500)); try { const mapElement = document.getElementById('fejm-map'); const canvas = await html2canvas(mapElement, { useCORS: true, // For OpenStreetMap tiles logging: false, // Suppress console logs from html2canvas onclone: (clonedDoc) => { // Attempt to remove Leaflet controls that might not render well or are not needed in screenshot const controls = clonedDoc.querySelectorAll('.leaflet-control-container'); controls.forEach(c => c.style.display = 'none'); } }); const imgData = canvas.toDataURL('image/png'); const imgWidth = doc.internal.pageSize.getWidth() - 80; const imgHeight = canvas.height * imgWidth / canvas.width; if (currentY + imgHeight > doc.internal.pageSize.getHeight() - 40) { doc.addPage(); currentY = 40; } doc.setFontSize(14); doc.setTextColor(primaryColor); doc.text("Journey Map View:", 40, currentY); currentY += 20; doc.addImage(imgData, 'PNG', 40, currentY, imgWidth, imgHeight); } catch (error) { console.error("Error generating map image for PDF:", error); if (currentY > doc.internal.pageSize.getHeight() - 40) { doc.addPage(); currentY = 40; } doc.text("Could not generate map image.", 40, currentY); } // Add generated date footer const pageCount = doc.internal.getNumberOfPages(); for (let i = 1; i <= pageCount; i++) { doc.setPage(i); doc.setFontSize(8); doc.setTextColor(100); // Gray doc.text(`Page ${i} of ${pageCount}`, doc.internal.pageSize.width - 70, doc.internal.pageSize.height - 20); } doc.save(`${explorer.name.replace(/\s+/g, '_')}_Journey.pdf`); pdfButton.textContent = "Download Journey Map (PDF)"; pdfButton.disabled = false; } }; document.addEventListener('DOMContentLoaded', () => { explorerMapTool.init(); });