Map cargado y funcionando

map con estaciones
primer test solo igate
2026-07-07 10:21:09 +02:00 · 2026-06-12 00:09:02 -04:00 · 2026-06-11 23:59:24 -04:00 · 2026-06-11 22:15:37 -04:00
7 changed files with 349 additions and 5 deletions
@@ -7,6 +7,7 @@
        <title>LoRa iGate & Digi software &minus; Ricardo Guzman CA2RXU</title>
        <link rel="stylesheet" href="/bootstrap.css" />
        <link rel="stylesheet" href="/style.css" />
+        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
        <link rel="icon" href="/favicon.png" type="image/x-icon">
    <script>(function(){try{var t=localStorage.getItem("igateTheme");if(!t)t=window.matchMedia&&window.matchMedia("(prefers-color-scheme: light)").matches?"light":"dark";var r=document.documentElement;if(t==="night"){r.setAttribute("data-bs-theme","dark");r.setAttribute("data-variant","night");}else{r.setAttribute("data-bs-theme",t);}}catch(e){}})();</script>
 <style>
@@ -182,6 +183,7 @@ body{background:var(--msh-bg);color:var(--msh-text);font-family:"Inter",system-u
 <button class="side-link" type="button" data-target="sec-administration"><span class="side-ico"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16"><path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/></svg></span><span class="label">Administration</span></button>
 <button class="side-link" type="button" data-target="sec-about"><span class="side-ico"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16"><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/></svg></span><span class="label">About / Info</span></button>
    <div class="side-sep"></div>
+<button class="side-link" type="button" data-target="sec-maps"><span class="side-ico"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16"><path d="M15.817.113A.5.5 0 0 1 16 .5v14a.5.5 0 0 1-.402.49l-5 1a.5.5 0 0 1-.196 0L5.5 15.01l-4.902.98A.5.5 0 0 1 0 15.5v-14a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0L10.5.99l4.902-.98a.5.5 0 0 1 .415.103M10 1.91l-4-.8v12.98l4 .8zm1 12.98 4-.8V1.11l-4 .8zm-6-.8V1.11l-4 .8v12.98z"/></svg></span><span class="label">Map</span></button>
 <button class="side-link" type="button" id="rpToggle"><span class="side-ico"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/></svg></span><span class="label">Received Packets</span></button>
 <a href="/received-packets" id="rpDummy" style="display:none" aria-hidden="true"></a>
 <a class="side-link side-ota" href="/update"><span class="side-ico"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16"><path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2m2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0z"/></svg></span><span class="label">Update OTA</span></a>
@@ -211,6 +213,15 @@ body{background:var(--msh-bg);color:var(--msh-text);font-family:"Inter",system-u
                <hr>
            </div>
    <div id="configuration">
+<section class="panel-section" id="sec-maps">
+                        <div class="row my-5">
+                            <div class="col-12">
+                                <h3>Stations Map</h3>
+                                <div id="map" style="height:70vh;border-radius:14px;"></div>
+                                <small>Needs internet (OpenStreetMap tiles). Updates every 15 seconds. Stations heard in the last hour.</small>
+                            </div>
+                        </div>
+</section>
 <section class="panel-section active" id="sec-station">

                        <div class="row my-5 d-flex align-items-top">
@@ -2371,6 +2382,7 @@ body{background:var(--msh-bg);color:var(--msh-text);font-family:"Inter",system-u
        </div>
    </body>
    <script src="/bootstrap.js"></script>
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script src="/script.js"></script>
 </html>
 <script>
@@ -2391,6 +2403,7 @@ body{background:var(--msh-bg);color:var(--msh-text);font-family:"Inter",system-u
      document.querySelectorAll(".panel-section").forEach(function(s){s.classList.remove("active");});
      b.classList.add("active");var el=document.getElementById(b.dataset.target);if(el)el.classList.add("active");
      showConfig();
+      if(b.dataset.target==="sec-maps"&&window.showMap)window.showMap();
    });
  });
  var rpBtn=document.getElementById("rpToggle");
