gitea-enwelo-jba
/
Standortplaner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add logo, date, north arrow and style scale bar for PDF export
Deploy Standortplaner / deploy (push) Successful in 17s Details

This commit is contained in:
Johannes Baumeister 2026-07-03 21:27:41 +02:00
parent cc1a6545a3
commit 67cecf839d
1 changed files with 42 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
app.js
View File

@ -2972,14 +2972,18 @@ async function resolveLayerConfig(isLocalFile, statusEl) {
exportOverlay.style.boxShadow = '0 0 10px rgba(0,0,0,0.3)';
const projName = document.getElementById('projectSelector')?.options[document.getElementById('projectSelector')?.selectedIndex]?.text || '';
const projHtml = projName ? `<div style="font-size: 1rem; margin-bottom: 12px; font-weight: bold;">Projekt: ${projName}</div>` : `<div style="margin-bottom: 12px;"></div>`;
const projHtml = projName ? `<div style="font-size: 1rem; margin-bottom: 4px; font-weight: bold;">Projekt: ${projName}</div>` : `<div style="margin-bottom: 4px;"></div>`;
const dateHtml = `<div style="font-size: 0.9rem; margin-bottom: 12px; color: #555;">Erstellt am: ${new Date().toLocaleDateString('de-DE')}</div>`;
const showAux = document.getElementById('checkShowAux')?.checked;
const showProx = document.getElementById('checkShowProximity')?.checked;
exportOverlay.innerHTML = `
<div style="font-weight: bold; font-size: 1.4rem; margin-bottom: 8px; color: #004a99;">ENWELO Standortplanung</div>
<div style="margin-bottom: 10px;">
<img src="Logos/20201202-ENWELO-Logo-4c_ohne_Claim.png" style="height: 45px; max-width: 100%; object-fit: contain;">
</div>
${projHtml}
${dateHtml}
<div style="display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem;">
<div style="display: flex; align-items: center; gap: 8px;"><div style="width: 16px; height: 16px; background: #00c8ff; border: 1px dashed #00c8ff; opacity: 0.5;"></div> Rotorüberstreichfläche</div>
${showAux ? `<div style="display: flex; align-items: center; gap: 8px;"><div style="width: 16px; height: 16px; background: #00aaff; border: 1px dashed #00aaff; opacity: 0.5;"></div> Gebietsumring</div>` : ''}
@ -2989,19 +2993,41 @@ async function resolveLayerConfig(isLocalFile, statusEl) {
`;
mapContainer.appendChild(exportOverlay);
// Temporarily increase scale bar size
const scaleControl = document.querySelector('.leaflet-control-scale-line');
let oldScaleStyle = '';
if (scaleControl) {
oldScaleStyle = scaleControl.style.cssText;
scaleControl.style.transform = 'scale(1.5)';
scaleControl.style.transformOrigin = 'bottom left';
scaleControl.style.borderWidth = '2px';
scaleControl.style.fontSize = '14px';
// Add North Arrow
const northArrow = document.createElement('div');
northArrow.style.position = 'absolute';
northArrow.style.top = '30px';
northArrow.style.right = '30px';
northArrow.style.zIndex = '9999';
northArrow.innerHTML = `
<svg width="40" height="60" viewBox="0 0 40 60" fill="none" xmlns="http://www.w3.org/2000/svg" style="filter: drop-shadow(0px 0px 3px rgba(255,255,255,0.8));">
<path d="M20 0L40 40H20V0Z" fill="#333"/>
<path d="M20 0L0 40H20V0Z" fill="#999"/>
<text x="20" y="55" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#333" text-anchor="middle">N</text>
</svg>
`;
mapContainer.appendChild(northArrow);
// Style the scale bar professionally
const scaleStyle = document.createElement('style');
scaleStyle.innerHTML = `
.leaflet-control-scale-line {
border: 2px solid #333 !important;
border-top: none !important;
background: rgba(255, 255, 255, 0.9) !important;
color: #111 !important;
font-weight: bold !important;
font-size: 14px !important;
padding: 4px 8px !important;
box-shadow: 0 0 10px rgba(0,0,0,0.4) !important;
transform: scale(1.5) !important;
transform-origin: bottom left !important;
}
`;
document.head.appendChild(scaleStyle);
// Wait a tiny bit for DOM to render overlay
await new Promise(r => setTimeout(r, 100));
await new Promise(r => setTimeout(r, 200));
const canvas = await html2canvas(mapContainer, {
useCORS: true,
@ -3012,11 +3038,10 @@ async function resolveLayerConfig(isLocalFile, statusEl) {
}
});
// Restore scale bar
if (scaleControl) {
scaleControl.style.cssText = oldScaleStyle;
}
// Cleanup
document.head.removeChild(scaleStyle);
mapContainer.removeChild(exportOverlay);
mapContainer.removeChild(northArrow);
const imgData = canvas.toDataURL('image/jpeg', 0.9);
const pdf = new jspdf.jsPDF({