diff --git a/frontend/components/LinesExplorerContentPatternPath/LinesExplorerContentPatternPath.js b/frontend/components/LinesExplorerContentPatternPath/LinesExplorerContentPatternPath.js index ca898d90..25a0fb6b 100644 --- a/frontend/components/LinesExplorerContentPatternPath/LinesExplorerContentPatternPath.js +++ b/frontend/components/LinesExplorerContentPatternPath/LinesExplorerContentPatternPath.js @@ -26,7 +26,6 @@ export default function LinesExplorerContentPatternPath() { ))} -
{linesExplorerContext.entities.pattern.id}
); diff --git a/frontend/components/LinesExplorerMap/LinesExplorerMap.js b/frontend/components/LinesExplorerMap/LinesExplorerMap.js index 17933cdf..b32d1e27 100644 --- a/frontend/components/LinesExplorerMap/LinesExplorerMap.js +++ b/frontend/components/LinesExplorerMap/LinesExplorerMap.js @@ -174,7 +174,7 @@ export default function LinesExplorerMap() { }, [linesExplorerMap]); useEffect(() => { - if (selectedShapeMapData) { + if (selectedShapeMapData && linesExplorerContext.map.auto_zoom) { // Get window width and height let fitBoundsPadding = 100; if (window.innerWidth < window.innerHeight) fitBoundsPadding = 50; @@ -183,7 +183,7 @@ export default function LinesExplorerMap() { const boundingBox = turf.bbox(collection); linesExplorerMap.fitBounds(boundingBox, { duration: 2000, padding: fitBoundsPadding, bearing: linesExplorerMap.getBearing(), maxZoom: 16 }); } - }, [selectedShapeMapData, selectedVehiclesMapData, linesExplorerMap]); + }, [selectedShapeMapData, selectedVehiclesMapData, linesExplorerMap, linesExplorerContext.map.auto_zoom]); // // E. Helper functions @@ -252,6 +252,7 @@ export default function LinesExplorerMap() { }; const handleMapMove = () => { + linesExplorerContext.disableAutoZoom(); // Get all currently rendered features and mark all of them as unselected // const allRenderedFeatures = linesExplorerMap.queryRenderedFeatures(); // allRenderedFeatures.forEach(function (f) { diff --git a/frontend/contexts/LinesExplorerContext.js b/frontend/contexts/LinesExplorerContext.js index 975dcc87..c824818c 100644 --- a/frontend/contexts/LinesExplorerContext.js +++ b/frontend/contexts/LinesExplorerContext.js @@ -13,7 +13,7 @@ import parseDateToString from '@/services/parseDateToString'; const initialMapState = { style: 'map', - auto_zoom: null, + auto_zoom: true, }; const initialEntitiesState = { @@ -129,6 +129,7 @@ export function LinesExplorerContextProvider({ children }) { const selectPattern = useCallback((patternData) => { setEntitiesState((prev) => ({ ...prev, pattern: patternData, stop: null })); + setMapState((prev) => ({ ...prev, auto_zoom: true })); }, []); const clearSelectedPattern = useCallback(() => { @@ -139,14 +140,24 @@ export function LinesExplorerContextProvider({ children }) { const selectStop = useCallback((stopData) => { setEntitiesState((prev) => ({ ...prev, stop: stopData })); + setMapState((prev) => ({ ...prev, auto_zoom: false })); }, []); const clearSelectedStop = useCallback(() => { setEntitiesState((prev) => ({ ...prev, stop: null })); + setMapState((prev) => ({ ...prev, auto_zoom: true })); }, []); // --------- + const enableAutoZoom = useCallback(() => { + setMapState((prev) => ({ ...prev, auto_zoom: true })); + }, []); + + const disableAutoZoom = useCallback(() => { + setMapState((prev) => ({ ...prev, auto_zoom: false })); + }, []); + const updateMapState = useCallback( (newMapState, reset = false) => { if (reset) setMapState({ ...initialMapState, ...newMapState }); @@ -190,8 +201,11 @@ export function LinesExplorerContextProvider({ children }) { selectStop, clearSelectedStop, // + enableAutoZoom, + disableAutoZoom, + // }), - [mapState, updateMapState, entitiesState, updateEntitiesState, selectMunicipality, clearSelectedMunicipality, selectLine, clearSelectedLine, selectDate, clearSelectedDate, selectPattern, clearSelectedPattern, selectStop, clearSelectedStop] + [mapState, updateMapState, entitiesState, updateEntitiesState, selectMunicipality, clearSelectedMunicipality, selectLine, clearSelectedLine, selectDate, clearSelectedDate, selectPattern, clearSelectedPattern, selectStop, clearSelectedStop, enableAutoZoom, disableAutoZoom] ); //