@@ -640,4 +640,165 @@ document.querySelector('a[href="/received-packets"]').addEventListener('click',
    document.querySelector('button[type=submit]').remove();

    fetchReceivedPackets();
-})
+})
+
+
+/* ---------- Stations Map (Leaflet, CDN) ---------- */
+
+let mapInstance    = null;
+let mapMarkers     = null;
+let mapTimer       = null;
+let mapTileErrShown = false;
+let iGateLatLng    = null;
+let mapAutoFitDone = false;
+
+function setMapMessage(text) {
+    const el = document.getElementById("map");
+    if (el) {
+        el.innerHTML = `<div style="display:flex;align-items:center;justify-content:center;height:100%;color:var(--msh-text-dim,#8b949e);text-align:center;padding:20px;">${text}</div>`;
+    }
+}
+
+function loadMapStations(stations) {
+    if (!mapMarkers) return;
+
+    mapMarkers.clearLayers();
+
+    let drawn = 0;
+    (stations || []).forEach((s) => {
+        if (s.lat === 0 && s.lon === 0) return;     // descartar estaciones sin fix
+
+        const popup = `<b>${s.callsign}</b>`
+            + (s.lastHeard ? `<br>Last: ${s.lastHeard}` : "")
+            + `<br>RSSI ${s.RSSI} / SNR ${s.SNR}`
+            + `<br>Packets: ${s.count}`;
+
+        L.circleMarker([s.lat, s.lon], {
+            radius: 6,
+            color: "#1d6fe0",        // borde
+            weight: 2,
+            fillColor: "#3b8cff",    // relleno
+            fillOpacity: 0.9
+        }).bindPopup(popup).addTo(mapMarkers);
+        drawn++;
+    });
+
+    if (!mapAutoFitDone && drawn > 0) {             // auto-fit la 1ª vez que hay estaciones tras abrir
+        fitMapToStations();
+        mapAutoFitDone = true;
+    }
+}
+
+// Encuadra el mapa para que entren todas las estaciones (+ el iGate). 100% navegador.
+function fitMapToStations() {
+    if (!mapInstance) return false;
+
+    const pts = [];
+    if (mapMarkers) {
+        mapMarkers.eachLayer((layer) => {
+            if (layer.getLatLng) pts.push(layer.getLatLng());
+        });
+    }
+    if (iGateLatLng) pts.push(iGateLatLng);
+
+    if (!pts.length) return false;
+    mapInstance.fitBounds(L.latLngBounds(pts), { padding: [30, 30], maxZoom: 14 });
+    return true;
+}
+
+function fetchMapStations() {
+    fetch("/stations.json")
+    .then((response) => response.json())
+    .then((stations) => {
+        loadMapStations(stations);
+    })
+    .catch((err) => {
+        console.error(err);
+
+        console.error(`Failed to load stations`);
+    });
+}
+
+window.showMap = function () {
+    if (typeof L === "undefined") {                 // sin internet el CDN de Leaflet no cargó
+        setMapMessage("Map unavailable &mdash; no internet connection.<br>The map needs internet to load (OpenStreetMap).");
+        return;
+    }
+
+    mapAutoFitDone = false;                          // re-encuadrar en cada apertura del Map
+
+    if (!mapInstance) {
+        mapInstance = L.map("map");
+
+        const tiles = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+            maxZoom: 19,
+            attribution: "&copy; OpenStreetMap"
+        }).addTo(mapInstance);
+
+        tiles.on("tileerror", function () {         // tiles no cargan (sin salida a internet)
+            if (!mapTileErrShown) {
+                mapTileErrShown = true;
+                if (window.showToast) showToast("Map tiles could not load — check internet connection.");
+            }
+        });
+
+        mapMarkers = L.layerGroup().addTo(mapInstance);
+
+        const FitControl = L.Control.extend({       // botón "Fit All Stations" (control nativo de Leaflet)
+            options: { position: "topright" },
+            onAdd: function () {
+                const btn = L.DomUtil.create("button", "");
+                btn.type = "button";
+                btn.title = "Fit all stations";
+                btn.textContent = "Fit All Stations";
+                btn.style.cssText = "background:#fff;color:#333;border:2px solid rgba(0,0,0,.2);border-radius:4px;padding:5px 9px;cursor:pointer;font:600 12px sans-serif;box-shadow:0 1px 4px rgba(0,0,0,.3);";
+                L.DomEvent.on(btn, "click", (e) => {
+                    L.DomEvent.stop(e);
+                    fitMapToStations();
+                });
+                return btn;
+            }
+        });
+        mapInstance.addControl(new FitControl());
+
+        fetch("/configuration.json")                // centrar y marcar el iGate
+        .then((response) => response.json())
+        .then((config) => {
+            const lat = (config.beacon && config.beacon.latitude)  || 0;
+            const lon = (config.beacon && config.beacon.longitude) || 0;
+            const callsign = config.callsign || "iGate";
+            mapInstance.setView([lat, lon], (lat || lon) ? 12 : 2);
+
+            if (lat || lon) {                       // rombo rojo en la posición del iGate
+                iGateLatLng = L.latLng(lat, lon);   // guardar para incluirlo en el auto-fit
+                const iGateIcon = L.divIcon({
+                    className: "igate-marker",
+                    html: '<div style="width:14px;height:14px;background:#e23b3b;border:2px solid #fff;transform:rotate(45deg);box-shadow:0 0 4px rgba(0,0,0,.6);"></div>',
+                    iconSize: [18, 18],
+                    iconAnchor: [9, 9]
+                });
+                L.marker([lat, lon], { icon: iGateIcon })
+                    .bindPopup(`<b>${callsign}</b><br>This station`)
+                    .addTo(mapInstance);        // directo al mapa: no se borra en los refrescos
+            }
+        })
+        .catch(() => {
+            mapInstance.setView([0, 0], 2);
+        });
+    }
+
+    setTimeout(function () {                         // el div estuvo oculto: recalcular tamaño
+        if (mapInstance) mapInstance.invalidateSize();
+    }, 0);
+
+    fetchMapStations();
+
+    if (mapTimer) clearInterval(mapTimer);
+
+    mapTimer = setInterval(function () {            // refrescar solo si la sección está visible
+        const section = document.getElementById("sec-maps");
+        if (section && section.classList.contains("active")) {
+            fetchMapStations();
+        }
+    }, 15000);
+}
@@ -0,0 +1,45 @@
+/* Copyright (C) 2025 Ricardo Guzman - CA2RXU
+ *
+ * This file is part of LoRa APRS iGate.
+ *
+ * LoRa APRS iGate is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * LoRa APRS iGate is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with LoRa APRS iGate. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+#ifndef MAP_UTILS_H_
+#define MAP_UTILS_H_
+
+#include <Arduino.h>
+#include <vector>
+
+
+struct MapStation {
+    char     callsign[10];      // "XX9XXX-NN" + null  -> clave para deduplicar
+    float    latitude;          // grados decimales (+N / -S)
+    float    longitude;         // grados decimales (+E / -W)
+    char     symbol[3];         // tabla + codigo APRS (ej "/>"), "" si no hay
+    int16_t  rssi;              // ultimo RSSI
+    float    snr;               // ultimo SNR
+    uint16_t count;             // nro de paquetes oidos de esa estacion
+    char     lastHeard[10];     // "HH:MM:SS" si hay NTP valido, "" si no
+    uint32_t lastHeardMillis;   // millis() -> ordenar / expirar (no se muestra)
+};
+
+namespace MAP_Utils {
+
+    void    upsert(const String& callsign, float latitude, float longitude, const String& symbol, int rssi, float snr);
+    String  getStationsJson();
+
+}
+
+#endif
@@ -68,8 +68,8 @@ ___________________________________________________________________*/
 #endif


