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;
}
function FitBounds({ coords, mapState, end, duration }) {
function FitBounds({ coords, mapState, end, duration, loading }) {
const map = useMap();
const prevEndRef = useRef();
const prevDurationRef = useRef();
@@ -133,8 +133,11 @@ function FitBounds({ coords, mapState, end, duration }) {
prevDurationRef.current = 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(() => {
// 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)
// or if the flag has been set by the other effect.
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.
refitNeeded.current = false;
}
}, [coords, mapState.center, map]);
}, [coords, mapState.center, map, loading]);
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)' }}>
{mapState.center && <ChangeView center={mapState.center} zoom={mapState.zoom} />}
<MapEvents onMapChange={setMapState} />
<FitBounds coords={coords} mapState={mapState} end={end} duration={duration} />
<FitBounds coords={coords} mapState={mapState} end={end} duration={duration} loading={loading} />
<TileLayer
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'