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,12 +209,14 @@ let MinimalAPRSMap = {
 
     // Add a delayed size check
     setTimeout(() => {
-      const rect = this.el.getBoundingClientRect();
+      if (this.el && this.el.parentNode) {
-      if (this.map) {
+        const rect = this.el.getBoundingClientRect();
-        try {
+        if (this.map && rect.width > 0 && rect.height > 0) {
-          this.map.invalidateSize();
+          try {
-        } catch (error) {
+            this.map.invalidateSize();
-          console.error("Error re-invalidating map size:", error);
+          } catch (error) {
+            console.error("Error re-invalidating map size:", error);
+          }
         }
       }
     }, 1000);

lib/aprs_web/live/map_live/callsign_view.ex

@@ -602,55 +602,58 @@ defmodule AprsWeb.MapLive.CallsignView do
       }
     </style>
 
-    <div class="callsign-header">
+    <div style="position: relative; width: 100vw; height: 100vh;">
-      <div class="callsign-title">📡 {@callsign}</div>
+      <div class="callsign-header">
-      <div class="nav-links">
+        <div class="callsign-title">📡 {@callsign}</div>
-        <a href="/" class="nav-link">← Back to Map</a>
+        <div class="nav-links">
-        <a href="/packets" class="nav-link">All Packets</a>
+          <a href="/" class="nav-link">← Back to Map</a>
-        <a href={"/packets/#{String.downcase(@callsign)}"} class="nav-link">{@callsign} Packets</a>
+          <a href="/packets" class="nav-link">All Packets</a>
-      </div>
+          <a href={"/packets/#{String.downcase(@callsign)}"} class="nav-link">{@callsign} Packets</a>
-    </div>
-
-    <%= if @replay_active do %>
-      <div class="replay-controls">
-        <button class="replay-button" phx-click="pause_replay">
-          {if @replay_paused, do: "Resume", else: "Pause"}
-        </button>
-
-        <div class="speed-control">
-          <label>Speed:</label>
-          <input
-            type="number"
-            min="0.1"
-            max="10"
-            step="0.1"
-            value={@replay_speed}
-            phx-change="adjust_replay_speed"
-            name="speed"
-          />x
         </div>
       </div>
-    <% end %>
 
-    <button class="locate-button" phx-click="locate_me" title="Find my location">
+      <%= if @replay_active do %>
-      🎯
+        <div class="replay-controls">
-    </button>
+          <button class="replay-button" phx-click="pause_replay">
+            {if @replay_paused, do: "Resume", else: "Pause"}
+          </button>
 
-    <%= if map_size(@visible_packets) == 0 and not @replay_active do %>
+          <div class="speed-control">
-      <div class="empty-state">
+            <label>Speed:</label>
-        <h3>Loading Historical Data</h3>
+            <input
-        <p>
+              type="number"
-          Loading packet history for {@callsign}...
+              min="0.1"
-        </p>
+              max="10"
+              step="0.1"
+              value={@replay_speed}
+              phx-change="adjust_replay_speed"
+              name="speed"
+            />x
+          </div>
+        </div>
+      <% end %>
+
+      <button class="locate-button" phx-click="locate_me" title="Find my location">
+        🎯
+      </button>
+
+      <%= if map_size(@visible_packets) == 0 and not @replay_active do %>
+        <div class="empty-state">
+          <h3>Loading Historical Data</h3>
+          <p>
+            Loading packet history for {@callsign}...
+          </p>
+        </div>
+      <% end %>
+
+      <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>
-    <% end %>
-
-    <div
-      id="aprs-map"
-      phx-hook="APRSMap"
-      data-center={Jason.encode!(@map_center || @default_center)}
-      data-zoom={@map_zoom || @default_zoom}
-    >
     </div>
     """
   end