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) <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-03-29 15:20:06 +02:00
parent 1b9683752f
commit 99a4d7af97
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9

View file

@ -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;