From 99a4d7af97792caea43704652fb7b90d2bed3ee5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Sun, 29 Mar 2026 15:20:06 +0200 Subject: [PATCH] Fix fitBounds running before elevation chart resizes map invalidateSize() + requestAnimationFrame ensures Leaflet knows the map's actual dimensions after the elevation chart renders. Also removes unnecessary filter on already-typed coordinates. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/planner/app/components/PlannerMap.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/apps/planner/app/components/PlannerMap.tsx b/apps/planner/app/components/PlannerMap.tsx index 3c81524..d8d3499 100644 --- a/apps/planner/app/components/PlannerMap.tsx +++ b/apps/planner/app/components/PlannerMap.tsx @@ -63,13 +63,18 @@ function RouteFitter({ coordinates }: { coordinates: [number, number, number][] // Coordinates are in [lon, lat, elevation] GeoJSON format const bounds = L.latLngBounds( - coordinates.filter((c) => c.length >= 2).map((c) => [c[1]!, c[0]!] as [number, number]), + coordinates.map((c) => [c[1]!, c[0]!] as [number, number]), ); - if (bounds.isValid()) { + if (!bounds.isValid()) return; + + // Delay fitBounds so the layout has settled (elevation chart may resize the map) + const raf = requestAnimationFrame(() => { + map.invalidateSize(); map.fitBounds(bounds, { padding: [50, 50], maxZoom: 16 }); hasFitted.current = true; - } + }); + return () => cancelAnimationFrame(raf); }, [coordinates, map]); return null;