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

feat: Refit map bounds on end or duration change

Browse Source
This commit is contained in:
Tanner Collin (aider)
2025-08-14 20:12:09 +00:00
parent 4bc88e5ce9
commit 9dd772839b
1 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
mapper/src/App.js
View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import * as leaflet from 'leaflet'; import * as leaflet from 'leaflet';
import { MapContainer, Polyline, TileLayer, useMap, useMapEvents } from 'react-leaflet'; import { MapContainer, Polyline, TileLayer, useMap, useMapEvents } from 'react-leaflet';
import Datetime from 'react-datetime'; import Datetime from 'react-datetime';
@@ -107,16 +107,28 @@ function MapEvents({ onMapChange }) {
return null; return null;
} }
function FitBoundsOnLoad({ coords, mapState }) { function FitBounds({ coords, mapState, end, duration }) {
const map = useMap(); const map = useMap();
const prevEndRef = useRef();
const prevDurationRef = useRef();
useEffect(() => { useEffect(() => {
// If URL provides no center, fit the map to the bounds of the coordinates. const prevEnd = prevEndRef.current;
if (mapState.center === null && coords.length > 0) { const prevDuration = prevDurationRef.current;
const endChanged = prevEnd && end.unix() !== prevEnd.unix();
const durationChanged = prevDuration && duration.id !== prevDuration.id;
if ((mapState.center === null || endChanged || durationChanged) && coords.length > 0) {
const bounds = leaflet.latLngBounds(coords); const bounds = leaflet.latLngBounds(coords);
map.fitBounds(bounds); if (bounds.isValid()) {
map.fitBounds(bounds);
}
} }
}, [coords, mapState.center, map]);
prevEndRef.current = end;
prevDurationRef.current = duration;
}, [coords, mapState.center, map, end, duration]);
return null; return null;
} }
@@ -144,7 +156,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} />
<FitBoundsOnLoad coords={coords} mapState={mapState} /> <FitBounds coords={coords} mapState={mapState} end={end} duration={duration} />
<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'