tanner/sensors
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix: wait for data to load before fitting map bounds

Browse Source
This commit is contained in:
Tanner Collin (aider)
2025-08-14 20:59:14 +00:00
parent 13b35e1c00
commit b295c3fef0
1 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
mapper/src/App.js
View File

@@ -107,7 +107,7 @@ function MapEvents({ onMapChange }) {
return null; return null;
} }
function FitBounds({ coords, mapState, end, duration }) { function FitBounds({ coords, mapState, end, duration, loading }) {
const map = useMap(); const map = useMap();
const prevEndRef = useRef(); const prevEndRef = useRef();
const prevDurationRef = useRef(); const prevDurationRef = useRef();
@@ -133,8 +133,11 @@ function FitBounds({ coords, mapState, end, duration }) {
prevDurationRef.current = duration; prevDurationRef.current = duration;
}, [end, duration]); }, [end, duration]);
// Effect 2: Acts on `coords` changes, but only if the flag is set. // Effect 2: Acts on `coords` changes, but only if the flag is set and data isn't loading.
useEffect(() => { useEffect(() => {
// Do not run this effect if new data is being fetched.
if (loading) return;
// A refit is needed on initial load (mapState.center is null) // A refit is needed on initial load (mapState.center is null)
// or if the flag has been set by the other effect. // or if the flag has been set by the other effect.
if ((mapState.center === null || refitNeeded.current) && coords.length > 0) { if ((mapState.center === null || refitNeeded.current) && coords.length > 0) {
@@ -145,7 +148,7 @@ function FitBounds({ coords, mapState, end, duration }) {
// Reset the flag after the fit is performed. // Reset the flag after the fit is performed.
refitNeeded.current = false; refitNeeded.current = false;
} }
}, [coords, mapState.center, map]); }, [coords, mapState.center, map, loading]);
return null; return null;
} }
@@ -192,7 +195,7 @@ function Map({end, duration, slider, mapState, setMapState}) {
<MapContainer center={mapState.center || [0, 0]} zoom={mapState.zoom} scrollWheelZoom={true} style={{ width: '100%', height: 'calc(100vh - 2.5rem)' }}> <MapContainer center={mapState.center || [0, 0]} zoom={mapState.zoom} scrollWheelZoom={true} style={{ width: '100%', height: 'calc(100vh - 2.5rem)' }}>
{mapState.center && <ChangeView center={mapState.center} zoom={mapState.zoom} />} {mapState.center && <ChangeView center={mapState.center} zoom={mapState.zoom} />}
<MapEvents onMapChange={setMapState} /> <MapEvents onMapChange={setMapState} />
<FitBounds coords={coords} mapState={mapState} end={end} duration={duration} /> <FitBounds coords={coords} mapState={mapState} end={end} duration={duration} loading={loading} />
<TileLayer <TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url='https://maptiles.p.rapidapi.com/en/map/v1/{z}/{x}/{y}.png?rapidapi-key=4375b0b1d8msh0c9e7fa3efb9adfp1769dfjsnd603a0387fea' url='https://maptiles.p.rapidapi.com/en/map/v1/{z}/{x}/{y}.png?rapidapi-key=4375b0b1d8msh0c9e7fa3efb9adfp1769dfjsnd603a0387fea'