diff --git a/app.js b/app.js index bcef331..963811d 100644 --- a/app.js +++ b/app.js @@ -56,11 +56,13 @@ document.addEventListener('DOMContentLoaded', async () => { state.map = L.map('map', { center: [51.5, 7.5], // Center NRW roughly zoom: 13, - zoomControl: false + zoomControl: false, + preferCanvas: true }); // Add Zoom Control to the right - L.control.zoom({ position: 'topright' }).addTo(state.map); + L.control.zoom({ position: 'bottomright' }).addTo(state.map); + L.control.scale({ imperial: false, position: 'bottomleft' }).addTo(state.map); const updateZoomClass = () => { const zoom = state.map.getZoom(); @@ -2939,3 +2941,97 @@ async function resolveLayerConfig(isLocalFile, statusEl) { } return layers; } + + // --- PDF Export Logic --- + const btnExportPDF = document.getElementById('btnExportPDF'); + if (btnExportPDF) { + btnExportPDF.addEventListener('click', async () => { + const originalText = btnExportPDF.innerText; + btnExportPDF.innerText = 'Exportiere...'; + btnExportPDF.disabled = true; + + try { + if (typeof html2canvas === 'undefined' || typeof jspdf === 'undefined') { + throw new Error('PDF Bibliotheken (html2canvas, jspdf) sind noch nicht geladen.'); + } + + const mapContainer = document.getElementById('map'); + + // Add Overlay + const exportOverlay = document.createElement('div'); + exportOverlay.style.position = 'absolute'; + exportOverlay.style.bottom = '30px'; + exportOverlay.style.left = '30px'; + exportOverlay.style.zIndex = '9999'; + exportOverlay.style.background = 'rgba(255, 255, 255, 0.95)'; + exportOverlay.style.padding = '15px'; + exportOverlay.style.border = '2px solid #333'; + exportOverlay.style.borderRadius = '5px'; + exportOverlay.style.color = '#333'; + exportOverlay.style.fontFamily = 'Arial, sans-serif'; + exportOverlay.style.boxShadow = '0 0 10px rgba(0,0,0,0.3)'; + + const projName = document.getElementById('projectSelector')?.options[document.getElementById('projectSelector')?.selectedIndex]?.text || 'Unbekannt'; + + exportOverlay.innerHTML = ` +
ENWELO Standortplanung
+
Projekt: ${projName}
+
+
Rotorüberstreichfläche
+
Gebietsumring
+
Abstandslinien
+
WEA Standort
+
+ `; + mapContainer.appendChild(exportOverlay); + + // Wait a tiny bit for DOM to render overlay + await new Promise(r => setTimeout(r, 100)); + + const canvas = await html2canvas(mapContainer, { + useCORS: true, + allowTaint: true, + ignoreElements: (element) => { + return element.classList.contains('leaflet-control-zoom'); + } + }); + + mapContainer.removeChild(exportOverlay); + + const imgData = canvas.toDataURL('image/png'); + const pdf = new jspdf.jsPDF({ + orientation: 'landscape', + unit: 'mm', + format: 'a3' + }); + + const pdfWidth = pdf.internal.pageSize.getWidth(); + const pdfHeight = pdf.internal.pageSize.getHeight(); + + const imgProps = pdf.getImageProperties(imgData); + const ratio = imgProps.width / imgProps.height; + + let renderWidth = pdfWidth; + let renderHeight = pdfWidth / ratio; + + if (renderHeight > pdfHeight) { + renderHeight = pdfHeight; + renderWidth = pdfHeight * ratio; + } + + // Center image in PDF + const xOffset = (pdfWidth - renderWidth) / 2; + const yOffset = (pdfHeight - renderHeight) / 2; + + pdf.addImage(imgData, 'PNG', xOffset, yOffset, renderWidth, renderHeight); + pdf.save('Karte_Enwelo.pdf'); + + } catch (err) { + console.error('Fehler beim PDF Export:', err); + alert('Fehler beim PDF Export: ' + err.message); + } finally { + btnExportPDF.innerText = originalText; + btnExportPDF.disabled = false; + } + }); + } diff --git a/index.html b/index.html index 3c181e7..bdf7e09 100644 --- a/index.html +++ b/index.html @@ -62,7 +62,16 @@
- 🌀 WEA Konfiguration + + + + + + + + + + + WEA Konfiguration +
@@ -129,6 +138,8 @@ style="flex: 0.4; padding: 6px; margin-top: 0;">📏 +
@@ -288,6 +299,8 @@ + +