From c1004108d06679947504c5092125a38f487ad3f5 Mon Sep 17 00:00:00 2001
From: Johannes Baumeister <jba@enwelo.de>
Date: Mon, 20 Apr 2026 12:02:58 +0200
Subject: [PATCH] Fix clipped variant label rendering and set map focus to
 owners layer on load

---
 index.html | 51 +++++++++++++++++++++------------------------------
 1 file changed, 21 insertions(+), 30 deletions(-)

diff --git a/index.html b/index.html
index e890cf1..84d7138 100644
--- a/index.html
+++ b/index.html
@@ -1807,30 +1807,8 @@
                         layer.setStyle({ opacity: 0.3, weight: 4, color: '#cca300' });
                     }
 
-                    // Labels aktualisieren (Name in der Mitte der Linie auf weißem Hintergrund)
-                    labelLayer.clearLayers();
-                    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);
-                        }
-                    }
+                    // Labels aktualisieren
+                    updateRouteLabels(v);
 
                     // Sync edit state
                     if (layer.enableEdit) {
@@ -1942,16 +1920,24 @@
             labelGroup.clearLayers();
             
             if (variant.routes && variant.routes.length > 1) {
-                const midIndex = Math.floor(variant.routes.length / 2);
-                const pos = variant.routes[midIndex];
+                // Determine midpoint using Turf to follow the line exactly
+                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) {
                     L.marker(pos, {
+                        interactive: false,
+                        pane: 'labelPane',
                         icon: L.divIcon({
-                            className: 'route-label',
-                            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>`,
-                            iconSize: [80, 20],
-                            iconAnchor: [40, 10]
+                            className: '', // Avoid Leaflet default sizing wrappers
+                            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: null
                         })
                     }).addTo(labelGroup);
                 }
@@ -2902,6 +2888,11 @@
                     }
                     state.owners = gj;
                     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); }