-String              versionDate             = "2026-06-11";
-String              versionNumber           = "3.3.0";
+String              versionDate             = "2026-06-12";
+String              versionNumber           = "4.0.0";
 Configuration       Config;
 WiFiClient          aprsIsClient;
 WiFiClient          mqttClient;
@@ -16,6 +16,7 @@
 * along with LoRa APRS iGate. If not, see <https://www.gnu.org/licenses/>.
 */

+#include <APRSPacketLib.h>
 #include <RadioLib.h>
 #include "configuration.h"
 #include "network_manager.h"
@@ -23,13 +24,12 @@
 #include "station_utils.h"
 #include "board_pinout.h"
 #include "syslog_utils.h"
+#include "map_utils.h"
 #include "ntp_utils.h"
 #include "display.h"
 #include "utils.h"


-
-
 extern Configuration    Config;
 extern NetworkManager   *networkManager;
 extern bool             packetIsBeacon;
@@ -280,6 +280,11 @@ namespace LoRa_Utils {
                                receivedPacket.RSSI     = rssi;
                                receivedPacket.SNR      = snr;
                                receivedPackets.push_back(receivedPacket);
+
+                                APRSPacket aprsPacket = APRSPacketLib::processReceivedPacket(packet.substring(3), rssi, snr, freqError);
+                                if (aprsPacket.type == 0 || aprsPacket.type == 4) {   // 0 = GPS, 4 = Mic-E (los que traen posición)
+                                    MAP_Utils::upsert(aprsPacket.sender, aprsPacket.latitude, aprsPacket.longitude, aprsPacket.overlay + aprsPacket.symbol, aprsPacket.rssi, aprsPacket.snr);
+                                }
                            }

                            if (Config.syslog.active && networkManager->isConnected()) {
@@ -0,0 +1,114 @@
+/* Copyright (C) 2025 Ricardo Guzman - CA2RXU
+ *
+ * This file is part of LoRa APRS iGate.
+ *
+ * LoRa APRS iGate is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * LoRa APRS iGate is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with LoRa APRS iGate. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+#include <ArduinoJson.h>
+#include "map_utils.h"
+#include "ntp_utils.h"
+
+#define MAX_MAP_STATIONS    50
+#define STATION_TTL_MS      3600000UL   // 1 hora (en milisegundos)
+
+
+std::vector<MapStation> mapStations;
+
+
+namespace MAP_Utils {
+
+    // Copia la hora NTP "HH:MM:SS" si es valida; si no hay red (NTP devuelve
+    // un texto de fallback) deja el campo vacio para no guardar hora falsa.
+    void writeFormatedTime(char* dst, size_t size) {
+        String t = NTP_Utils::getFormatedTime();
+        if (t.length() == 8 && t.charAt(2) == ':') {
+            t.toCharArray(dst, size);
+        } else {
+            dst[0] = '\0';
+        }
+    }
+
+    // Inserta una estacion nueva o actualiza la existente (dedup por callsign).
+    // Llamar solo cuando el parser ya decodifico una posicion valida.
+    void upsert(const String& callsign, float latitude, float longitude, const String& symbol, int rssi, float snr) {
+        for (auto &s : mapStations) {                       // 1) ya existe -> actualizar
+            if (callsign.equals(s.callsign)) {
+                s.latitude  = latitude;
+                s.longitude = longitude;
+                s.rssi      = rssi;
+                s.snr       = snr;
+                s.count++;
+                symbol.toCharArray(s.symbol, sizeof(s.symbol));
+                writeFormatedTime(s.lastHeard, sizeof(s.lastHeard));
+                s.lastHeardMillis = millis();
+                return;
+            }
+        }
+
+        if (mapStations.size() >= MAX_MAP_STATIONS) {       // 2) llena -> descartar la mas vieja
+            size_t oldest = 0;
+            for (size_t i = 1; i < mapStations.size(); i++) {
+                if (mapStations[i].lastHeardMillis < mapStations[oldest].lastHeardMillis) {
+                    oldest = i;
+                }
+            }
+            mapStations.erase(mapStations.begin() + oldest);
+        }
+
+        MapStation st = {};                                 // 3) insertar nueva
+        callsign.toCharArray(st.callsign, sizeof(st.callsign));
+        symbol.toCharArray(st.symbol, sizeof(st.symbol));
+        st.latitude  = latitude;
+        st.longitude = longitude;
+        st.rssi      = rssi;
+        st.snr       = snr;
+        st.count     = 1;
+        writeFormatedTime(st.lastHeard, sizeof(st.lastHeard));
+        st.lastHeardMillis = millis();
+        mapStations.push_back(st);
+    }
+
+    void purgeOldStations() {
+        uint32_t now = millis();
+        for (int i = (int)mapStations.size() - 1; i >= 0; i--) {
+            if (now - mapStations[i].lastHeardMillis > STATION_TTL_MS) {
+                mapStations.erase(mapStations.begin() + i);
+            }
+        }
+    }
+
+    String getStationsJson() {
+        purgeOldStations();
+        JsonDocument data;
+
+        for (size_t i = 0; i < mapStations.size(); i++) {
+            data[i]["callsign"]  = mapStations[i].callsign;
+            data[i]["lat"]       = mapStations[i].latitude;
+            data[i]["lon"]       = mapStations[i].longitude;
+            data[i]["symbol"]    = mapStations[i].symbol;
+            data[i]["RSSI"]      = mapStations[i].rssi;
+            data[i]["SNR"]       = mapStations[i].snr;
+            data[i]["count"]     = mapStations[i].count;
+            data[i]["lastHeard"] = mapStations[i].lastHeard;
+        }
+
+        String buffer;
+
+        serializeJson(data, buffer);
+
+        return buffer;
+    }
+
+}
@@ -20,6 +20,7 @@
 #include "configuration.h"
 #include "ota_utils.h"
 #include "web_utils.h"
+#include "map_utils.h"
 #include "display.h"
 #include "utils.h"

@@ -114,6 +115,10 @@ namespace WEB_Utils {
        request->send(200, "application/json", buffer);
    }

+    void handleStations(AsyncWebServerRequest *request) {
+        request->send(200, "application/json", MAP_Utils::getStationsJson());
+    }
+
    void handleWriteConfiguration(AsyncWebServerRequest *request) {
        Serial.println("Got new Configuration Data from www");

@@ -363,6 +368,7 @@ namespace WEB_Utils {
            server.on("/", HTTP_GET, handleHome);
            server.on("/status", HTTP_GET, handleStatus);
            server.on("/received-packets.json", HTTP_GET, handleReceivedPackets);
+            server.on("/stations.json", HTTP_GET, handleStations);
            server.on("/configuration.json", HTTP_GET, handleReadConfiguration);
            server.on("/configuration.json", HTTP_POST, handleWriteConfiguration);
            server.on("/action", HTTP_POST, handleAction);
Author	SHA1	Message	Date
Ricardo Guzman (Richonguzman)	96d7be6ffc	Map cargado y funcionando	2026-06-12 00:09:02 -04:00
Ricardo Guzman (Richonguzman)	94df6d2e8f	map con estaciones	2026-06-11 23:59:24 -04:00
Ricardo Guzman (Richonguzman)	0a222edeb8	primer test solo igate	2026-06-11 22:15:37 -04:00