diff --git a/src/frontend/src/Components/map/Map.js b/src/frontend/src/Components/map/Map.js index 5c50bad64..eed8eb1b7 100644 --- a/src/frontend/src/Components/map/Map.js +++ b/src/frontend/src/Components/map/Map.js @@ -690,6 +690,35 @@ export default function DriveBCMap(props) { }; }, []); + // Auto-open panel from URL params on initial load + useEffect(() => { + if (!mapRendered) return; + + const type = searchParams.get('type'); + const id = searchParams.get('id'); + + if (!type || !id) return; + + if (type === 'advisory') { + // Advisories haven't loaded yet — wait for them, don't give up. + if (!filteredAdvisories || !filteredAdvisories.length) return; + const advisoryData = filteredAdvisories?.find(a => a.id === parseInt(id)); + if (advisoryData) { + setTimeout(() => { + const olFeature = new Feature(); + olFeature.set('type', 'advisory'); + olFeature.set('id', advisoryData.id); + olFeature.set('data', advisoryData); + updateClickedFeature(olFeature); + }, 500); + } + else { + // Advisories loaded but this id genuinely doesn't exist + setStaleLinkMessage(true); + } + } + }, [mapRendered, filteredAdvisories]); + /* Map operations on location search */ useEffect(() => { if (searchLocationFrom && searchLocationFrom.length) { @@ -996,9 +1025,11 @@ export default function DriveBCMap(props) { useEffect(() => { if (searchParamInitialized.current) { if (!clickedFeature) { - searchParams.delete('type'); + if (searchParams.get('type') !== 'advisory') { + searchParams.delete('type'); + searchParams.delete('id'); + } searchParams.delete('display_category'); - searchParams.delete('id'); searchParams.delete('camIndex'); setSearchParams(searchParams, { replace: true }); } diff --git a/src/frontend/src/Components/map/panels/index.js b/src/frontend/src/Components/map/panels/index.js index 8b937871b..5dd8f0a74 100644 --- a/src/frontend/src/Components/map/panels/index.js +++ b/src/frontend/src/Components/map/panels/index.js @@ -97,7 +97,7 @@ export const resizePanel = (panelRef, clickedFeature, setMaximizedPanel) => { export const togglePanel = (panelRef, resetClickedStates, clickedFeatureRef, updateClickedFeature, pushMargins, searchedRoutes) => { if (searchedRoutes) { - panelRef.current.classList.remove('maximized'); + panelRef.current?.classList.remove('maximized'); resetClickedStates(null, clickedFeatureRef, updateClickedFeature); return; }