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

Fix clipped variant label rendering and set map focus to owners layer on load
Deploy TrassenPlaner / deploy (push) Waiting to run Details

This commit is contained in:
Johannes Baumeister 2026-04-20 12:02:58 +02:00
parent a144f51fc3
commit c1004108d0
1 changed files with 21 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
index.html
View File

@ -1807,30 +1807,8 @@
layer.setStyle({ opacity: 0.3, weight: 4, color: '#cca300' }); layer.setStyle({ opacity: 0.3, weight: 4, color: '#cca300' });
} }
// Labels aktualisieren (Name in der Mitte der Linie auf weißem Hintergrund) // Labels aktualisieren
labelLayer.clearLayers(); updateRouteLabels(v);
const latLngs = (v.routes || []).map(ll => { try { return L.latLng(ll); } catch(e) { return null; } }).filter(ll => !!ll && typeof ll.lat === 'number');
if (latLngs.length >= 2) {
try {
const line = turf.lineString(latLngs.map(ll => [ll.lng, ll.lat]));
const totalKm = turf.length(line, { units: 'kilometers' });
const midPoint = turf.along(line, totalKm / 2, { units: 'kilometers' });
const midPos = L.latLng(midPoint.geometry.coordinates[1], midPoint.geometry.coordinates[0]);
L.marker(midPos, {
pane: 'labelPane',
icon: L.divIcon({
className: 'variant-map-label',
html: `<div style="background: white; border: 1px solid #cca300; color: #444; padding: 2px 8px; border-radius: 4px; font-weight: bold; font-size: 11px; box-shadow: 0 1px 4px rgba(0,0,0,0.2); white-space: nowrap; opacity: ${v.active ? 1 : 0.4}; transition: opacity 0.3s;">${v.name}</div>`,
iconSize: [0, 0],
iconAnchor: [0, 0]
}),
interactive: false
}).addTo(labelLayer);
} catch (err) {
console.warn("Label positioning failed:", err);
}
}
// Sync edit state // Sync edit state
if (layer.enableEdit) { if (layer.enableEdit) {
@ -1942,16 +1920,24 @@
labelGroup.clearLayers(); labelGroup.clearLayers();
if (variant.routes && variant.routes.length > 1) { if (variant.routes && variant.routes.length > 1) {
const midIndex = Math.floor(variant.routes.length / 2); // Determine midpoint using Turf to follow the line exactly
const pos = variant.routes[midIndex]; const latLngs = variant.routes.map(ll => { try { return L.latLng(ll); } catch(e) { return null; } }).filter(ll => !!ll && typeof ll.lat === 'number');
let pos = variant.routes[Math.floor(variant.routes.length / 2)];
try {
const line = turf.lineString(latLngs.map(ll => [ll.lng, ll.lat]));
const totalKm = turf.length(line, { units: 'kilometers' });
const midPoint = turf.along(line, totalKm / 2, { units: 'kilometers' });
pos = L.latLng(midPoint.geometry.coordinates[1], midPoint.geometry.coordinates[0]);
} catch(e) {}
if (pos) { if (pos) {
L.marker(pos, { L.marker(pos, {
interactive: false,
pane: 'labelPane',
icon: L.divIcon({ icon: L.divIcon({
className: 'route-label', className: '', // Avoid Leaflet default sizing wrappers
html: `<div style="background: white; padding: 2px 8px; border: 2px solid #cca300; border-radius: 10px; font-weight: bold; font-size: 11px; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">${variant.name}</div>`, html: `<div style="background: white; padding: 3px 10px; border: 2px solid #cca300; border-radius: 6px; font-weight: bold; font-size: 12px; color: #333; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.3); transform: translate(-50%, -50%); opacity: ${variant.active ? 1 : 0.6}; transition: opacity 0.3s;">${variant.name}</div>`,
iconSize: [80, 20], iconSize: null
iconAnchor: [40, 10]
}) })
}).addTo(labelGroup); }).addTo(labelGroup);
} }
@ -2902,6 +2888,11 @@
} }
state.owners = gj; state.owners = gj;
updateOwnerLayer(); updateOwnerLayer();
// Zoom to owner data if available
if (layers.owners && layers.owners.getBounds().isValid()) {
map.fitBounds(layers.owners.getBounds(), { padding: [20, 20] });
}
} }
} catch (e) { console.error("[V3-Sync] Owners Error:", e); } } catch (e) { console.error("[V3-Sync] Owners Error:", e); }