trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix fitBounds running before elevation chart resizes map

Browse source 
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
1 changed files with 8 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

11
apps/planner/app/components/PlannerMap.tsx
View file

@ -63,13 +63,18 @@ function RouteFitter({ coordinates }: { coordinates: [number, number, number][]
// Coordinates are in [lon, lat, elevation] GeoJSON format // Coordinates are in [lon, lat, elevation] GeoJSON format
const bounds = L.latLngBounds( 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 }); map.fitBounds(bounds, { padding: [50, 50], maxZoom: 16 });
hasFitted.current = true; hasFitted.current = true;
} });
return () => cancelAnimationFrame(raf);
}, [coordinates, map]); }, [coordinates, map]);
return null; return null;