49 lines
2 KiB
Markdown
49 lines
2 KiB
Markdown
|
---
|
||
|
|
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.
|