callsign page tweak

assets/js/minimal_map.js

@@ -65,6 +65,18 @@ let MinimalAPRSMap = {
   },
 
   initializeMap(initialCenter, initialZoom) {
+    // Ensure the element and its parent exist
+    if (!this.el || !this.el.parentNode) {
+      console.warn("Map element or parent not found, retrying...");
+      if (this.initializationAttempts < this.maxInitializationAttempts) {
+        setTimeout(() => this.attemptInitialization(), 500);
+        return;
+      } else {
+        this.handleFatalError("Map element structure invalid");
+        return;
+      }
+    }
+
     // Check element dimensions
     const rect = this.el.getBoundingClientRect();
 
@@ -73,6 +85,10 @@ let MinimalAPRSMap = {
       console.warn("Map element has no dimensions, retrying...");
       this.errors.push("Map element has zero dimensions");
 
+      // Try to force dimensions
+      this.el.style.width = "100%";
+      this.el.style.height = "100vh";
+
       if (this.initializationAttempts < this.maxInitializationAttempts) {
         setTimeout(() => this.attemptInitialization(), 500);
         return;
@@ -84,6 +100,12 @@ let MinimalAPRSMap = {
 
     // Initialize basic map
     try {
+      // Ensure element ID is unique and not already initialized
+      if (this.el._leaflet_id) {
+        console.warn("Map already initialized on this element");
+        return;
+      }
+
       this.map = L.map(this.el, {
         zoomControl: true,
         attributionControl: true,
@@ -93,6 +115,15 @@ let MinimalAPRSMap = {
       console.error("Error initializing map:", error);
       this.errors.push("Map initialization failed: " + error.message);
 
+      // Check if it's a container already initialized error
+      if (error.message && error.message.includes("already initialized")) {
+        // Try to get the existing map instance
+        if (this.el._leaflet_id && L.DomUtil.get(this.el.id)) {
+          console.warn("Attempting to recover existing map instance");
+          return;
+        }
+      }
+
       if (this.initializationAttempts < this.maxInitializationAttempts) {
         setTimeout(() => this.attemptInitialization(), 1000);
         return;
@@ -178,14 +209,16 @@ let MinimalAPRSMap = {
 
     // Add a delayed size check
     setTimeout(() => {
+      if (this.el && this.el.parentNode) {
         const rect = this.el.getBoundingClientRect();
-      if (this.map) {
+        if (this.map && rect.width > 0 && rect.height > 0) {
           try {
             this.map.invalidateSize();
           } catch (error) {
             console.error("Error re-invalidating map size:", error);
           }
         }
+      }
     }, 1000);
 
     // LiveView event handlers

lib/aprs_web/live/map_live/callsign_view.ex

@@ -602,6 +602,7 @@ defmodule AprsWeb.MapLive.CallsignView do
       }
     </style>
 
+    <div style="position: relative; width: 100vw; height: 100vh;">
       <div class="callsign-header">
         <div class="callsign-title">📡 {@callsign}</div>
         <div class="nav-links">
@@ -648,10 +649,12 @@ defmodule AprsWeb.MapLive.CallsignView do
       <div
         id="aprs-map"
         phx-hook="APRSMap"
+        phx-update="ignore"
         data-center={Jason.encode!(@map_center || @default_center)}
         data-zoom={@map_zoom || @default_zoom}
       >
       </div>
+    </div>
     """
   end