${point.info.replace(/\n/g, "
")}

`; downloadPdfBtn.disabled = false; downloadPdfBtn.textContent = `Download Info for ${point.name.substring(0,15)}... (PDF)`; // Highlight active pin document.querySelectorAll('.map-pin').forEach(pin => pin.classList.remove('active')); const activePin = document.querySelector(`.map-pin[data-id="${point.id}"]`); if (activePin) activePin.classList.add('active'); // Update selector locationSelector.value = point.id; } else { resetInfoPanel(); } } function resetInfoPanel() { currentSelectedPoint = null; infoNameEl.textContent = ""; infoPanelContentEl.innerHTML = '

Select a point of interest on the map or from the list above to learn more.

'; downloadPdfBtn.disabled = true; downloadPdfBtn.textContent = "Download Info (PDF)"; document.querySelectorAll('.map-pin').forEach(pin => pin.classList.remove('active')); locationSelector.value = ""; } function createMapPins() { mapPinsContainer.innerHTML = ''; // Clear existing pins romanEmpirePoints.forEach(point => { // Create Pin const pin = document.createElement('div'); pin.className = 'map-pin'; pin.style.top = point.coords.top; pin.style.left = point.coords.left; pin.dataset.id = point.id; pin.onclick = () => displayPointInfo(point.id); // Create Tooltip for pin const tooltip = document.createElement('span'); tooltip.className = 'pin-tooltip'; tooltip.textContent = point.name; pin.appendChild(tooltip); mapPinsContainer.appendChild(pin); // Populate Selector const option = document.createElement('option'); option.value = point.id; option.textContent = point.name; locationSelector.appendChild(option); }); } locationSelector.addEventListener('change', (event) => { if (event.target.value) { displayPointInfo(event.target.value); } else { resetInfoPanel(); } }); downloadPdfBtn.addEventListener('click', () => { if (!currentSelectedPoint) return; const { jsPDF } = window.jspdf; const doc = new jsPDF(); const title = `Roman Empire - ${currentSelectedPoint.name}`; const primaryColor = '#7B241C'; const textColor = '#3A3B3C'; doc.setFontSize(18); doc.setTextColor(primaryColor); doc.text(title, doc.internal.pageSize.getWidth() / 2, 20, { align: 'center' }); doc.setFontSize(14); doc.setTextColor(textColor); doc.text(`Location: ${currentSelectedPoint.name}`, 15, 40); doc.setFontSize(11); // Split text for better layout in PDF const infoText = doc.splitTextToSize(currentSelectedPoint.info, doc.internal.pageSize.getWidth() - 30); // 15 margin each side doc.text(infoText, 15, 50); const date = new Date().toLocaleDateString(); doc.setFontSize(9); doc.setTextColor(100); // Grey doc.text(`Generated: ${date}`, 15, doc.internal.pageSize.getHeight() - 10); doc.save(`Roman_Empire_${currentSelectedPoint.id}_Info.pdf`); }); // Initial setup // Wait for map image to load to get its dimensions for more accurate initial pin placement if needed, // though percentages should work fairly well. If the image aspect ratio is vastly different, // percentage might need fine-tuning or a wrapper div with fixed aspect ratio for the image. mapImage.onload = () => { createMapPins(); // Create pins after image is loaded }; // If image is already cached/loaded quickly if (mapImage.complete && mapImage.naturalHeight !== 0) { createMapPins(); } resetInfoPanel(); // Set initial state for info panel and PDF button