Fix JavaScript error when navigating from map to weather page
Fixed "can't access property 'invalidateSize', e.map is undefined" error that occurred when navigating away from the map page while a setTimeout was still trying to access the destroyed map. Changes: - Added check for self.map and self.isDestroyed before invalidating map size - Stored timeout references in a cleanupTimeouts array - Added cleanup code in destroyed() function to clear all pending timeouts - Updated TypeScript type definition to include cleanupTimeouts property This prevents attempting to access the map object after it has been destroyed during page navigation. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
d3a5ed33f2
commit
15f3e8fcfe
2 changed files with 24 additions and 2 deletions
|
|
@ -603,7 +603,12 @@ let MapAPRSMap = {
|
|||
});
|
||||
|
||||
// Check element dimensions after zoom
|
||||
setTimeout(() => {
|
||||
const dimensionCheckTimeout = setTimeout(() => {
|
||||
// Check if map still exists and not destroyed
|
||||
if (!self.map || self.isDestroyed) {
|
||||
return;
|
||||
}
|
||||
|
||||
const afterRect = self.el.getBoundingClientRect();
|
||||
|
||||
if (afterRect.width === 0 || afterRect.height === 0) {
|
||||
|
|
@ -611,9 +616,17 @@ let MapAPRSMap = {
|
|||
// Try to restore dimensions
|
||||
self.el.style.width = "100vw";
|
||||
self.el.style.height = "100vh";
|
||||
self.map.invalidateSize();
|
||||
if (self.map) {
|
||||
self.map.invalidateSize();
|
||||
}
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
// Store timeout for cleanup
|
||||
if (!self.cleanupTimeouts) {
|
||||
self.cleanupTimeouts = [];
|
||||
}
|
||||
self.cleanupTimeouts.push(dimensionCheckTimeout);
|
||||
}
|
||||
}, 100);
|
||||
} catch (error) {
|
||||
|
|
@ -1620,6 +1633,14 @@ let MapAPRSMap = {
|
|||
self.programmaticMoveTimeout = undefined;
|
||||
}
|
||||
|
||||
// Clear any dimension check timeouts
|
||||
if (self.cleanupTimeouts !== undefined) {
|
||||
self.cleanupTimeouts.forEach((timeout: number) => {
|
||||
clearTimeout(timeout);
|
||||
});
|
||||
self.cleanupTimeouts = [];
|
||||
}
|
||||
|
||||
// Remove popup navigation event listener
|
||||
if (self.popupNavigationHandler) {
|
||||
document.removeEventListener('click', self.popupNavigationHandler);
|
||||
|
|
|
|||
1
assets/js/types/map.d.ts
vendored
1
assets/js/types/map.d.ts
vendored
|
|
@ -34,6 +34,7 @@ export interface LiveViewHookContext {
|
|||
rfPathLines?: Array<Polyline | Marker>; // Array of Leaflet polylines and markers for RF path visualization
|
||||
trailLayer?: LayerGroup;
|
||||
markerClusterGroup?: MarkerClusterGroup;
|
||||
cleanupTimeouts?: ReturnType<typeof setTimeout>[];
|
||||
}
|
||||
|
||||
export interface MarkerData {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue