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

feat: Close submenu on map interaction

Browse Source
This commit is contained in:
Tanner Collin (aider)
2025-08-14 21:42:20 +00:00
parent 435db835e9
commit ca3202f9b7
1 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
mapper/src/App.js
View File

@@ -70,11 +70,13 @@ function useSensor(measurement, name, end, duration) {
return [data, loading]; return [data, loading];
}; };
function MapViewManager({ coords, mapState, setMapState, loading }) { function MapViewManager({ coords, mapState, setMapState, loading, setSubmenu }) {
const map = useMap(); const map = useMap();
// Effect 1: Handle map events (pan/zoom) from the user // Effect 1: Handle map events (pan/zoom) from the user
useMapEvents({ useMapEvents({
mousedown: () => setSubmenu(false),
zoomstart: () => setSubmenu(false),
moveend: () => { moveend: () => {
const center = map.getCenter(); const center = map.getCenter();
const newZoom = map.getZoom(); const newZoom = map.getZoom();
@@ -127,7 +129,7 @@ function MapViewManager({ coords, mapState, setMapState, loading }) {
return null; return null;
} }
function Map({end, duration, slider, mapState, setMapState}) { function Map({end, duration, slider, mapState, setMapState, setSubmenu}) {
const [data, loading] = useSensor('owntracks', 'OwnTracks', end, duration); const [data, loading] = useSensor('owntracks', 'OwnTracks', end, duration);
const range = useMemo(() => parseSlider(end, duration, slider), [end, duration, slider]); const range = useMemo(() => parseSlider(end, duration, slider), [end, duration, slider]);
@@ -182,7 +184,7 @@ function Map({end, duration, slider, mapState, setMapState}) {
coords.length ? coords.length ?
( (
<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)' }}>
<MapViewManager coords={coords} mapState={mapState} setMapState={setMapState} loading={loading} /> <MapViewManager coords={coords} mapState={mapState} setMapState={setMapState} loading={loading} setSubmenu={setSubmenu} />
<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'
@@ -204,8 +206,7 @@ function Map({end, duration, slider, mapState, setMapState}) {
); );
} }
function Menu({duration, setDuration, end, setEnd, slider, setSlider}) { function Menu({duration, setDuration, end, setEnd, slider, setSlider, submenu, setSubmenu}) {
const [submenu, setSubmenu] = useState(false);
const [showRange, setShowRange] = useState(false); const [showRange, setShowRange] = useState(false);
const chooseDuration = (x) => { const chooseDuration = (x) => {
@@ -391,6 +392,7 @@ function App() {
center: (initialLat && initialLng) ? [parseFloat(initialLat), parseFloat(initialLng)] : null, center: (initialLat && initialLng) ? [parseFloat(initialLat), parseFloat(initialLng)] : null,
zoom: initialZoom ? parseInt(initialZoom, 10) : 13, zoom: initialZoom ? parseInt(initialZoom, 10) : 13,
}); });
const [submenu, setSubmenu] = useState(false);
const isInitialMount = useRef(true); const isInitialMount = useRef(true);
useEffect(() => { useEffect(() => {
@@ -430,6 +432,8 @@ function App() {
setEnd={setEnd} setEnd={setEnd}
slider={slider} slider={slider}
setSlider={setSlider} setSlider={setSlider}
submenu={submenu}
setSubmenu={setSubmenu}
/> />
<Map <Map
@@ -438,6 +442,7 @@ function App() {
slider={slider} slider={slider}
mapState={mapState} mapState={mapState}
setMapState={setMapState} setMapState={setMapState}
setSubmenu={setSubmenu}
/> />
</div> </div>
); );