diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx index 30bec40..9dec7e4 100644 --- a/apps/web/src/main.tsx +++ b/apps/web/src/main.tsx @@ -75,25 +75,52 @@ function ViewNav({ hash }: { hash: string }) { function Root() { const [hash, setHash] = useState(window.location.hash || '#tactical') - useEffect(() => { - const on = () => setHash(window.location.hash || '#tactical') - window.addEventListener('hashchange', on) - return () => window.removeEventListener('hashchange', on) - }, []) - const view = - hash === '#tactical' || hash === '#military' ? : - hash === '#executive' || hash === '#pitch' ? : - hash === '#compare' ? : - hash === '#review' ? : - + useEffect(() => { + const on = () => { + const h = window.location.hash || '#tactical'; + setHash(h); + // Trigger a resize event to ensure MapLibre maps adapt to visibility changes instantly + setTimeout(() => { + window.dispatchEvent(new Event('resize')); + }, 50); + }; + window.addEventListener('hashchange', on); + return () => window.removeEventListener('hashchange', on); + }, []); + + const isTactical = hash === '#tactical' || hash === '#military'; + const isExecutive = hash === '#executive' || hash === '#pitch'; + const isCompare = hash === '#compare'; + const isReview = hash === '#review'; + const isMap = !isTactical && !isExecutive && !isCompare && !isReview; return ( <> - {view} + + {/* Keep-Alive Persistent Views: Preserves Map Instances and GPU Tile Caches across Tab switches */} +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
- ) + ); } ReactDOM.createRoot(document.getElementById('root')!).render( diff --git a/apps/web/src/pages/TacticalDefenseView.tsx b/apps/web/src/pages/TacticalDefenseView.tsx index 90d1d1c..6f772d1 100644 --- a/apps/web/src/pages/TacticalDefenseView.tsx +++ b/apps/web/src/pages/TacticalDefenseView.tsx @@ -90,7 +90,7 @@ export const TacticalDefenseView: React.FC = () => { const initialMap = new maplibregl.Map({ container: mapContainer.current, - style: '/style-dark.json', + style: '/style.json', center: [35.9106, 31.9539], zoom: 11, pitch: 35, @@ -99,6 +99,11 @@ export const TacticalDefenseView: React.FC = () => { map.current = initialMap; + const handleResize = () => { + if (initialMap) initialMap.resize(); + }; + window.addEventListener('resize', handleResize); + initialMap.on('mousemove', (e) => { setCursorPos({ lat: Number(e.lngLat.lat.toFixed(5)),