diff --git a/Procfile b/Procfile
new file mode 100644
index 0000000..f3e764e
--- /dev/null
+++ b/Procfile
@@ -0,0 +1,2 @@
+release: mix ecto.migrate
+web: mix phx.server
\ No newline at end of file
diff --git a/assets/js/app.js b/assets/js/app.js
index db57cd4..3948c69 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -24,437 +24,12 @@ import topbar from "../vendor/topbar";
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
+// Import minimal APRS map hook
+import MinimalAPRSMap from "./minimal_map.js";
+
// APRS Map Hook
let Hooks = {};
-Hooks.APRSMap = {
- mounted() {
- console.log("APRSMap hook mounted");
- // Get initial center and zoom from server-provided data attributes
- const initialCenter = JSON.parse(this.el.dataset.center);
- const initialZoom = parseInt(this.el.dataset.zoom);
-
- console.log("Initializing map with center:", initialCenter, "and zoom:", initialZoom);
- console.log("Map container element:", this.el);
- console.log("Container dimensions:", this.el.offsetWidth, "x", this.el.offsetHeight);
- console.log("Parsed coordinates:", initialCenter.lat, initialCenter.lng, "zoom:", initialZoom);
-
- // Initialize the map with the server-provided location
- const map = L.map(this.el, {
- zoomControl: true,
- attributionControl: true,
- closePopupOnClick: true,
- }).setView([initialCenter.lat, initialCenter.lng], initialZoom);
-
- console.log("Map setView called with:", [initialCenter.lat, initialCenter.lng], initialZoom);
- console.log("Map object created:", map);
-
- // Validate container size and force refresh if needed
- if (this.el.offsetWidth === 0 || this.el.offsetHeight === 0) {
- console.warn("Map container has zero dimensions, forcing size refresh");
- setTimeout(() => {
- map.invalidateSize();
- map.setView([initialCenter.lat, initialCenter.lng], initialZoom);
- console.log("Map size refreshed and view reset");
- }, 100);
- }
-
- // Force initial size calculation
- map.invalidateSize();
-
- // Track when map is ready
- map.whenReady(() => {
- console.log("Map is fully ready and rendered");
- console.log("Map center after ready:", map.getCenter());
- console.log("Map zoom after ready:", map.getZoom());
- console.log("Map bounds after ready:", map.getBounds());
- this.mapReady = true;
- this.pushEvent("map_ready", {});
- });
-
- console.log("Map initialized");
-
- // Add OpenStreetMap tile layer
- L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
- attribution:
- '© OpenStreetMap contributors | APRS.me',
- maxZoom: 19,
- }).addTo(map);
-
- // Check if MarkerCluster plugin is available
- if (typeof L.markerClusterGroup === "function") {
- // Create marker cluster group
- this.markerClusterGroup = L.markerClusterGroup({
- chunkedLoading: true,
- maxClusterRadius: function (zoom) {
- // Adjust cluster radius based on zoom level
- // Tighter clustering when zoomed out, looser when zoomed in
- if (zoom <= 5) return 120;
- if (zoom <= 8) return 80;
- if (zoom <= 11) return 60;
- if (zoom <= 14) return 40;
- return 20;
- },
- spiderfyOnMaxZoom: true,
- showCoverageOnHover: true,
- zoomToBoundsOnClick: true,
- removeOutsideVisibleBounds: true,
- animate: true,
- animateAddingMarkers: true,
- disableClusteringAtZoom: 16,
- iconCreateFunction: function (cluster) {
- const childCount = cluster.getChildCount();
- let c = " marker-cluster-";
- if (childCount < 10) {
- c += "small";
- } else if (childCount < 100) {
- c += "medium";
- } else {
- c += "large";
- }
- return new L.DivIcon({
- html: "" + childCount + "
",
- className: "marker-cluster" + c,
- iconSize: new L.Point(40, 40),
- });
- },
- });
-
- // Add cluster group to map
- map.addLayer(this.markerClusterGroup);
- } else {
- console.warn("Leaflet MarkerCluster plugin not loaded, falling back to regular markers");
- this.markerClusterGroup = null;
- }
-
- // Store markers to avoid duplicates
- this.markers = new Map();
- this.historicalMarkers = new Map();
-
- // Store map instance and initialize state
- this.map = map;
- this.mapReady = false;
-
- // Send initial bounds to server
- this.sendBoundsToServer();
-
- // Listen for new packets from the server
- this.handleEvent("new_packet", (packet) => {
- this.addPacketMarker(packet);
- });
-
- // Listen for historical packets
- this.handleEvent("historical_packet", (packet) => {
- this.addPacketMarker(packet, true);
- });
-
- // Listen for zoom to location event
- this.handleEvent("zoom_to_location", (data) => {
- console.log("Received zoom_to_location event:", data);
-
- if (data.lat && data.lng) {
- // Convert to numbers to ensure proper handling
- const lat = parseFloat(data.lat);
- const lng = parseFloat(data.lng);
- const zoom = parseInt(data.zoom || 12);
-
- console.log(`Setting map view to [${lat}, ${lng}] with zoom ${zoom}`);
-
- // Force map invalidation before setting view
- this.map.invalidateSize();
-
- // Check container dimensions before zoom
- if (this.el.offsetWidth === 0 || this.el.offsetHeight === 0) {
- console.warn(
- "Container has zero dimensions during zoom, width:",
- this.el.offsetWidth,
- "height:",
- this.el.offsetHeight,
- );
- }
-
- // Small delay to ensure map is ready
- setTimeout(() => {
- // Force another size refresh right before setView
- this.map.invalidateSize();
- console.log("About to call setView with:", [lat, lng], zoom);
- this.map.setView([lat, lng], zoom, {
- animate: true,
- duration: 1,
- });
-
- // Force final size refresh after setView
- setTimeout(() => {
- this.map.invalidateSize();
- }, 100);
- console.log("Map view updated after delay");
- console.log("New map center:", this.map.getCenter());
- console.log("New map zoom:", this.map.getZoom());
- }, 300);
- } else {
- console.error("Invalid coordinates in zoom_to_location event:", data);
- }
- });
-
- // Listen for clearing historical packets
- this.handleEvent("clear_historical_packets", () => {
- this.clearHistoricalMarkers();
- });
-
- // Listen for clear markers event
- this.handleEvent("clear_markers", () => {
- this.clearAllMarkers();
- });
-
- // Listen for refresh markers event
- this.handleEvent("refresh_markers", () => {
- this.refreshMarkers();
- });
-
- // Handle geolocation button clicks
- this.handleEvent("request_geolocation", () => {
- if ("geolocation" in navigator) {
- navigator.geolocation.getCurrentPosition(
- (position) => {
- const { latitude, longitude } = position.coords;
- // Send location back to server
- this.pushEvent("set_location", { lat: latitude, lng: longitude });
- },
- (error) => {
- console.warn("Geolocation error:", error.message);
- },
- );
- } else {
- console.warn("Geolocation not available in this browser");
- }
- });
-
- // Update bounds when map moves or zooms
- map.on("moveend", () => {
- // Debounce the bounds update to avoid too many server calls
- if (this.boundsTimer) clearTimeout(this.boundsTimer);
- this.boundsTimer = setTimeout(() => {
- this.sendBoundsToServer();
- }, 300);
- });
-
- // Handle map resize when window is resized
- window.addEventListener("resize", () => {
- map.invalidateSize();
- });
- },
-
- sendBoundsToServer() {
- const bounds = this.map.getBounds();
- this.pushEvent("update_bounds", {
- bounds: {
- north: bounds.getNorth(),
- south: bounds.getSouth(),
- east: bounds.getEast(),
- west: bounds.getWest(),
- },
- });
-
- // Remove markers that are now outside the visible bounds
- this.removeMarkersOutsideBounds(bounds);
- },
-
- clearAllMarkers() {
- // Remove all markers from the cluster group or map
- if (this.markerClusterGroup) {
- this.markerClusterGroup.clearLayers();
- } else {
- // Fallback: remove markers directly from map
- this.markers.forEach((marker) => {
- this.map.removeLayer(marker);
- });
- this.historicalMarkers.forEach((marker) => {
- this.map.removeLayer(marker);
- });
- }
- this.markers.clear();
- this.historicalMarkers.clear();
- },
-
- refreshMarkers() {
- // More efficient refresh that doesn't require clearing all markers
- // Filter markers to keep only those added in the last hour
- const now = new Date();
- const oneHourAgo = new Date(now.getTime() - 60 * 60 * 1000);
-
- // First, collect markers to remove
- const markersToRemove = [];
- this.markers.forEach((marker, callsign) => {
- if (marker.addedAt && marker.addedAt < oneHourAgo) {
- markersToRemove.push(callsign);
- }
- });
-
- // Then remove them from the map and collection
- markersToRemove.forEach((callsign) => {
- const marker = this.markers.get(callsign);
- if (marker) {
- if (this.markerClusterGroup) {
- this.markerClusterGroup.removeLayer(marker);
- } else {
- this.map.removeLayer(marker);
- }
- this.markers.delete(callsign);
- }
- });
- },
-
- clearHistoricalMarkers() {
- // Remove only historical markers
- if (this.markerClusterGroup) {
- this.historicalMarkers.forEach((marker) => {
- this.markerClusterGroup.removeLayer(marker);
- });
- } else {
- // Fallback: remove markers directly from map
- this.historicalMarkers.forEach((marker) => {
- this.map.removeLayer(marker);
- });
- }
- this.historicalMarkers.clear();
- },
-
- removeMarkersOutsideBounds(bounds) {
- // The cluster handles marker visibility automatically
- },
-
- addPacketMarker(packet, isHistorical = false) {
- // Skip packets without required data
- if (
- !packet["data_extended"] ||
- !packet["data_extended"]["latitude"] ||
- !packet["data_extended"]["longitude"]
- ) {
- return;
- }
-
- const lat = parseFloat(packet["data_extended"]["latitude"]);
- const lng = parseFloat(packet["data_extended"]["longitude"]);
-
- // Validate coordinates are within valid ranges
- if (isNaN(lat) || isNaN(lng) || lat < -90 || lat > 90 || lng < -180 || lng > 180) {
- return;
- }
-
- // Generate a unique ID for the marker
- const callsign = packet["base_callsign"] + (packet["ssid"] ? "-" + packet["ssid"] : "");
- // For historical packets, add a timestamp or unique ID to distinguish them
- const markerId = isHistorical ? `hist_${callsign}_${Date.now()}` : callsign;
-
- // Create popup content with historical indicator if needed
- const timestamp =
- isHistorical && packet["timestamp"]
- ? new Date(packet["timestamp"]).toLocaleString()
- : new Date().toLocaleTimeString();
-
- const popupContent = `
-
-
${callsign} ${isHistorical ? "(Historical)" : ""}
-
- Position: ${lat.toFixed(4)}°, ${lng.toFixed(4)}°
- Type: ${packet["data_type"]}
- ${packet["data_extended"]["comment"] ? `Comment: ${packet["data_extended"]["comment"]}
` : ""}
- Path: ${packet["path"]}
- Time: ${timestamp}
-
-
+
+
+
+
+
+
+
+
+ <%= if @replay_active do %>
+
+ <% end %>
+
+
+
+
+
Active Markers: {map_size(@active_markers)}
+
Historical: {map_size(@historical_markers)}
+
Zoom: {@map_zoom}
+
+ Center: {Float.round(@map_center.lat, 4)}, {Float.round(@map_center.lng, 4)}
+
+
+ <%= if @geolocation_error do %>
+
+ Location Error: {@geolocation_error}
+
+ <% end %>
+
+ <%= if @loading do %>
+
Loading markers...
+ <% end %>
+
+
+
+
+ Progress: {@replay_index}/{length(@replay_packets)}
+
+ <% end %>
+ """
+ end
+
+ # Private helper functions
+
+ defp default_bounds do
+ %{
+ north: 49.0,
+ south: 24.0,
+ east: -66.0,
+ west: -125.0
+ }
+ end
+
+ defp load_markers_in_bounds(socket) do
+ bounds = socket.assigns.map_bounds
+
+ # Don't load if we don't have proper bounds yet
+ if bounds == default_bounds() do
+ socket
+ else
+ socket = assign(socket, :loading, true)
+
+ # Fetch recent packets within bounds
+ packets = fetch_packets_in_bounds(bounds, @max_markers)
+
+ # Convert packets to marker data and send to client
+ markers = Enum.map(packets, &packet_to_marker_data/1)
+
+ # Clear existing markers and add new ones
+ socket =
+ socket
+ |> push_event("clear_markers", %{})
+ |> push_event("add_markers", %{markers: markers})
+ |> update_active_markers(packets)
+ |> assign(:loading, false)
+
+ socket
+ end
+ end
+
+ defp fetch_packets_in_bounds(bounds, limit) do
+ cutoff_time = DateTime.add(DateTime.utc_now(), -@packet_retention_minutes * 60, :second)
+
+ Repo.all(
+ from(p in Packet,
+ where: p.has_position == true,
+ where: p.received_at >= ^cutoff_time,
+ where: p.lat >= ^bounds["south"],
+ where: p.lat <= ^bounds["north"],
+ where: p.lon >= ^bounds["west"],
+ where: p.lon <= ^bounds["east"],
+ order_by: [desc: p.received_at],
+ limit: ^limit
+ )
+ )
+ end
+
+ defp packet_to_marker_data(packet) do
+ data_extended = packet.data_extended || %{}
+ callsign = packet.base_callsign <> if packet.ssid, do: "-#{packet.ssid}", else: ""
+
+ %{
+ id: callsign,
+ callsign: callsign,
+ lat: packet.lat,
+ lng: packet.lon,
+ symbol_table: data_extended["symbol_table_id"] || "/",
+ symbol_code: data_extended["symbol_code"] || ">",
+ historical: false,
+ popup: build_popup_content(packet, callsign, false)
+ }
+ end
+
+ defp build_popup_content(packet, callsign, historical) do
+ data_extended = packet.data_extended || %{}
+
+ timestamp =
+ if historical do
+ DateTime.to_string(packet.received_at)
+ else
+ packet.received_at |> DateTime.to_time() |> Time.to_string()
+ end
+
+ """
+
+
#{callsign} #{if historical, do: "(Historical)", else: ""}
+
+ Position: #{Float.round(packet.lat, 4)}°, #{Float.round(packet.lon, 4)}°
+ Type: #{packet.data_type}
+ #{if data_extended["comment"], do: "Comment: #{data_extended["comment"]}
", else: ""}
+ Path: #{packet.path}
+ Time: #{timestamp}
+
+