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

24
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 { MapContainer, Polyline, TileLayer, useMap, useMapEvents } from 'react-leaflet';
import Datetime from 'react-datetime';
@@ -107,16 +107,28 @@ function MapEvents({ onMapChange }) {
return null;
}
function FitBoundsOnLoad({ coords, mapState }) {
function FitBounds({ coords, mapState, end, duration }) {
const map = useMap();
const prevEndRef = useRef();
const prevDurationRef = useRef();
useEffect(() => {
// If URL provides no center, fit the map to the bounds of the coordinates.
if (mapState.center === null && coords.length > 0) {
const prevEnd = prevEndRef.current;
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);
if (bounds.isValid()) {
map.fitBounds(bounds);
}
}, [coords, mapState.center, map]);
}
prevEndRef.current = end;
prevDurationRef.current = duration;
}, [coords, mapState.center, map, end, duration]);
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)' }}>
{mapState.center && <ChangeView center={mapState.center} zoom={mapState.zoom} />}
<MapEvents onMapChange={setMapState} />
<FitBoundsOnLoad coords={coords} mapState={mapState} />
<FitBounds coords={coords} mapState={mapState} end={end} duration={duration} />
<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'