graham/aprs.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

callsign page tweak

Browse source
This commit is contained in:
Graham McIntire 2025-06-16 16:06:29 -05:00
parent 31d4719bcf
commit 86288d9a74
No known key found for this signature in database
2 changed files with 86 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
assets/js/minimal_map.js
View file

@ -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.map) {
try {
this.map.invalidateSize();
} catch (error) {
console.error("Error re-invalidating map size:", error);
if (this.el && this.el.parentNode) {
const rect = this.el.getBoundingClientRect();
if (this.map && rect.width > 0 && rect.height > 0) {
try {
this.map.invalidateSize();
} catch (error) {
console.error("Error re-invalidating map size:", error);
}
}
}
}, 1000);

91
lib/aprs_web/live/map_live/callsign_view.ex
View file

@ -602,55 +602,58 @@ defmodule AprsWeb.MapLive.CallsignView do
}
</style>
<div class="callsign-header">
<div class="callsign-title">📡 {@callsign}</div>
<div class="nav-links">
<a href="/" class="nav-link">← Back to Map</a>
<a href="/packets" class="nav-link">All Packets</a>
<a href={"/packets/#{String.downcase(@callsign)}"} class="nav-link">{@callsign} Packets</a>
</div>
</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 style="position: relative; width: 100vw; height: 100vh;">
<div class="callsign-header">
<div class="callsign-title">📡 {@callsign}</div>
<div class="nav-links">
<a href="/" class="nav-link">← Back to Map</a>
<a href="/packets" class="nav-link">All Packets</a>
<a href={"/packets/#{String.downcase(@callsign)}"} class="nav-link">{@callsign} Packets</a>
</div>
</div>
<% end %>
<button class="locate-button" phx-click="locate_me" title="Find my location">
🎯
</button>
<%= if @replay_active do %>
<div class="replay-controls">
<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="empty-state">
<h3>Loading Historical Data</h3>
<p>
Loading packet history for {@callsign}...
</p>
<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">
🎯
</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