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)),