---
name: position_orientation_change_fix
description: Fix for position map not displaying on screen orientation changes
type: project
---

## Issue: Position/Geolocation Not Displaying on Screen Orientation Changes

**Problem:**
The ArcGIS map component (`AscGISMap.vue`) failed to display or update position when the screen orientation changed between portrait and landscape modes.

**Root Cause:**
1. The component uses `v-if="$q.screen.gt.xs"` for conditional rendering of different layouts
2. When orientation changes, the ArcGIS MapView doesn't automatically resize to fit the new container dimensions
3. ArcGIS MapView requires manual `resize()` call when its container's size changes

**Solution Implemented:**
Added screen resize handling to `src/components/AscGISMap.vue`:

1. **Added state tracking:**
   - `isMapInitialized` ref to track when map is ready
   - `isInitializing` ref to prevent concurrent initializations

2. **Added `handleMapResize()` function:**
   - Checks if mapView exists and isn't destroyed
   - Uses `nextTick()` to ensure DOM updates complete before resizing
   - Calls `mapView.value.resize()` to update map dimensions

3. **Added watcher on `$q.screen.gt.xs`:**
   - Triggers when screen size crosses the xs breakpoint
   - Waits for DOM update via `nextTick()`
   - Calls `handleMapResize()` to adjust map

4. **Added window resize event listener:**
   - Falls back for orientation changes that might not trigger Quasar's screen watcher
   - Debounced with 300ms timeout to avoid excessive calls
   - Properly cleaned up on component unmount

**Files Modified:**
- `src/components/AscGISMap.vue` - Added resize handling logic

**Best Practices Applied:**
- Proper cleanup of event listeners in `onBeforeUnmount`
- Debouncing resize events for performance
- Using `nextTick()` to ensure DOM synchronization
- Checking for destroyed state before calling map methods

**Note:** The Google Maps component (`MapCheckin.vue`) was not affected as `vue3-google-map` handles resize automatically.