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

feat: Fit map to all points on initial load

Browse Source
This commit is contained in:
Tanner Collin (aider)
2025-08-14 20:08:44 +00:00
parent 6c7dff2d8f
commit 4bc88e5ce9
1 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
mapper/src/App.js
View File

@@ -107,6 +107,20 @@ function MapEvents({ onMapChange }) {
return null; return null;
} }
function FitBoundsOnLoad({ coords, mapState }) {
const map = useMap();
useEffect(() => {
// If URL provides no center, fit the map to the bounds of the coordinates.
if (mapState.center === null && coords.length > 0) {
const bounds = leaflet.latLngBounds(coords);
map.fitBounds(bounds);
}
}, [coords, mapState.center, map]);
return null;
}
function Map({end, duration, slider, mapState, setMapState}) { function Map({end, duration, slider, mapState, setMapState}) {
const [data, loading] = useSensor('owntracks', 'OwnTracks', end, duration); const [data, loading] = useSensor('owntracks', 'OwnTracks', end, duration);
@@ -114,13 +128,6 @@ function Map({end, duration, slider, mapState, setMapState}) {
const coords = data.length ? data.filter(x => !range || (x.time >= range[0] && x.time <= range[1])).map(({ lat, lon }) => [lat, lon]).filter(([lat, lon]) => lat !== null || lon !== null) : []; const coords = data.length ? data.filter(x => !range || (x.time >= range[0] && x.time <= range[1])).map(({ lat, lon }) => [lat, lon]).filter(([lat, lon]) => lat !== null || lon !== null) : [];
useEffect(() => {
// If URL provides no center, set it from the data once it's loaded.
if (mapState.center === null && coords.length > 0) {
setMapState(prev => ({ ...prev, center: coords[coords.length - 1] }));
}
}, [coords, mapState.center, setMapState]);
const handleSubmit = (e) => { const handleSubmit = (e) => {
e.preventDefault(); e.preventDefault();
const api_key = e.target[0].value; const api_key = e.target[0].value;
@@ -133,10 +140,11 @@ function Map({end, duration, slider, mapState, setMapState}) {
<p>Loading...</p> <p>Loading...</p>
: :
coords.length ? coords.length ?
(mapState.center && (
<MapContainer center={mapState.center} 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)' }}>
<ChangeView center={mapState.center} zoom={mapState.zoom} /> {mapState.center && <ChangeView center={mapState.center} zoom={mapState.zoom} />}
<MapEvents onMapChange={setMapState} /> <MapEvents onMapChange={setMapState} />
<FitBoundsOnLoad coords={coords} mapState={mapState} />
<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'