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