From 0b1e0b85f00ee3da5f378b85a84ec71ac4192e31 Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Fri, 25 Jul 2025 14:25:05 -0500
Subject: [PATCH] Fix map loading error with dynamic vendor bundles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fixed "Leaflet library failed to load" error by deferring window.L access
- Changed map.ts to access window.L dynamically instead of at module load time
- Added const L = window.L; inside functions that use Leaflet
- This allows the vendor bundle to load asynchronously before map initialization

The issue was that the TypeScript module was trying to access window.L
immediately when imported, before the vendor bundle had loaded Leaflet.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 assets/js/map.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/assets/js/map.ts b/assets/js/map.ts
index ec4325f..2d97fbe 100644
--- a/assets/js/map.ts
+++ b/assets/js/map.ts
@@ -31,7 +31,7 @@ import type { BaseEventPayload } from "./types/events";
 // Vector grid types are included via the vendor bundle
 
 // Leaflet and plugins are loaded globally from vendor bundle
-const L = window.L;
+// We'll access window.L dynamically when needed instead of storing it at module load time
 
 // CSS files are bundled in vendor.js
 
@@ -78,7 +78,7 @@ let MapAPRSMap = {
     self.initializationAttempts!++;
 
     // Check if Leaflet is available
-    if (typeof L === "undefined") {
+    if (typeof window.L === "undefined") {
       console.error("Leaflet library not loaded!");
       self.errors!.push("Leaflet library not available");
 
@@ -90,6 +90,9 @@ let MapAPRSMap = {
         return;
       }
     }
+    
+    // Create a local reference to Leaflet for this function
+    const L = window.L;
 
     // Initialize with URL parameters first (from data attributes)
     let initialCenter: CenterData, initialZoom: number;
@@ -1731,6 +1734,7 @@ let MapAPRSMap = {
 
   addMarker(data: MarkerData & { openPopup?: boolean }) {
     const self = this as unknown as LiveViewHookContext;
+    const L = window.L;
     if (!data.id || !data.lat || !data.lng) {
       console.warn("Invalid marker data:", data);
       return;
@@ -2119,6 +2123,7 @@ let MapAPRSMap = {
 
   createMarkerIcon(data: MarkerData): L.DivIcon {
     const self = this as unknown as LiveViewHookContext;
+    const L = window.L;
     // If this is the most recent for the callsign, always show the APRS icon
     if (data.is_most_recent_for_callsign) {
       // Remove any historical dot at the same position for this callsign