v1.3 release

# Conflicts:
#	templates/about.html
#	templates/add_spot.html
#	templates/alerts.html
#	templates/bands.html
#	templates/base.html
#	templates/conditions.html
#	templates/map.html
#	templates/spots.html
#	templates/status.html

README.md

@@ -10,7 +10,7 @@ The API is deliberately well-defined with an OpenAPI specification and auto-gene
 
 Spothole itself is also open source, Public Domain licenced code that anyone can take and modify.
 
-Supported data sources include DX Clusters, the Reverse Beacon Network (RBN), the APRS Internet Service (APRS-IS), POTA, SOTA, WWFF, GMA, WWBOTA, HEMA, Parks 'n' Peaks, ZLOTA, WOTA, BOTA, LLOTA, WWTOTA, the UK Packet Repeater Network, NG3K, and any site based on the xOTA software by nischu.
+Supported data sources include DX Clusters, the Reverse Beacon Network (RBN), the APRS Internet Service (APRS-IS), POTA, SOTA, WWFF, GMA, WWBOTA, HEMA, Parks 'n' Peaks, ZLOTA, WOTA, BOTA, LLOTA, WWTOTA, Tiles on the Air, the UK Packet Repeater Network, NG3K, and any site based on the xOTA software by nischu.
 
 ![Screenshot](/images/screenshot2.png)
 
@@ -34,20 +34,23 @@ These are supplied with the URL to the page you want to embed, for example for a
 
 The supported parameters are as follows. Generally these match the equivalent parameters in the real Spothole API, where a mapping exists.
 
-| Name           | Allowed Values          | Default | Example                 | Description                                                                                                                                                           |
+| Name              | Allowed Values          | Default | Example                        | Description                                                                                                                                                           |
-|----------------|-------------------------|---------|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+|-------------------|-------------------------|---------|--------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `embedded`     | `true`, `false`         | `false` | `?embedded=true`        | Enables embedded mode.                                                                                                                                                |
+| `embedded`        | `true`, `false`         | `false` | `?embedded=true`               | Enables embedded mode.                                                                                                                                                |
-| `color-scheme` | `light`, `dark`, `auto` | `auto`  | `?color-scheme=dark`    | Forces light or dark mode in preference to the operating system default.                                                                                              |
+| `color-scheme`    | `light`, `dark`, `auto` | `auto`  | `?color-scheme=dark`           | Forces light or dark mode in preference to the operating system default.                                                                                              |
-| `time-zone`    | `UTC`, `local`          | `UTC`   | `?time-zone=local`      | Sets times to be in UTC or local time.                                                                                                                                |
+| `time-zone`       | `UTC`, `local`          | `UTC`   | `?time-zone=local`             | Sets times to be in UTC or local time.                                                                                                                                |
-| `limit`        | 10, 25, 50, 100         | 50      | `?limit=50`             | Sets the number of spots that will be displayed on the main spots page                                                                                                |
+| `limit`           | 10, 25, 50, 100         | 50      | `?limit=50`                    | Sets the number of spots that will be displayed on the main spots page                                                                                                |
-| `limit`        | 25, 50, 100, 200, 500   | 100     | `?limit=100`            | Sets the number of alerts that will be displayed on the alerts page                                                                                                   |
+| `limit`           | 25, 50, 100, 200, 500   | 100     | `?limit=100`                   | Sets the number of alerts that will be displayed on the alerts page                                                                                                   |
-| `max_age`      | 300, 600, 1800, 3600    | 1800    | `?max_age=1800`         | Sets the maximum age of spots displayed on the map and bands pages, in seconds.                                                                                       |
+| `max_age`         | 300, 600, 1800, 3600    | 1800    | `?max_age=1800`                | Sets the maximum age of spots displayed on the map and bands pages, in seconds.                                                                                       |
-| `band`         | Comma-separated list    | (all)   | `?band=20m,40m`         | Sets the list of bands that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface.         |
+| `band`            | Comma-separated list    | (all)   | `?band=20m,40m`                | Sets the list of bands that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface.         |
-| `sig`          | Comma-separated list    | (all)   | `?sig=POTA,SOTA,NO_SIG` | Sets the list of SIGs that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface.          |
+| `sig`             | Comma-separated list    | (all)   | `?sig=POTA,SOTA,NO_SIG`        | Sets the list of SIGs that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface.          |
-| `source`       | Comma-separated list    | (all)   | `?source=Cluster`       | Sets the list of sources that will be shown on any spot or alert pages. Available options match the labels of the buttons in the standard web interface.              |
+| `source`          | Comma-separated list    | (all)   | `?source=Cluster`              | Sets the list of sources that will be shown on any spot or alert pages. Available options match the labels of the buttons in the standard web interface.              |
-| `mode_type`    | Comma-separated list    | (all)   | `?mode_type=PHONE,CW`   | Sets the list of mode types that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface.    |
+| `mode_type`       | Comma-separated list    | (all)   | `?mode_type=PHONE,CW`          | Sets the list of mode types that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface.    |
-| `dx_continent` | Comma-separated list    | (all)   | `?dx_continent=NA,SA`   | Sets the list of DX Continents that will be shown on any spot or alert pages. Available options match the labels of the buttons in the standard web interface.        |
+| `dx_continent`    | Comma-separated list    | (all)   | `?dx_continent=NA,SA`          | Sets the list of DX Continents that will be shown on any spot or alert pages. Available options match the labels of the buttons in the standard web interface.        |
-| `de_continent` | Comma-separated list    | (all)   | `?de_continent=EU`      | Sets the list of DE Continents that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface. |
+| `de_continent`    | Comma-separated list    | (all)   | `?de_continent=EU`             | Sets the list of DE Continents that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface. |
+| `map-center-lat`  | Numeric (decimal)       | (auto)  | `?map-center-lat=51.5`         | Sets the initial latitude of the map centre on the map page. If omitted, the map auto-fits to the loaded spots.                                                       |
+| `map-center-lon`  | Numeric (decimal)       | (auto)  | `?map-center-lon=-0.1`         | Sets the initial longitude of the map centre on the map page. If omitted, the map auto-fits to the loaded spots.                                                      |
+| `map-zoom`        | Numeric (integer)       | (auto)  | `?map-zoom=6`                  | Sets the initial zoom level of the map on the map page. If omitted, the map auto-fits to the loaded spots.                                                            |
 
 More will be added soon to allow customisation of filters and other display properties.
 

alertproviders/http_alert_provider.py

@@ -40,7 +40,7 @@ class HTTPAlertProvider(AlertProvider):
         try:
             # Request data from API
             logging.debug("Polling " + self.name + " alert API...")
-            http_response = requests.get(self._url, headers=HTTP_HEADERS)
+            http_response = requests.get(self._url, headers=HTTP_HEADERS, timeout=(5, 30))
             # Pass off to the subclass for processing
             new_alerts = self._http_response_to_alerts(http_response)
             # Submit the new alerts for processing. There might not be any alerts for the less popular programs.

alertproviders/ng3k.py

@@ -68,9 +68,9 @@ class NG3K(HTTPAlertProvider):
 
             dx_country = parts[1]
             qsl_info = parts[3]
-            bands = extra_parts[1]
+            bands = extra_parts[1] if len(extra_parts) > 1 else ""
-            modes = extra_parts[2] if len(extra_parts) > 3 else ""
+            modes = extra_parts[2] if len(extra_parts) > 2 else ""
-            comment = extra_parts[-1]
+            comment = extra_parts[3] if len(extra_parts) > 3 else ""
 
             # Convert to our alert format
             alert = Alert(source=self.name,

config-example.yml

@@ -60,6 +60,10 @@ spot-providers:
     class: "WWTOTA"
     name: "WWTOTA"
     enabled: true
+  -
+    class: "Tiles"
+    name: "Tiles"
+    enabled: true
   -
     class: "APRSIS"
     name: "APRS-IS"
@@ -179,6 +183,10 @@ solar-condition-providers:
     class: "NOAA3dayForecast"
     name: "NOAA 3-day Forecast"
     enabled: true
+  -
+    class: "GIROIonosonde"
+    name: "GIRO Ionosonde Data"
+    enabled: true
 
 # Port to open the local web server on
 web-server-port: 8080
@@ -188,15 +196,6 @@ web-server-port: 8080
 max-spot-age-sec: 3600
 max-alert-age-sec: 604800
 
-# Login for QRZ.com to look up information. Optional. You will need an "XML Subscriber" (paid) package to retrieve all
-# the data for a callsign via their system.
-qrz-username: ""
-qrz-password: ""
-
-# Login for HamQTH to look up information. Optional.
-hamqth-username: ""
-hamqth-password: ""
-
 # API key for Clublog to look up information. Optional. You sill need to request one via their helpdesk portal if you
 # want to use callsign lookups from Clublog.
 clublog-api-key: ""

core/constants.py

@@ -4,7 +4,7 @@ from data.sig import SIG
 
 # General software
 SOFTWARE_NAME = "Spothole by M0TRT"
-SOFTWARE_VERSION = "1.3-pre"
+SOFTWARE_VERSION = "1.3"
 
 # HTTP headers used for spot providers that use HTTP
 HTTP_HEADERS = {"User-Agent": SOFTWARE_NAME + ", v" + SOFTWARE_VERSION + " (operated by " + SERVER_OWNER_CALLSIGN + ")"}
@@ -30,6 +30,7 @@ SIGS = [
     SIG(name="KRMNPA", description="Keith Roget Memorial National Parks Award"),
     SIG(name="LLOTA", description="Lagos y Lagunas on the Air", ref_regex=r"[A-Z]{2}\-\d{4}"),
     SIG(name="WWTOTA", description="Towers on the Air", ref_regex=r"[A-Z]{2}R\-\d{4}"),
+    SIG(name="Tiles", description="Tiles on the Air", ref_regex=r"[A-Za-z]{2}[0-9]{2}[A-Za-z]{2}"),
     SIG(name="WAB", description="Worked All Britain", ref_regex=r"[A-Z]{1,2}[0-9]{2}"),
     SIG(name="WAI", description="Worked All Ireland", ref_regex=r"[A-Z][0-9]{2}"),
     SIG(name="TOTA", description="Toilets on the Air", ref_regex=r"T\-[0-9]{2}")
@@ -61,17 +62,17 @@ MODE_ALIASES = {
 BANDS = [
     Band(name="2200m", start_freq=135700, end_freq=137800),
     Band(name="600m", start_freq=472000, end_freq=479000),
-    Band(name="160m", start_freq=1800000, end_freq=2000000),
+    Band(name="160m", start_freq=1800000, end_freq=2000000, is_ham_hf=True),
-    Band(name="80m", start_freq=3500000, end_freq=4000000),
+    Band(name="80m", start_freq=3500000, end_freq=4000000, is_ham_hf=True),
-    Band(name="60m", start_freq=5250000, end_freq=5410000),
+    Band(name="60m", start_freq=5250000, end_freq=5410000, is_ham_hf=True),
-    Band(name="40m", start_freq=7000000, end_freq=7300000),
+    Band(name="40m", start_freq=7000000, end_freq=7300000, is_ham_hf=True),
-    Band(name="30m", start_freq=10100000, end_freq=10150000),
+    Band(name="30m", start_freq=10100000, end_freq=10150000, is_ham_hf=True),
-    Band(name="20m", start_freq=14000000, end_freq=14350000),
+    Band(name="20m", start_freq=14000000, end_freq=14350000, is_ham_hf=True),
-    Band(name="17m", start_freq=18068000, end_freq=18168000),
+    Band(name="17m", start_freq=18068000, end_freq=18168000, is_ham_hf=True),
-    Band(name="15m", start_freq=21000000, end_freq=21450000),
+    Band(name="15m", start_freq=21000000, end_freq=21450000, is_ham_hf=True),
-    Band(name="12m", start_freq=24890000, end_freq=24990000),
+    Band(name="12m", start_freq=24890000, end_freq=24990000, is_ham_hf=True),
     Band(name="11m", start_freq=26965000, end_freq=27405000),
-    Band(name="10m", start_freq=28000000, end_freq=29700000),
+    Band(name="10m", start_freq=28000000, end_freq=29700000, is_ham_hf=True),
     Band(name="6m", start_freq=50000000, end_freq=54000000),
     Band(name="5m", start_freq=56000000, end_freq=60500000),
     Band(name="4m", start_freq=70000000, end_freq=70500000),

core/lookup_helper.py

@@ -5,6 +5,7 @@ import re
 import urllib.parse
 from datetime import timedelta
 
+import requests
 import xmltodict
 from diskcache import Cache
 from pyhamtools import LookupLib, Callinfo, callinfo
@@ -17,6 +18,38 @@ from core.cache_utils import SEMI_STATIC_URL_DATA_CACHE
 from core.config import config
 from core.constants import BANDS, UNKNOWN_BAND, CW_MODES, PHONE_MODES, DATA_MODES, ALL_MODES, \
     HTTP_HEADERS, HAMQTH_PRG, MODE_ALIASES
+from data.lookup_credentials import LookupCredentials
+
+# QRZ XML field names differ from pyhamtools' normalised names; map them here.
+_QRZ_FIELD_MAP = {
+    "lat": "latitude",
+    "lon": "longitude",
+    "grid": "locator",
+    "ituzone": "ituz",
+    "cqzone": "cqz",
+}
+_QRZ_INT_FIELDS = {"adif", "cqz", "ituz"}
+_QRZ_FLOAT_FIELDS = {"latitude", "longitude"}
+
+
+def _normalize_qrz_data(raw):
+    data = {}
+    for k, v in raw.items():
+        if v is None:
+            continue
+        mapped_key = _QRZ_FIELD_MAP.get(k, k)
+        if mapped_key in _QRZ_INT_FIELDS:
+            try:
+                v = int(v)
+            except (ValueError, TypeError):
+                pass
+        elif mapped_key in _QRZ_FLOAT_FIELDS:
+            try:
+                v = float(v)
+            except (ValueError, TypeError):
+                pass
+        data[mapped_key] = v
+    return data
 
 
 class LookupHelper:
@@ -36,9 +69,10 @@ class LookupHelper:
         self._clublog_cty_xml_cache = None
         self._clublog_api_key = None
         self._qrz_callsign_data_cache = None
-        self._lookup_lib_qrz = None
+        self._qrz_base_url = "https://xmldata.qrz.com/xml/current/"
-        self._qrz_available = None
+        # QRZ session keys expire after an hour; cache the login response for 55 minutes.
-        self._hamqth_available = None
+        self._qrz_session_cache = CachedSession("cache/qrz_session_cache",
+                                                expire_after=timedelta(minutes=55))
         self._hamqth_callsign_data_cache = None
         self._hamqth_base_url = "https://www.hamqth.com/xml.php"
         # HamQTH session keys expire after an hour. Rather than working out how much time has passed manually, we cheat
@@ -67,13 +101,8 @@ class LookupHelper:
             self._lookup_lib_basic = LookupLib(lookuptype="countryfile")
         self._call_info_basic = Callinfo(self._lookup_lib_basic)
 
-        self._qrz_available = config["qrz-username"] != "" and config["qrz-password"] != ""
-        if self._qrz_available:
-            self._lookup_lib_qrz = LookupLib(lookuptype="qrz", username=config["qrz-username"],
-                                             pwd=config["qrz-password"])
         self._qrz_callsign_data_cache = Cache('cache/qrz_callsign_lookup_cache')
 
-        self._hamqth_available = config["hamqth-username"] != "" and config["hamqth-password"] != ""
         self._hamqth_callsign_data_cache = Cache('cache/hamqth_callsign_lookup_cache')
 
         self._clublog_api_key = config["clublog-api-key"]
@@ -166,7 +195,7 @@ class LookupHelper:
             logging.error("Exception when downloading Clublog cty.xml", e)
             return False
 
-    def infer_country_from_callsign(self, call):
+    def infer_country_from_callsign(self, call, credentials=None):
         """Infer a country name from a callsign"""
 
         try:
@@ -176,12 +205,12 @@ class LookupHelper:
             country = None
         # Couldn't get anything from basic call info database, try QRZ.com
         if not country:
-            qrz_data = self._get_qrz_data_for_callsign(call)
+            qrz_data = self._get_qrz_data_for_callsign(call, credentials)
             if qrz_data and "country" in qrz_data:
                 country = qrz_data["country"]
         # Couldn't get anything from QRZ.com database, try HamQTH
         if not country:
-            hamqth_data = self._get_hamqth_data_for_callsign(call)
+            hamqth_data = self._get_hamqth_data_for_callsign(call, credentials)
             if hamqth_data and "country" in hamqth_data:
                 country = hamqth_data["country"]
         # Couldn't get anything from HamQTH database, try Clublog data
@@ -200,7 +229,7 @@ class LookupHelper:
                 country = dxcc_data["name"]
         return country
 
-    def infer_dxcc_id_from_callsign(self, call):
+    def infer_dxcc_id_from_callsign(self, call, credentials=None):
         """Infer a DXCC ID from a callsign"""
 
         try:
@@ -210,12 +239,12 @@ class LookupHelper:
             dxcc = None
         # Couldn't get anything from basic call info database, try QRZ.com
         if not dxcc:
-            qrz_data = self._get_qrz_data_for_callsign(call)
+            qrz_data = self._get_qrz_data_for_callsign(call, credentials)
             if qrz_data and "adif" in qrz_data:
                 dxcc = qrz_data["adif"]
         # Couldn't get anything from QRZ.com database, try HamQTH
         if not dxcc:
-            hamqth_data = self._get_hamqth_data_for_callsign(call)
+            hamqth_data = self._get_hamqth_data_for_callsign(call, credentials)
             if hamqth_data and "adif" in hamqth_data:
                 dxcc = hamqth_data["adif"]
         # Couldn't get anything from HamQTH database, try Clublog data
@@ -234,7 +263,7 @@ class LookupHelper:
                 dxcc = dxcc_data["entityCode"]
         return dxcc
 
-    def infer_continent_from_callsign(self, call):
+    def infer_continent_from_callsign(self, call, credentials=None):
         """Infer a continent shortcode from a callsign"""
 
         try:
@@ -244,7 +273,7 @@ class LookupHelper:
             continent = None
         # Couldn't get anything from basic call info database, try HamQTH
         if not continent:
-            hamqth_data = self._get_hamqth_data_for_callsign(call)
+            hamqth_data = self._get_hamqth_data_for_callsign(call, credentials)
             if hamqth_data and "continent" in hamqth_data:
                 continent = hamqth_data["continent"]
         # Couldn't get anything from HamQTH database, try Clublog data
@@ -264,7 +293,7 @@ class LookupHelper:
                 continent = dxcc_data["continent"][0]
         return continent
 
-    def infer_cq_zone_from_callsign(self, call):
+    def infer_cq_zone_from_callsign(self, call, credentials=None):
         """Infer a CQ zone from a callsign"""
 
         try:
@@ -274,12 +303,12 @@ class LookupHelper:
             cqz = None
         # Couldn't get anything from basic call info database, try QRZ.com
         if not cqz:
-            qrz_data = self._get_qrz_data_for_callsign(call)
+            qrz_data = self._get_qrz_data_for_callsign(call, credentials)
             if qrz_data and "cqz" in qrz_data:
                 cqz = qrz_data["cqz"]
         # Couldn't get anything from QRZ.com database, try HamQTH
         if not cqz:
-            hamqth_data = self._get_hamqth_data_for_callsign(call)
+            hamqth_data = self._get_hamqth_data_for_callsign(call, credentials)
             if hamqth_data and "cq" in hamqth_data:
                 cqz = hamqth_data["cq"]
         # Couldn't get anything from HamQTH database, try Clublog data
@@ -299,7 +328,7 @@ class LookupHelper:
                 cqz = dxcc_data["cq"][0]
         return cqz
 
-    def infer_itu_zone_from_callsign(self, call):
+    def infer_itu_zone_from_callsign(self, call, credentials=None):
         """Infer a ITU zone from a callsign"""
 
         try:
@@ -309,12 +338,12 @@ class LookupHelper:
             ituz = None
         # Couldn't get anything from basic call info database, try QRZ.com
         if not ituz:
-            qrz_data = self._get_qrz_data_for_callsign(call)
+            qrz_data = self._get_qrz_data_for_callsign(call, credentials)
             if qrz_data and "ituz" in qrz_data:
                 ituz = qrz_data["ituz"]
         # Couldn't get anything from QRZ.com database, try HamQTH
         if not ituz:
-            hamqth_data = self._get_hamqth_data_for_callsign(call)
+            hamqth_data = self._get_hamqth_data_for_callsign(call, credentials)
             if hamqth_data and "itu" in hamqth_data:
                 ituz = hamqth_data["itu"]
         # Couldn't get anything from HamQTH database, Clublog doesn't provide this, so try DXCC data
@@ -330,31 +359,31 @@ class LookupHelper:
 
         return self._dxcc_data[dxcc]["flag"] if dxcc in self._dxcc_data else None
 
-    def infer_name_from_callsign_online_lookup(self, call):
+    def infer_name_from_callsign_online_lookup(self, call, credentials=None):
         """Infer an operator name from a callsign (requires QRZ.com/HamQTH)"""
 
-        data = self._get_qrz_data_for_callsign(call)
+        data = self._get_qrz_data_for_callsign(call, credentials)
         if data and "fname" in data:
             name = data["fname"]
             if "name" in data:
                 name = name + " " + data["name"]
             return name
-        data = self._get_hamqth_data_for_callsign(call)
+        data = self._get_hamqth_data_for_callsign(call, credentials)
         if data and "nick" in data:
             return data["nick"]
         else:
             return None
 
-    def infer_latlon_from_callsign_online_lookup(self, call):
+    def infer_latlon_from_callsign_online_lookup(self, call, credentials=None):
         """Infer a latitude and longitude from a callsign (requires QRZ.com/HamQTH)
         Coordinates that look default are rejected (apologies if your position really is 0,0, enjoy your voyage)"""
 
-        data = self._get_qrz_data_for_callsign(call)
+        data = self._get_qrz_data_for_callsign(call, credentials)
         if data and "latitude" in data and "longitude" in data and (
                 float(data["latitude"]) != 0 or float(data["longitude"]) != 0) and -89.9 < float(
                 data["latitude"]) < 89.9:
             return [float(data["latitude"]), float(data["longitude"])]
-        data = self._get_hamqth_data_for_callsign(call)
+        data = self._get_hamqth_data_for_callsign(call, credentials)
         if data and "latitude" in data and "longitude" in data and (
                 float(data["latitude"]) != 0 or float(data["longitude"]) != 0) and -89.9 < float(
                 data["latitude"]) < 89.9:
@@ -362,28 +391,28 @@ class LookupHelper:
         else:
             return None
 
-    def infer_grid_from_callsign_online_lookup(self, call):
+    def infer_grid_from_callsign_online_lookup(self, call, credentials=None):
         """Infer a grid locator from a callsign (requires QRZ.com/HamQTH).
         Grids that look default are rejected (apologies if your grid really is AA00aa, enjoy your research)"""
 
-        data = self._get_qrz_data_for_callsign(call)
+        data = self._get_qrz_data_for_callsign(call, credentials)
         if data and "locator" in data and data["locator"].upper() != "AA00" and data["locator"].upper() != "AA00AA" and \
                 data["locator"].upper() != "AA00AA00":
             return data["locator"]
-        data = self._get_hamqth_data_for_callsign(call)
+        data = self._get_hamqth_data_for_callsign(call, credentials)
         if data and "grid" in data and data["grid"].upper() != "AA00" and data["grid"].upper() != "AA00AA" and data[
             "grid"].upper() != "AA00AA00":
             return data["grid"]
         else:
             return None
 
-    def infer_qth_from_callsign_online_lookup(self, call):
+    def infer_qth_from_callsign_online_lookup(self, call, credentials=None):
         """Infer a textual QTH from a callsign (requires QRZ.com/HamQTH)"""
 
-        data = self._get_qrz_data_for_callsign(call)
+        data = self._get_qrz_data_for_callsign(call, credentials)
         if data and "addr2" in data:
             return data["addr2"]
-        data = self._get_hamqth_data_for_callsign(call)
+        data = self._get_hamqth_data_for_callsign(call, credentials)
         if data and "qth" in data:
             return data["qth"]
         else:
@@ -422,79 +451,116 @@ class LookupHelper:
             logging.debug("Invalid lat/lon received for DXCC")
         return grid
 
-    def _get_qrz_data_for_callsign(self, call):
+    def _get_qrz_data_for_callsign(self, call, credentials):
-        """Utility method to get QRZ.com data from cache if possible, if not get it from the API and cache it"""
+        """Utility method to get QRZ.com data from cache if possible, if not get it from the API and cache it.
+        Returns None immediately if no credentials are provided."""
 
-        # Fetch from cache if we can, otherwise fetch from the API and cache it
+        # Return from cache if available (a cached None means 'not found in QRZ')
         if call in self._qrz_callsign_data_cache:
             return self._qrz_callsign_data_cache.get(call)
-        elif self._qrz_available:
+
+        # Obtain session key from credentials
+        session_key = None
+        if credentials and credentials.qrz_session_key:
+            session_key = credentials.qrz_session_key
+        elif credentials and credentials.qrz_username and credentials.qrz_password:
             try:
-                data = self._lookup_lib_qrz.lookup_callsign(callsign=call)
+                login_response = self._qrz_session_cache.get(
-                self._qrz_callsign_data_cache.add(call, data, expire=604800)  # 1 week in seconds
+                    self._qrz_base_url + "?username=" + urllib.parse.quote_plus(credentials.qrz_username) +
-                return data
+                    "&password=" + urllib.parse.quote_plus(credentials.qrz_password) + "&agent=spothole",
-            except (KeyError, ValueError):
+                    headers=HTTP_HEADERS).content
-                # QRZ had no info for the call, but maybe it had prefixes or suffixes. Try again with the base call.
+                login_data = xmltodict.parse(login_response)
-                try:
+                session = login_data.get("QRZDatabase", {}).get("Session", {})
-                    data = self._lookup_lib_qrz.lookup_callsign(callsign=callinfo.Callinfo.get_homecall(call))
+                if "Key" in session:
-                    self._qrz_callsign_data_cache.add(call, data, expire=604800)  # 1 week in seconds
+                    session_key = session["Key"]
-                    return data
+                else:
-                except (KeyError, ValueError):
+                    logging.warning("QRZ.com login details incorrect, failed to look up with QRZ.")
-                    # QRZ had no info for the call, that's OK. Cache a None so we don't try to look this up again
-                    self._qrz_callsign_data_cache.add(call, None, expire=604800)  # 1 week in seconds
                     return None
             except Exception:
-                # General exception like a timeout when communicating with QRZ. Return None this time, but don't cache
+                logging.error("Exception when getting QRZ.com session key")
-                # that, so we can try again next time.
-                logging.error("Exception when looking up QRZ data")
                 return None
-        else:
+
+        if not session_key:
             return None
 
-    def _get_hamqth_data_for_callsign(self, call):
+        # Try the call as given, then fall back to the base call (strips /P, /M etc.)
-        """Utility method to get HamQTH data from cache if possible, if not get it from the API and cache it"""
+        calls_to_try = [call]
+        home_call = callinfo.Callinfo.get_homecall(call)
+        if home_call != call:
+            calls_to_try.append(home_call)
 
-        # Fetch from cache if we can, otherwise fetch from the API and cache it
+        for lookup_call in calls_to_try:
+            try:
+                lookup_response = requests.get(
+                    self._qrz_base_url + "?s=" + session_key + "&callsign=" + urllib.parse.quote_plus(lookup_call),
+                    headers=HTTP_HEADERS, timeout=10).content
+                raw = xmltodict.parse(lookup_response).get("QRZDatabase", {}).get("Callsign")
+                if raw:
+                    data = _normalize_qrz_data(raw)
+                    self._qrz_callsign_data_cache.add(call, data, expire=604800)  # 1 week in seconds
+                    return data
+            except (KeyError, ValueError):
+                continue
+            except Exception:
+                logging.error("Exception when looking up QRZ data")
+                return None
+
+        # Not found in QRZ; cache None so we don't keep retrying
+        self._qrz_callsign_data_cache.add(call, None, expire=604800)  # 1 week in seconds
+        return None
+
+    def _get_hamqth_data_for_callsign(self, call, credentials):
+        """Utility method to get HamQTH data from cache if possible, if not get it from the API and cache it.
+        Returns None immediately if no credentials are provided."""
+
+        # Return from cache if available
         if call in self._hamqth_callsign_data_cache:
             return self._hamqth_callsign_data_cache.get(call)
-        elif self._hamqth_available:
+
+        # Obtain session ID from credentials
+        session_id = None
+        if credentials and credentials.hamqth_session_id:
+            session_id = credentials.hamqth_session_id
+        elif credentials and credentials.hamqth_username and credentials.hamqth_password:
             try:
-                # First we need to log in and get a session token.
                 session_data = self._hamqth_session_lookup_cache.get(
-                    self._hamqth_base_url + "?u=" + urllib.parse.quote_plus(config["hamqth-username"]) +
+                    self._hamqth_base_url + "?u=" + urllib.parse.quote_plus(credentials.hamqth_username) +
-                    "&p=" + urllib.parse.quote_plus(config["hamqth-password"]), headers=HTTP_HEADERS).content
+                    "&p=" + urllib.parse.quote_plus(credentials.hamqth_password), headers=HTTP_HEADERS).content
                 dict_data = xmltodict.parse(session_data)
                 if "session_id" in dict_data["HamQTH"]["session"]:
                     session_id = dict_data["HamQTH"]["session"]["session_id"]
-
-                    # Now look up the actual data.
-                    try:
-                        lookup_data = SEMI_STATIC_URL_DATA_CACHE.get(
-                            self._hamqth_base_url + "?id=" + session_id + "&callsign=" + urllib.parse.quote_plus(
-                                call) + "&prg=" + HAMQTH_PRG, headers=HTTP_HEADERS).content
-                        data = xmltodict.parse(lookup_data)["HamQTH"]["search"]
-                        self._hamqth_callsign_data_cache.add(call, data, expire=604800)  # 1 week in seconds
-                        return data
-                    except (KeyError, ValueError):
-                        # HamQTH had no info for the call, but maybe it had prefixes or suffixes. Try again with the base call.
-                        try:
-                            lookup_data = SEMI_STATIC_URL_DATA_CACHE.get(
-                                self._hamqth_base_url + "?id=" + session_id + "&callsign=" + urllib.parse.quote_plus(
-                                    callinfo.Callinfo.get_homecall(call)) + "&prg=" + HAMQTH_PRG,
-                                headers=HTTP_HEADERS).content
-                            data = xmltodict.parse(lookup_data)["HamQTH"]["search"]
-                            self._hamqth_callsign_data_cache.add(call, data, expire=604800)  # 1 week in seconds
-                            return data
-                        except (KeyError, ValueError):
-                            # HamQTH had no info for the call, that's OK. Cache a None so we don't try to look this up again
-                            self._hamqth_callsign_data_cache.add(call, None, expire=604800)  # 1 week in seconds
-                            return None
-
                 else:
                     logging.warning("HamQTH login details incorrect, failed to look up with HamQTH.")
-            except:
+                    return None
+            except Exception:
+                logging.error("Exception when getting HamQTH session ID")
+                return None
+
+        if not session_id:
+            return None
+
+        # Try the call as given, then fall back to the base call (strips /P, /M etc.)
+        calls_to_try = [call]
+        home_call = callinfo.Callinfo.get_homecall(call)
+        if home_call != call:
+            calls_to_try.append(home_call)
+
+        for lookup_call in calls_to_try:
+            try:
+                lookup_data = SEMI_STATIC_URL_DATA_CACHE.get(
+                    self._hamqth_base_url + "?id=" + session_id + "&callsign=" + urllib.parse.quote_plus(
+                        lookup_call) + "&prg=" + HAMQTH_PRG, headers=HTTP_HEADERS).content
+                data = xmltodict.parse(lookup_data)["HamQTH"]["search"]
+                self._hamqth_callsign_data_cache.add(call, data, expire=604800)  # 1 week in seconds
+                return data
+            except (KeyError, ValueError):
+                continue
+            except Exception:
                 logging.error("Exception when looking up HamQTH data")
                 return None
+
+        # Not found in HamQTH; cache None so we don't keep retrying
+        self._hamqth_callsign_data_cache.add(call, None, expire=604800)  # 1 week in seconds
         return None
 
     def _get_clublog_api_data_for_callsign(self, call):
@@ -551,6 +617,7 @@ class LookupHelper:
         """Shutdown method to close down any caches neatly."""
 
         self._qrz_callsign_data_cache.close()
+        self._hamqth_callsign_data_cache.close()
         self._clublog_callsign_data_cache.close()
 
 

core/sig_utils.py

@@ -70,27 +70,24 @@ def populate_sig_ref_info(sig_ref):
         elif sig.upper() == "WWFF":
             wwff_csv_data = SEMI_STATIC_URL_DATA_CACHE.get("https://wwff.co/wwff-data/wwff_directory.csv",
                                                            headers=HTTP_HEADERS)
-            wwff_dr = csv.DictReader(wwff_csv_data.content.decode().splitlines())
+            wwff_index = {row["reference"]: row for row in csv.DictReader(wwff_csv_data.content.decode().splitlines())}
-            for row in wwff_dr:
+            row = wwff_index.get(ref_id)
-                if row["reference"] == ref_id:
+            if row:
-                    sig_ref.name = row["name"] if "name" in row else None
+                sig_ref.name = row["name"] if "name" in row else None
-                    sig_ref.url = "https://wwff.co/directory/?showRef=" + ref_id
+                sig_ref.url = "https://wwff.co/directory/?showRef=" + ref_id
-                    sig_ref.grid = row["iaruLocator"] if "iaruLocator" in row and row["iaruLocator"] != "-" else None
+                sig_ref.grid = row["iaruLocator"] if "iaruLocator" in row and row["iaruLocator"] != "-" else None
-                    sig_ref.latitude = float(row["latitude"]) if "latitude" in row and row["latitude"] != "-" else None
+                sig_ref.latitude = float(row["latitude"]) if "latitude" in row and row["latitude"] != "-" else None
-                    sig_ref.longitude = float(row["longitude"]) if "longitude" in row and row[
+                sig_ref.longitude = float(row["longitude"]) if "longitude" in row and row["longitude"] != "-" else None
-                        "longitude"] != "-" else None
-                    break
         elif sig.upper() == "SIOTA":
             siota_csv_data = SEMI_STATIC_URL_DATA_CACHE.get("https://www.silosontheair.com/data/silos.csv",
                                                             headers=HTTP_HEADERS)
-            siota_dr = csv.DictReader(siota_csv_data.content.decode().splitlines())
+            siota_index = {row["SILO_CODE"]: row for row in csv.DictReader(siota_csv_data.content.decode().splitlines())}
-            for row in siota_dr:
+            row = siota_index.get(ref_id)
-                if row["SILO_CODE"] == ref_id:
+            if row:
-                    sig_ref.name = row["NAME"] if "NAME" in row else None
+                sig_ref.name = row["NAME"] if "NAME" in row else None
-                    sig_ref.grid = row["LOCATOR"] if "LOCATOR" in row else None
+                sig_ref.grid = row["LOCATOR"] if "LOCATOR" in row else None
-                    sig_ref.latitude = float(row["LAT"]) if "LAT" in row else None
+                sig_ref.latitude = float(row["LAT"]) if "LAT" in row else None
-                    sig_ref.longitude = float(row["LNG"]) if "LNG" in row else None
+                sig_ref.longitude = float(row["LNG"]) if "LNG" in row else None
-                    break
         elif sig.upper() == "WOTA":
             data = SEMI_STATIC_URL_DATA_CACHE.get("https://www.wota.org.uk/mapping/data/summits.json",
                                                   headers=HTTP_HEADERS).json()
@@ -143,6 +140,16 @@ def populate_sig_ref_info(sig_ref):
             if not sig_ref.name:
                 sig_ref.name = sig_ref.id
             sig_ref.url = "https://wwtota.com/seznam/karta_rozhledny.php?ref=" + sig_ref.name
+        elif sig.upper() == "TILES":
+            # Tiles on the Air just uses Maidenhead 6-digit squares, so ID, Name and Grid are all the same
+            if not sig_ref.name:
+                sig_ref.name = sig_ref.id
+            if not sig_ref.grid:
+                sig_ref.grid = sig_ref.id
+            if sig_ref.grid and not sig_ref.latitude:
+                ll = locator_to_latlong(sig_ref.grid)
+                sig_ref.latitude = ll[0]
+                sig_ref.longitude = ll[1]
         elif sig.upper() == "WAB" or sig.upper() == "WAI":
             ll = wab_wai_square_to_lat_lon(ref_id)
             if ll:

data/alert.py

@@ -61,7 +61,7 @@ class Alert:
     # The ID the source gave it, if any.
     source_id: str = None
 
-    def infer_missing(self):
+    def infer_missing(self, credentials=None):
         """Infer missing parameters where possible"""
 
         # If we somehow don't have a start time, set it to zero so it sorts off the bottom of any list but
@@ -84,15 +84,15 @@ class Alert:
         # DX country, continent, zones etc. from callsign. CQ/ITU zone are better looked up with a location but we don't
         # have a real location for alerts.
         if self.dx_calls and self.dx_calls[0] and not self.dx_country:
-            self.dx_country = lookup_helper.infer_country_from_callsign(self.dx_calls[0])
+            self.dx_country = lookup_helper.infer_country_from_callsign(self.dx_calls[0], credentials)
         if self.dx_calls and self.dx_calls[0] and not self.dx_continent:
-            self.dx_continent = lookup_helper.infer_continent_from_callsign(self.dx_calls[0])
+            self.dx_continent = lookup_helper.infer_continent_from_callsign(self.dx_calls[0], credentials)
         if self.dx_calls and self.dx_calls[0] and not self.dx_cq_zone:
-            self.dx_cq_zone = lookup_helper.infer_cq_zone_from_callsign(self.dx_calls[0])
+            self.dx_cq_zone = lookup_helper.infer_cq_zone_from_callsign(self.dx_calls[0], credentials)
         if self.dx_calls and self.dx_calls[0] and not self.dx_itu_zone:
-            self.dx_itu_zone = lookup_helper.infer_itu_zone_from_callsign(self.dx_calls[0])
+            self.dx_itu_zone = lookup_helper.infer_itu_zone_from_callsign(self.dx_calls[0], credentials)
         if self.dx_calls and self.dx_calls[0] and not self.dx_dxcc_id:
-            self.dx_dxcc_id = lookup_helper.infer_dxcc_id_from_callsign(self.dx_calls[0])
+            self.dx_dxcc_id = lookup_helper.infer_dxcc_id_from_callsign(self.dx_calls[0], credentials)
         if self.dx_dxcc_id and not self.dx_flag:
             self.dx_flag = lookup_helper.get_flag_for_dxcc(self.dx_dxcc_id)
 
@@ -108,21 +108,25 @@ class Alert:
         if self.sig_refs and len(self.sig_refs) > 0 and self.sig_refs[0] and not self.sig:
             self.sig = self.sig_refs[0].sig
 
-        # DX operator details lookup, using QRZ.com. This should be the last resort compared to taking the data from
-        # the actual alertting service, e.g. we don't want to accidentally use a user's QRZ.com home lat/lon instead of
-        # the one from the park reference they're at.
-        if self.dx_calls and not self.dx_names:
-            self.dx_names = list(map(lambda c: lookup_helper.infer_name_from_callsign_online_lookup(c), self.dx_calls))
-
         # Always create an ID based on a hash of every parameter *except* received_time. This is used as the index
         # to a map, which as a byproduct avoids us having multiple duplicate copies of the object that are identical
         # apart from that they were retrieved from the API at different times. Note that the simple Python hash()
         # function includes a seed randomly generated at runtime; this is therefore not consistent between runs. But we
         # use diskcache to store our data between runs, so we use SHA256 which does not include this random element.
-        self_copy = copy.deepcopy(self)
+        # The ID is computed before the online lookups below so that it is stable regardless of whether credentials
-        self_copy.received_time = 0
+        # are provided, allowing the enriched API response to be matched to the stored alert by ID.
-        self_copy.received_time_iso = ""
+        if not self.id:
-        self.id = hashlib.sha256(str(self_copy).encode("utf-8")).hexdigest()
+            self_copy = copy.deepcopy(self)
+            self_copy.received_time = 0
+            self_copy.received_time_iso = ""
+            self.id = hashlib.sha256(str(self_copy).encode("utf-8")).hexdigest()
+
+        # DX operator details lookup, using QRZ.com/HamQTH. This should be the last resort compared to taking the data
+        # from the actual alerting service, e.g. we don't want to accidentally use a user's QRZ.com home lat/lon
+        # instead of the one from the park reference they're at.
+        if self.dx_calls and not self.dx_names:
+            self.dx_names = list(
+                map(lambda c: lookup_helper.infer_name_from_callsign_online_lookup(c, credentials), self.dx_calls))
 
     def to_json(self):
         """JSON serialise"""

data/band.py

@@ -11,3 +11,5 @@ class Band:
     start_freq: float
     # Stop frequency, in Hz
     end_freq: float
+    # Whether this is an HF amateur radio band
+    is_ham_hf: bool = False

data/lookup_credentials.py

@@ -0,0 +1,27 @@
+from dataclasses import dataclass
+
+
+@dataclass
+class LookupCredentials:
+    """Per-request credentials for QRZ.com and HamQTH online callsign lookups."""
+    qrz_username: str = ""
+    qrz_password: str = ""
+    qrz_session_key: str = ""      # alternative to username/password
+    hamqth_username: str = ""
+    hamqth_password: str = ""
+    hamqth_session_id: str = ""    # alternative to username/password
+
+
+def extract_credentials(query_params):
+    """Build a LookupCredentials from HTTP query params; returns None if no usable credentials are present."""
+    creds = LookupCredentials(
+        qrz_username=query_params.get("qrz_username", ""),
+        qrz_password=query_params.get("qrz_password", ""),
+        qrz_session_key=query_params.get("qrz_session_key", ""),
+        hamqth_username=query_params.get("hamqth_username", ""),
+        hamqth_password=query_params.get("hamqth_password", ""),
+        hamqth_session_id=query_params.get("hamqth_session_id", ""),
+    )
+    has_qrz = creds.qrz_session_key or (creds.qrz_username and creds.qrz_password)
+    has_hamqth = creds.hamqth_session_id or (creds.hamqth_username and creds.hamqth_password)
+    return creds if (has_qrz or has_hamqth) else None

data/solar_conditions.py

@@ -161,6 +161,9 @@ class SolarConditions:
     blackout_forecast_r1r2: dict = None
     # NOAA Radio Blackout (R3 or greater) probability forecast, keyed by UNIX timestamp of start of day UTC
     blackout_forecast_r3_or_greater: dict = None
+    # Ionosonde measurements from LGDC, dict keyed by URSI code, values are dicts with keys: ursi, name, fof2, muf, luf,
+    # band_states
+    ionosonde_data: dict = None
 
     # Derived values (populated by infer_descriptions())
     # HF radio blackout risk description, derived from xray
@@ -194,6 +197,7 @@ class SolarConditions:
         self.electron_flux_desc = _lookup_by_threshold(self.electron_flux, ELECTRON_FLUX_DESCRIPTIONS)
 
     def to_json(self):
-        """JSON serialise"""
+        """JSON serialise. Dict key order is insertion order (Python 3.7+ guarantee), so callers receive
+        fields in a predictable, logical sequence without relying on sort_keys."""
 
-        return json.dumps(self, default=lambda o: o.__dict__, sort_keys=True)
+        return json.dumps(self, default=lambda o: o.__dict__)

data/spot.py

@@ -12,8 +12,9 @@ from pyhamtools.locator import locator_to_latlong, latlong_to_locator
 from core.config import MAX_SPOT_AGE
 from core.constants import MODE_ALIASES
 from core.geo_utils import lat_lon_to_cq_zone, lat_lon_to_itu_zone
-from core.lookup_helper import lookup_helper, infer_band_from_freq, infer_mode_from_comment, infer_mode_from_frequency, \
+from core.lookup_helper import lookup_helper, infer_band_from_freq, infer_mode_from_comment, \
-    infer_mode_type_from_mode
+    infer_mode_from_frequency, infer_mode_type_from_mode
+from data.lookup_credentials import LookupCredentials
 from core.sig_utils import populate_sig_ref_info, ANY_SIG_REGEX, get_ref_regex_for_sig
 from data.sig_ref import SIGRef
 
@@ -131,7 +132,7 @@ class Spot:
     # The ID the source gave it, if any.
     source_id: str = None
 
-    def infer_missing(self):
+    def infer_missing(self, credentials=None):
         """Infer missing parameters where possible"""
 
         # If we somehow don't have a spot time, set it to zero so it sorts off the bottom of any list but
@@ -158,11 +159,11 @@ class Spot:
 
         # DX country, continent etc. from callsign
         if self.dx_call and not self.dx_country:
-            self.dx_country = lookup_helper.infer_country_from_callsign(self.dx_call)
+            self.dx_country = lookup_helper.infer_country_from_callsign(self.dx_call, credentials)
         if self.dx_call and not self.dx_continent:
-            self.dx_continent = lookup_helper.infer_continent_from_callsign(self.dx_call)
+            self.dx_continent = lookup_helper.infer_continent_from_callsign(self.dx_call, credentials)
         if self.dx_call and not self.dx_dxcc_id:
-            self.dx_dxcc_id = lookup_helper.infer_dxcc_id_from_callsign(self.dx_call)
+            self.dx_dxcc_id = lookup_helper.infer_dxcc_id_from_callsign(self.dx_call, credentials)
         if self.dx_dxcc_id and not self.dx_flag:
             self.dx_flag = lookup_helper.get_flag_for_dxcc(self.dx_dxcc_id)
 
@@ -192,11 +193,11 @@ class Spot:
         if self.de_call and any(char.isdigit() for char in self.de_call) and not (
                 self.de_call.startswith("T2") and self.source == "APRS-IS"):
             if not self.de_country:
-                self.de_country = lookup_helper.infer_country_from_callsign(self.de_call)
+                self.de_country = lookup_helper.infer_country_from_callsign(self.de_call, credentials)
             if not self.de_continent:
-                self.de_continent = lookup_helper.infer_continent_from_callsign(self.de_call)
+                self.de_continent = lookup_helper.infer_continent_from_callsign(self.de_call, credentials)
             if not self.de_dxcc_id:
-                self.de_dxcc_id = lookup_helper.infer_dxcc_id_from_callsign(self.de_call)
+                self.de_dxcc_id = lookup_helper.infer_dxcc_id_from_callsign(self.de_call, credentials)
             if self.de_dxcc_id and not self.de_flag:
                 self.de_flag = lookup_helper.get_flag_for_dxcc(self.de_dxcc_id)
 
@@ -306,27 +307,40 @@ class Spot:
         if self.comment and not self.qrt:
             self.qrt = "QRT" in self.comment.upper()
 
-        # DX operator details lookup, using QRZ.com. This should be the last resort compared to taking the data from
+        # Always create an ID based on a hash of every parameter *except* received_time. This is used as the index
-        # the actual spotting service, e.g. we don't want to accidentally use a user's QRZ.com home lat/lon instead of
+        # to a map, which as a byproduct avoids us having multiple duplicate copies of the object that are identical
-        # the one from the park reference they're at.
+        # apart from that they were retrieved from the API at different times. Note that the simple Python hash()
+        # function includes a seed randomly generated at runtime; this is therefore not consistent between runs. But we
+        # use diskcache to store our data between runs, so we use SHA256 which does not include this random element.
+        # The ID is computed before the online lookups below so that it is stable regardless of whether credentials
+        # are provided, allowing the enriched API response to be matched to the stored spot by ID.
+        if not self.id:
+            self_copy = copy.deepcopy(self)
+            self_copy.received_time = 0
+            self_copy.received_time_iso = ""
+            self.id = hashlib.sha256(str(self_copy).encode("utf-8")).hexdigest()
+
+        # DX operator details lookup, using QRZ.com/HamQTH. This should be the last resort compared to taking the data
+        # from the actual spotting service, e.g. we don't want to accidentally use a user's QRZ.com home lat/lon
+        # instead of the one from the park reference they're at.
         if self.dx_call and not self.dx_name:
-            self.dx_name = lookup_helper.infer_name_from_callsign_online_lookup(self.dx_call)
+            self.dx_name = lookup_helper.infer_name_from_callsign_online_lookup(self.dx_call, credentials)
         if self.dx_call and not self.dx_latitude:
-            latlon = lookup_helper.infer_latlon_from_callsign_online_lookup(self.dx_call)
+            latlon = lookup_helper.infer_latlon_from_callsign_online_lookup(self.dx_call, credentials)
             if latlon:
                 self.dx_latitude = latlon[0]
                 self.dx_longitude = latlon[1]
-            self.dx_grid = lookup_helper.infer_grid_from_callsign_online_lookup(self.dx_call)
+            self.dx_grid = lookup_helper.infer_grid_from_callsign_online_lookup(self.dx_call, credentials)
             self.dx_location_source = "HOME QTH"
 
-        # Determine a "QTH" string. If we have a SIG ref, pick the first one and turn it into a suitable stirng,
+        # Determine a "QTH" string. If we have a SIG ref, pick the first one and turn it into a suitable string,
         # otherwise see what they have set on an online lookup service.
         if self.sig_refs and len(self.sig_refs) > 0:
             self.dx_qth = self.sig_refs[0].id
             if self.sig_refs[0].name:
                 self.dx_qth = self.dx_qth + " " + self.sig_refs[0].name
         else:
-            self.dx_qth = lookup_helper.infer_qth_from_callsign_online_lookup(self.dx_call)
+            self.dx_qth = lookup_helper.infer_qth_from_callsign_online_lookup(self.dx_call, credentials)
 
         # Last resort for getting a DX position, use the DXCC entity.
         if self.dx_call and not self.dx_latitude:
@@ -352,12 +366,12 @@ class Spot:
             if self.dx_latitude:
                 self.dx_cq_zone = lat_lon_to_cq_zone(self.dx_latitude, self.dx_longitude)
             elif self.dx_call:
-                self.dx_cq_zone = lookup_helper.infer_cq_zone_from_callsign(self.dx_call)
+                self.dx_cq_zone = lookup_helper.infer_cq_zone_from_callsign(self.dx_call, credentials)
         if not self.dx_itu_zone:
             if self.dx_latitude:
                 self.dx_itu_zone = lat_lon_to_itu_zone(self.dx_latitude, self.dx_longitude)
             elif self.dx_call:
-                self.dx_itu_zone = lookup_helper.infer_itu_zone_from_callsign(self.dx_call)
+                self.dx_itu_zone = lookup_helper.infer_itu_zone_from_callsign(self.dx_call, credentials)
 
         # DX Location is "good" if it is from a spot, or from QRZ if the callsign doesn't contain a slash, so the operator
         # is likely at home.
@@ -369,13 +383,13 @@ class Spot:
         # DE with no digits and APRS servers starting "T2" are not things we can look up location for
         if self.de_call and any(char.isdigit() for char in self.de_call) and not (
                 self.de_call.startswith("T2") and self.source == "APRS-IS"):
-            # DE operator position lookup, using QRZ.com.
+            # DE operator position lookup, using QRZ.com/HamQTH.
             if not self.de_latitude:
-                latlon = lookup_helper.infer_latlon_from_callsign_online_lookup(self.de_call)
+                latlon = lookup_helper.infer_latlon_from_callsign_online_lookup(self.de_call, credentials)
                 if latlon:
                     self.de_latitude = latlon[0]
                     self.de_longitude = latlon[1]
-                self.de_grid = lookup_helper.infer_grid_from_callsign_online_lookup(self.de_call)
+                self.de_grid = lookup_helper.infer_grid_from_callsign_online_lookup(self.de_call, credentials)
 
             # Last resort for getting a DE position, use the DXCC entity.
             if not self.de_latitude:
@@ -385,16 +399,6 @@ class Spot:
                     self.de_longitude = latlon[1]
                     self.de_grid = lookup_helper.infer_grid_from_callsign_dxcc(self.de_call)
 
-        # Always create an ID based on a hash of every parameter *except* received_time. This is used as the index
-        # to a map, which as a byproduct avoids us having multiple duplicate copies of the object that are identical
-        # apart from that they were retrieved from the API at different times. Note that the simple Python hash()
-        # function includes a seed randomly generated at runtime; this is therefore not consistent between runs. But we
-        # use diskcache to store our data between runs, so we use SHA256 which does not include this random element.
-        self_copy = copy.deepcopy(self)
-        self_copy.received_time = 0
-        self_copy.received_time_iso = ""
-        self.id = hashlib.sha256(str(self_copy).encode("utf-8")).hexdigest()
-
     def to_json(self):
         """JSON serialise"""
 

datafiles/didbase-stations.csv

@@ -0,0 +1,42 @@
+AA343,"Almaty, Kazakhstan"
+AL945,"Alpena, United States"
+AT138,"Athens, Greece"
+AU930,"Austin, United States"
+BR52P,"Brisbane, Australia"
+BVJ03,"Boa Vista, Brazil"
+CAJ2M,"Cachoeira Paulista, Brazil"
+CB53N,"Canberra, Australia"
+CGK21,"Campo Grande, Brazil"
+DB049,"Dourbes, Belgium"
+DW41K,"Darwin, Australia"
+EA036,"El Arenosillo, Spain"
+EB040,"Roquetes, Spain"
+EG931,"Eglin Air Force Base, United States"
+FF051,"Fairford, United Kingdom"
+GA762,"Gakona, United States"
+GM037,"Gibilmanna, Italy"
+GR13L,"Grahamstown, South Africa"
+HE13N,"Hermanus, South Africa"
+HO54K,"Hobart, Australia"
+IC437,"I-Cheon, South Korea"
+IF843,"Idaho National Laboratory, United States"
+JI91J,"Jicamarca, Peru"
+JR055,"Juliusruh, Germany"
+LAA38,"Lajes Terceira Island, Portugal"
+LL721,"Lualualei, United States"
+LM42B,"Learmonth, Australia"
+LV12P,"Louisvale, South Africa"
+MHJ45,"Millstone Hill, United States"
+ML10L,"Malindi, Kenya"
+NI135,"Nicosia, Cyprus"
+NI63_,"Norfolk, Australia"
+PA836,"Portt Arguello, United States"
+PE43K,"Perth, Australia"
+PF765,"Poker Flat, United States"
+PQ052,"Pruhonice, Czechia"
+RO041,"Rome, Italy"
+SAA0K,"Saoluis, Brazil"
+SO148,"Sopron, Hungary"
+TR169,"Tromso, Norway"
+TV51R,"Townsville, Australia"
+VT139,"San Vito, Italy"

server/handlers/api/addspot.py

@@ -41,8 +41,7 @@ class APISpotHandler(tornado.web.RequestHandler):
                 return
 
             # Reject if format not json
-            if 'Content-Type' not in self.request.headers or self.request.headers.get(
+            if not self.request.headers.get('Content-Type', '').startswith("application/json"):
-                    'Content-Type') != "application/json":
                 self.set_status(415)
                 self.write(
                     json.dumps("Error - request Content-Type must be application/json", default=serialize_everything))
@@ -139,7 +138,7 @@ class APISpotHandler(tornado.web.RequestHandler):
 
         except Exception as e:
             logging.error(e)
-            self.write(json.dumps("Error - " + str(e), default=serialize_everything))
+            self.write(json.dumps("Error - an internal server error occurred.", default=serialize_everything))
             self.set_status(500)
             self.set_header("Cache-Control", "no-store")
             self.set_header("Content-Type", "application/json")

server/handlers/api/alerts.py

@@ -1,3 +1,4 @@
+import copy
 import json
 import logging
 from datetime import datetime
@@ -9,6 +10,8 @@ import tornado_eventsource.handler
 
 from core.prometheus_metrics_handler import api_requests_counter
 from core.utils import serialize_everything, empty_queue
+from data.lookup_credentials import extract_credentials
+
 
 SSE_HANDLER_MAX_QUEUE_SIZE = 100
 SSE_HANDLER_QUEUE_CHECK_INTERVAL = 5000
@@ -21,6 +24,15 @@ class APIAlertsHandler(tornado.web.RequestHandler):
         self._alerts = alerts
         self._web_server_metrics = web_server_metrics
 
+    @staticmethod
+    def _enrich(alerts, credentials):
+        enriched = []
+        for alert in alerts:
+            alert_copy = copy.deepcopy(alert)
+            alert_copy.infer_missing(credentials)
+            enriched.append(alert_copy)
+        return enriched
+
     def get(self):
         try:
             # Metrics
@@ -33,8 +45,11 @@ class APIAlertsHandler(tornado.web.RequestHandler):
             # reduce that to just the first entry, and convert bytes to string
             query_params = {k: v[0].decode("utf-8") for k, v in self.request.arguments.items()}
 
-            # Fetch all alerts matching the query
+            # Fetch all alerts matching the query, then optionally enrich with online data
+            credentials = extract_credentials(query_params)
             data = get_alert_list_with_filters(self._alerts, query_params)
+            if credentials:
+                data = self._enrich(data, credentials)
             self.write(json.dumps(data, default=serialize_everything))
             self.set_status(200)
         except ValueError as e:
@@ -43,7 +58,7 @@ class APIAlertsHandler(tornado.web.RequestHandler):
             self.set_status(400)
         except Exception as e:
             logging.error(e)
-            self.write(json.dumps("Error - " + str(e), default=serialize_everything))
+            self.write(json.dumps("Error - an internal server error occurred.", default=serialize_everything))
             self.set_status(500)
         self.set_header("Cache-Control", "no-store")
         self.set_header("Content-Type", "application/json")
@@ -73,6 +88,7 @@ class APIAlertsStreamHandler(tornado_eventsource.handler.EventSourceHandler):
             # request.arguments contains lists for each param key because technically the client can supply multiple,
             # reduce that to just the first entry, and convert bytes to string
             self._query_params = {k: v[0].decode("utf-8") for k, v in self.request.arguments.items()}
+            self._credentials = extract_credentials(self._query_params)
 
             # Create a alert queue and add it to the web server's list. The web server will fill this when alerts arrive
             self._alert_queue = Queue(maxsize=SSE_HANDLER_MAX_QUEUE_SIZE)
@@ -110,6 +126,9 @@ class APIAlertsStreamHandler(tornado_eventsource.handler.EventSourceHandler):
                     alert = self._alert_queue.get()
                     # If the new alert matches our param filters, send it to the client. If not, ignore it.
                     if alert_allowed_by_query(alert, self._query_params):
+                        if self._credentials:
+                            alert = copy.deepcopy(alert)
+                            alert.infer_missing(self._credentials)
                         self.write_message(msg=json.dumps(alert, default=serialize_everything))
 
                 if self._alert_queue not in self._sse_alert_queues:

server/handlers/api/lookups.py

@@ -11,6 +11,7 @@ from core.geo_utils import lat_lon_for_grid_sw_corner_plus_size, lat_lon_to_cq_z
 from core.prometheus_metrics_handler import api_requests_counter
 from core.sig_utils import get_ref_regex_for_sig, populate_sig_ref_info
 from core.utils import serialize_everything
+from data.lookup_credentials import extract_credentials
 from data.sig_ref import SIGRef
 from data.spot import Spot
 
@@ -39,8 +40,9 @@ class APILookupCallHandler(tornado.web.RequestHandler):
                 if re.match(r"^[A-Z0-9/\-]*$", call):
                     # Take the callsign, make a "fake spot" so we can run infer_missing() on it, then repack the
                     # resulting data in the correct way for the API response.
+                    credentials = extract_credentials(query_params)
                     fake_spot = Spot(dx_call=call)
-                    fake_spot.infer_missing()
+                    fake_spot.infer_missing(credentials)
                     data = {
                         "call": call,
                         "name": fake_spot.dx_name,
@@ -68,7 +70,7 @@ class APILookupCallHandler(tornado.web.RequestHandler):
 
         except Exception as e:
             logging.error(e)
-            self.write(json.dumps("Error - " + str(e), default=serialize_everything))
+            self.write(json.dumps("Error - an internal server error occurred.", default=serialize_everything))
             self.set_status(500)
 
         self.set_header("Cache-Control", "no-store")
@@ -117,7 +119,7 @@ class APILookupSIGRefHandler(tornado.web.RequestHandler):
 
         except Exception as e:
             logging.error(e)
-            self.write(json.dumps("Error - " + str(e), default=serialize_everything))
+            self.write(json.dumps("Error - an internal server error occurred.", default=serialize_everything))
             self.set_status(500)
 
         self.set_header("Cache-Control", "no-store")
@@ -175,7 +177,7 @@ class APILookupGridHandler(tornado.web.RequestHandler):
 
         except Exception as e:
             logging.error(e)
-            self.write(json.dumps("Error - " + str(e), default=serialize_everything))
+            self.write(json.dumps("Error - an internal server error occurred.", default=serialize_everything))
             self.set_status(500)
 
         self.set_header("Cache-Control", "no-store")

server/handlers/api/spots.py

@@ -1,3 +1,4 @@
+import copy
 import json
 import logging
 from datetime import datetime, timedelta
@@ -9,6 +10,8 @@ import tornado_eventsource.handler
 
 from core.prometheus_metrics_handler import api_requests_counter
 from core.utils import serialize_everything, empty_queue
+from data.lookup_credentials import extract_credentials
+
 
 SSE_HANDLER_MAX_QUEUE_SIZE = 1000
 SSE_HANDLER_QUEUE_CHECK_INTERVAL = 5000
@@ -21,6 +24,15 @@ class APISpotsHandler(tornado.web.RequestHandler):
         self._spots = spots
         self._web_server_metrics = web_server_metrics
 
+    @staticmethod
+    def _enrich(spots, credentials):
+        enriched = []
+        for spot in spots:
+            spot_copy = copy.deepcopy(spot)
+            spot_copy.infer_missing(credentials)
+            enriched.append(spot_copy)
+        return enriched
+
     def get(self):
         try:
             # Metrics
@@ -33,8 +45,11 @@ class APISpotsHandler(tornado.web.RequestHandler):
             # reduce that to just the first entry, and convert bytes to string
             query_params = {k: v[0].decode("utf-8") for k, v in self.request.arguments.items()}
 
-            # Fetch all spots matching the query
+            # Fetch all spots matching the query, then optionally enrich with online data
+            credentials = extract_credentials(query_params)
             data = get_spot_list_with_filters(self._spots, query_params)
+            if credentials:
+                data = self._enrich(data, credentials)
             self.write(json.dumps(data, default=serialize_everything))
             self.set_status(200)
         except ValueError as e:
@@ -43,7 +58,7 @@ class APISpotsHandler(tornado.web.RequestHandler):
             self.set_status(400)
         except Exception as e:
             logging.error(e)
-            self.write(json.dumps("Error - " + str(e), default=serialize_everything))
+            self.write(json.dumps("Error - an internal server error occurred.", default=serialize_everything))
             self.set_status(500)
         self.set_header("Cache-Control", "no-store")
         self.set_header("Content-Type", "application/json")
@@ -75,6 +90,7 @@ class APISpotsStreamHandler(tornado_eventsource.handler.EventSourceHandler):
             # request.arguments contains lists for each param key because technically the client can supply multiple,
             # reduce that to just the first entry, and convert bytes to string
             self._query_params = {k: v[0].decode("utf-8") for k, v in self.request.arguments.items()}
+            self._credentials = extract_credentials(self._query_params)
 
             # Create a spot queue and add it to the web server's list. The web server will fill this when spots arrive
             self._spot_queue = Queue(maxsize=SSE_HANDLER_MAX_QUEUE_SIZE)
@@ -112,6 +128,9 @@ class APISpotsStreamHandler(tornado_eventsource.handler.EventSourceHandler):
                     spot = self._spot_queue.get()
                     # If the new spot matches our param filters, send it to the client. If not, ignore it.
                     if spot_allowed_by_query(spot, self._query_params):
+                        if self._credentials:
+                            spot = copy.deepcopy(spot)
+                            spot.infer_missing(self._credentials)
                         self.write_message(msg=json.dumps(spot, default=serialize_everything))
 
                 if self._spot_queue not in self._sse_spot_queues:

server/handlers/pagetemplate.py

@@ -11,11 +11,12 @@ from core.prometheus_metrics_handler import page_requests_counter
 class PageTemplateHandler(tornado.web.RequestHandler):
     """Handler for all HTML pages generated from templates"""
 
-    def initialize(self, template_name, web_server_metrics, has_hamqsl=False, has_noaa_forecast=False):
+    def initialize(self, template_name, web_server_metrics, has_hamqsl=False, has_noaa_forecast=False, has_giro_ionosonde=False):
         self._template_name = template_name
         self._web_server_metrics = web_server_metrics
         self._has_hamqsl = has_hamqsl
         self._has_noaa_forecast = has_noaa_forecast
+        self._has_giro_ionosonde = has_giro_ionosonde
 
     def get(self):
         # Metrics
@@ -27,4 +28,5 @@ class PageTemplateHandler(tornado.web.RequestHandler):
         # Load named template, and provide variables used in templates
         self.render(self._template_name + ".html", software_version=SOFTWARE_VERSION, allow_spotting=ALLOW_SPOTTING,
                     web_ui_options=WEB_UI_OPTIONS, baseurl=BASE_URL, current_path=self.request.path,
-                    has_hamqsl=self._has_hamqsl, has_noaa_forecast=self._has_noaa_forecast)
+                    has_hamqsl=self._has_hamqsl, has_noaa_forecast=self._has_noaa_forecast,
+                    has_giro_ionosonde=self._has_giro_ionosonde)

server/webserver.py

@@ -57,8 +57,9 @@ class WebServer:
         provider_classes = [type(p).__name__ for p in self._solar_condition_providers if p.enabled]
         has_hamqsl = "HamQSL" in provider_classes
         has_noaa_forecast = "NOAA3dayForecast" in provider_classes
+        has_giro_ionosonde = "GIROIonosonde" in provider_classes
         page_opts = {"web_server_metrics": self.web_server_metrics, "has_hamqsl": has_hamqsl,
-                     "has_noaa_forecast": has_noaa_forecast}
+                     "has_noaa_forecast": has_noaa_forecast, "has_giro_ionosonde": has_giro_ionosonde}
 
         app = tornado.web.Application([
             # Routes for API calls

solarconditionsproviders/giroionosonde.py

@@ -0,0 +1,174 @@
+import csv
+import logging
+from datetime import datetime, timezone, timedelta
+from threading import Thread, Event
+
+import pytz
+import requests
+
+from core.constants import HTTP_HEADERS, BANDS
+from solarconditionsproviders.solar_conditions_provider import SolarConditionsProvider
+
+POLL_INTERVAL = 3600  # 1 hour
+STATIONS_INDEX = "datafiles/didbase-stations.csv"
+LGDC_URL = "https://lgdc.uml.edu/common/DIDBGetValues"
+HISTORY_HOURS = 24
+HF_BANDS = [b for b in BANDS if b.is_ham_hf]
+
+
+class GIROIonosonde(SolarConditionsProvider):
+    """Solar conditions provider using ionosonde data from the GIRO Data Center.
+    Queries foF2, MUF, and LUF measurements for all stations in datafiles/didbase-stations.csv."""
+
+    def __init__(self, provider_config):
+        super().__init__(provider_config)
+        self._stations = self._load_stations()
+        self._thread = None
+        self._stop_event = Event()
+
+    def _load_stations(self):
+        """Load the CSV file containing the list of URSIs and Station Names for currently active ionosondes."""
+
+        stations = []
+        with open(STATIONS_INDEX, newline='') as f:
+            for row in csv.reader(f):
+                if len(row) >= 2:
+                    stations.append({"ursi": row[0].strip(), "name": row[1].strip()})
+        return stations
+
+    def setup(self, solar_conditions, solar_conditions_cache):
+        """Prepopulate the ionosonde_data map with known URSI and station names, so that the API exposes this structure
+        even before we actually have any data in it."""
+
+        super().setup(solar_conditions, solar_conditions_cache)
+        self.update_data({"ionosonde_data": {
+            s["ursi"]: {"ursi": s["ursi"], "name": s["name"], "fof2": None, "muf": None, "luf": None,
+                        "band_states": None}
+            for s in self._stations
+        }})
+
+    def start(self):
+        logging.info(f"Set up query of GIRO ionosonde data API every {POLL_INTERVAL} seconds.")
+        self._thread = Thread(target=self._run, daemon=True)
+        self._thread.start()
+
+    def stop(self):
+        self._stop_event.set()
+
+    def _run(self):
+        while True:
+            self._poll()
+            if self._stop_event.wait(timeout=POLL_INTERVAL):
+                break
+
+    def _poll(self):
+        try:
+            logging.debug(f"Polling GIRO ionosonde data...")
+            now = datetime.now(timezone.utc)
+            from_time = now - timedelta(hours=HISTORY_HOURS)
+            ionosonde_data = dict(self._solar_conditions.ionosonde_data or {})
+            updated_count = 0
+
+            for station in self._stations:
+                if self._stop_event.is_set():
+                    break
+                ursi = station["ursi"]
+                name = station["name"]
+                try:
+                    fof2, muf, luf = self._fetch_station_data(ursi, from_time, now)
+                    if fof2 and muf:
+                        band_states = self._compute_band_statess(fof2, muf, luf or {})
+                        ionosonde_data[ursi] = {"ursi": ursi, "name": name, "fof2": fof2, "muf": muf,
+                                                "luf": luf or None, "band_states": band_states}
+                        updated_count += 1
+                except Exception:
+                    logging.warning(f"Could not fetch ionosonde data for {ursi} ({name})")
+
+            self.update_data({"ionosonde_data": ionosonde_data})
+            self.status = "OK"
+            self.last_update_time = datetime.now(pytz.UTC)
+            logging.debug(f"Updated ionosonde data for {updated_count} stations.")
+
+        except Exception:
+            self.status = "Error"
+            logging.exception(f"Exception in GIRO Ionosonde data provider")
+            self._stop_event.wait(timeout=1)
+
+    def _fetch_station_data(self, ursi, from_time, to_time):
+        """Fetch foF2, MUF and LUF readings for a station. Returns (fof2_dict, muf_dict, luf_dict) keyed by UNIX timestamp."""
+
+        from_str = from_time.strftime("%Y.%m.%d+%H:%M:%S")
+        to_str = to_time.strftime("%Y.%m.%d+%H:%M:%S")
+        url = f"{LGDC_URL}?ursiCode={ursi}&charName=foF2,MUFD,fmin&DMUF=3000&fromDate={from_str}&toDate={to_str}"
+        response = requests.get(url, headers=HTTP_HEADERS, timeout=(5, 15))
+        if response.status_code != 200:
+            return None, None, None
+        return self._parse_all(response.text)
+
+    @staticmethod
+    def _latest(d):
+        """Return the value with the highest timestamp key, or None if the dict is empty."""
+        return d[max(d.keys())] if d else None
+
+    @staticmethod
+    def _compute_band_statess(fof2_dict, muf_dict, luf_dict):
+        """Compute HF band states from the latest foF2, MUF and LUF values.
+
+        States:
+          Closed if band frequency is below LUF (if known) or above MUF
+          Short if band frequency is >= LUF and < foF2 (good for NVIS)
+          Long if band frequency is >= foF2 and < MUF (good for DX)
+        """
+
+        # We have a list of timestamped data for each value, but for this we only want the latest value
+        fof2 = GIROIonosonde._latest(fof2_dict)
+        muf = GIROIonosonde._latest(muf_dict)
+        luf = GIROIonosonde._latest(luf_dict)
+        if fof2 is None or muf is None:
+            return {}
+        band_states = {}
+
+        # Iterate over all ham HF bands, we don't care about the others at this point
+        for band in HF_BANDS:
+            freq = band.start_freq / 1000000
+            if freq > muf or (luf is not None and freq < luf):
+                band_states[band.name] = "Closed"
+            elif freq < fof2:
+                band_states[band.name] = "Short"
+            else:
+                band_states[band.name] = "Long"
+        return band_states
+
+    @staticmethod
+    def _parse_all(text):
+        """Parse web server response and return (fof2_dict, muf_dict, luf_dict) keyed by UNIX timestamp."""
+
+        fof2_data = {}
+        muf_data = {}
+        luf_data = {}
+        for line in text.splitlines():
+            line = line.strip()
+            if not line or line.startswith('#'):
+                continue
+            # Data rows have the following format: timestamp CS foF2 QD MUFD QD fmin QD
+            parts = line.split()
+            if len(parts) >= 5:
+                try:
+                    # Python 3.8 TZ parsing fudge
+                    ts = datetime.fromisoformat(parts[0].replace('Z', '+00:00')).timestamp()
+                except ValueError:
+                    continue
+                try:
+                    fof2_data[ts] = float(parts[2])
+                except ValueError:
+                    pass
+                try:
+                    muf_data[ts] = float(parts[4])
+                except ValueError:
+                    pass
+                if len(parts) >= 7:
+                    try:
+                        luf_data[ts] = float(parts[6])
+                    except ValueError:
+                        pass
+        return fof2_data, muf_data, luf_data

solarconditionsproviders/http_solar_conditions_provider.py

@@ -38,7 +38,7 @@ class HTTPSolarConditionsProvider(SolarConditionsProvider):
     def _poll(self):
         try:
             logging.debug("Polling " + self.name + " solar conditions API...")
-            http_response = requests.get(self._url, headers=HTTP_HEADERS)
+            http_response = requests.get(self._url, headers=HTTP_HEADERS, timeout=(5, 30))
             new_data = self._http_response_to_solar_conditions(http_response)
             self.update_data(new_data)
 

solarconditionsproviders/solar_conditions_provider.py

@@ -16,10 +16,11 @@ class SolarConditionsProvider:
         self.status = "Not Started" if self.enabled else "Disabled"
         self._solar_conditions = None
 
-    def setup(self, solar_conditions):
+    def setup(self, solar_conditions, solar_conditions_cache):
-        """Set up the provider, giving it the solar conditions dict to update"""
+        """Set up the provider, giving it the solar conditions object and its backing cache"""
 
         self._solar_conditions = solar_conditions
+        self._solar_conditions_cache = solar_conditions_cache
 
     def start(self):
         """Start the provider. This should return immediately after spawning threads to access the remote resources"""
@@ -39,3 +40,4 @@ class SolarConditionsProvider:
                 if hasattr(self._solar_conditions, key):
                     setattr(self._solar_conditions, key, value)
             self._solar_conditions.infer_descriptions()
+            self._solar_conditions_cache['solar_conditions'] = self._solar_conditions

spothole.py

@@ -18,7 +18,8 @@ from server.webserver import WebServer
 # Globals
 spots = Cache('cache/spots_cache')
 alerts = Cache('cache/alerts_cache')
-solar_conditions = SolarConditions()
+solar_conditions_cache = Cache('cache/solar_conditions_cache')
+solar_conditions = solar_conditions_cache.get('solar_conditions', SolarConditions())
 web_server = None
 status_data = {}
 spot_providers = []
@@ -48,6 +49,7 @@ def shutdown(sig, frame):
     lookup_helper.stop()
     spots.close()
     alerts.close()
+    solar_conditions_cache.close()
     os._exit(0)
 
 
@@ -120,7 +122,7 @@ if __name__ == '__main__':
     for entry in config.get("solar-condition-providers", []):
         solar_condition_providers.append(get_solar_conditions_provider_from_config(entry))
     for p in solar_condition_providers:
-        p.setup(solar_conditions=solar_conditions)
+        p.setup(solar_conditions=solar_conditions, solar_conditions_cache=solar_conditions_cache)
         if p.enabled:
             p.start()
 

spotproviders/hema.py

@@ -35,7 +35,7 @@ class HEMA(HTTPSpotProvider):
         new_spots = []
         # OK, if the spot seed actually changed, now we make the real request for data.
         if spot_seed_changed:
-            source_data = requests.get(self.SPOTS_URL, headers=HTTP_HEADERS)
+            source_data = requests.get(self.SPOTS_URL, headers=HTTP_HEADERS, timeout=(5, 30))
             source_data_items = source_data.text.split("=")
             # Iterate through source data items.
             for source_spot in source_data_items:

spotproviders/http_spot_provider.py

@@ -40,7 +40,7 @@ class HTTPSpotProvider(SpotProvider):
         try:
             # Request data from API
             logging.debug("Polling " + self.name + " spot API...")
-            http_response = requests.get(self._url, headers=HTTP_HEADERS)
+            http_response = requests.get(self._url, headers=HTTP_HEADERS, timeout=(5, 30))
             # Pass off to the subclass for processing
             new_spots = self._http_response_to_spots(http_response)
             # Submit the new spots for processing. There might not be any spots for the less popular programs.

spotproviders/sota.py

@@ -33,7 +33,7 @@ class SOTA(HTTPSpotProvider):
         new_spots = []
         # OK, if the epoch actually changed, now we make the real request for data.
         if epoch_changed:
-            source_data = requests.get(self.SPOTS_URL, headers=HTTP_HEADERS).json()
+            source_data = requests.get(self.SPOTS_URL, headers=HTTP_HEADERS, timeout=(5, 30)).json()
             # Iterate through source data
             for source_spot in source_data:
                 # Convert to our spot format

spotproviders/tiles.py

@@ -0,0 +1,50 @@
+from datetime import datetime
+
+from data.sig_ref import SIGRef
+from data.spot import Spot
+from spotproviders.http_spot_provider import HTTPSpotProvider
+
+
+class Tiles(HTTPSpotProvider):
+    """Spot provider for Tiles on the Air"""
+
+    POLL_INTERVAL_SEC = 120
+    SPOTS_URL = "https://icneuzxitdqtofutxbla.supabase.co/functions/v1/spots?active_hours=24"
+
+    def __init__(self, provider_config):
+        super().__init__(provider_config, self.SPOTS_URL, self.POLL_INTERVAL_SEC)
+
+    def _http_response_to_spots(self, http_response):
+        new_spots = []
+        # Iterate through source data
+        for source_spot in http_response.json()["spots"]:
+            # Convert to our spot format
+            spot = Spot(source=self.name,
+                        source_id=source_spot["id"],
+                        dx_call=source_spot["call_sign"].upper(),
+                        # No separate spotter callsign, assume all spots are self-spots
+                        de_call=source_spot["call_sign"].upper(),
+                        freq=float(strip_extra_decimal_points(source_spot["frequency"])) * 1000000,
+                        mode=source_spot["mode"].upper(),
+                        comment=source_spot["notes"],
+                        sig="Tiles",
+                        # Tiles spots can include POTA & SOTA references, but ignore those on the basis that we will get them separately from the POTA/SOTA providers anyway.
+                        # Just take the grid reference itself as the single Tiles SIG reference.
+                        sig_refs=[SIGRef(id=source_spot["maidenhead_grid"], sig="Tiles", name=source_spot["maidenhead_grid"])],
+                        time=datetime.fromisoformat(source_spot["created_at"].replace("Z", "+00:00")).timestamp(),
+                        dx_grid=source_spot["maidenhead_grid"],
+                        dx_latitude=source_spot["latitude"],
+                        dx_longitude=source_spot["longitude"])
+
+            # Add to our list. Don't worry about de-duping, removing old spots etc. at this point; other code will do
+            # that for us.
+            new_spots.append(spot)
+        return new_spots
+
+# Utility function to keep the first decimal point in a given string but remove any others. Used to parse Tiles'
+# strange frequency format where we can sometimes have e.g. "14.123.5".
+def strip_extra_decimal_points(s):
+    parts = s.split('.', 1)
+    if len(parts) == 1:
+        return s
+    return parts[0] + '.' + parts[1].replace('.', '')

spotproviders/wota.py

@@ -47,7 +47,7 @@ class WOTA(HTTPSpotProvider):
                 desc_split = source_spot.description.split(". ")
                 freq_mode = desc_split[0].replace("Frequencies/modes:", "").strip()
                 freq_mode_split = re.split(r'[\-\s]+', freq_mode)
-                freq_hz = float(freq_mode_split[0]) * 1000000
+                freq_hz = float(freq_mode_split[0].replace("'",".")) * 1000000
                 mode = None
                 if len(freq_mode_split) > 1:
                     mode = freq_mode_split[1].upper()

templates/about.html

@@ -25,11 +25,12 @@
     <h4 class="mt-4">What are "DX", "DE" and modes?</h4>
     <p>In amateur radio terminology, the "DX" contact is the "interesting" one that is using the frequency shown and looking for callers. They might be on a remote island or just in a local park, but either way it's interesting enough that someone has "spotted" them. The callsign listed under "DE" is the person who entered the spot of the "DX" operator. "Modes" are the type of communication they are using. For example you might see "CW" which is Morse Code, or voice "modes" like SSB or FM, or more exotic "data" modes which are used for computer-to-computer communication.</p>
     <h4 class="mt-4">What data sources are supported?</h4>
-    <p>Spothole can retrieve spots from: <a href="https://www.dxcluster.info/telnet/">Telnet-based DX clusters</a>, the <a href="https://www.reversebeacon.net/">Reverse Beacon Network (RBN)</a>, the <a href="https://www.aprs-is.net/">APRS Internet Service (APRS-IS)</a>, <a href="https://pota.app">POTA</a>, <a href="https://www.sota.org.uk/">SOTA</a>, <a href="https://wwff.co/">WWFF</a>, <a href="https://www.cqgma.org/">GMA</a>, <a href="https://wwbota.net/">WWBOTA</a>, <a href="http://www.hema.org.uk/">HEMA</a>, <a href="https://www.parksnpeaks.org/">Parks 'n' Peaks</a>, <a href="https://ontheair.nz">ZLOTA</a>, <a href="https://www.wota.org.uk/">WOTA</a>, <a href="https://llota.app">LLOTA</a>, <a href="https://wwtota.com">WWTOTA</a>, the <a href="https://ukpacketradio.network/">UK Packet Repeater Network</a>, and any site based on the <a href="https://github.com/nischu/xOTA">xOTA software by nischu</a>.</p>
+    <p>Spothole can retrieve spots from: <a href="https://www.dxcluster.info/telnet/">Telnet-based DX clusters</a>, the <a href="https://www.reversebeacon.net/">Reverse Beacon Network (RBN)</a>, the <a href="https://www.aprs-is.net/">APRS Internet Service (APRS-IS)</a>, <a href="https://pota.app">POTA</a>, <a href="https://www.sota.org.uk/">SOTA</a>, <a href="https://wwff.co/">WWFF</a>, <a href="https://www.cqgma.org/">GMA</a>, <a href="https://wwbota.net/">WWBOTA</a>, <a href="http://www.hema.org.uk/">HEMA</a>, <a href="https://www.parksnpeaks.org/">Parks 'n' Peaks</a>, <a href="https://ontheair.nz">ZLOTA</a>, <a href="https://www.wota.org.uk/">WOTA</a>, <a href="https://llota.app">LLOTA</a>, <a href="https://wwtota.com">WWTOTA</a>, <a href="https://tilesontheair.com/">Tiles on the Air</a>, the <a href="https://ukpacketradio.network/">UK Packet Repeater Network</a>, and any site based on the <a href="https://github.com/nischu/xOTA">xOTA software by nischu</a>.</p>
     <p>Spothole can retrieve alerts from: <a href="https://www.ng3k.com/">NG3K</a>, <a href="https://pota.app">POTA</a>, <a href="https://www.sota.org.uk/">SOTA</a>, <a href="https://wwff.co/">WWFF</a>, <a href="https://www.parksnpeaks.org/">Parks 'n' Peaks</a>, <a href="https://www.wota.org.uk/">WOTA</a> and <a href="https://www.beachesontheair.com/">BOTA</a>.</p>
-    <p>Spothole can retrieve solar and propagation condition data from <a href="https://www.hamqsl.com">HamQSL</a>.</p>
+    <p>Spothole can retrieve solar and propagation condition data from <a href="https://www.hamqsl.com">HamQSL</a>, the <a href="https://www.swpc.noaa.gov/">NOAA Space Weather Prediction Center</a> and the <a href="https://giro.uml.edu/">Lowell GIRO Data Center</a>.</p>
+    <p>Spothole can also perform lookups for callsign data on behalf of the user from <a href="https://qrz.com">QRZ.com</a> and <a href="https://hamqth.com">HamQTH</a>.</p>
     <p>Note that the server owner has not necessarily enabled all these data sources. In particular it is common to disable RBN, to avoid the server being swamped with FT8 traffic, and to disable APRS-IS and UK Packet Net so that the server only displays stations where there is likely to be an operator physically present for a QSO.</p>
-    <p>Between the various data sources, the following Special Interest Groups (SIGs) are supported: Parks on the Air (POTA), Summits on the Air (SOTA), Worldwide Flora & Fauna (WWFF), Global Mountain Activity (GMA), Worldwide Bunkers on the Air (WWBOTA), HuMPs Excluding Marilyns Award (HEMA), Islands on the Air (IOTA), Mills on the Air (MOTA), the Amateur Radio Lighthouse Socirty (ARLHS), International Lighthouse Lightship Weekend (ILLW), Silos on the Air (SIOTA), World Castles Award (WCA), New Zealand on the Air (ZLOTA), Keith Roget Memorial National Parks Award (KRMNPA), Wainwrights on the Air (WOTA), Beaches on the Air (BOTA), Lagos y Lagunas On the Air (LLOTA), Towers on the Air (WWTOTA), Worked All Britain (WAB), Worked All Ireland (WAI), and Toilets on the Air (TOTA).</p>
+    <p>Between the various data sources, the following Special Interest Groups (SIGs) are supported: Parks on the Air (POTA), Summits on the Air (SOTA), Worldwide Flora & Fauna (WWFF), Global Mountain Activity (GMA), Worldwide Bunkers on the Air (WWBOTA), HuMPs Excluding Marilyns Award (HEMA), Islands on the Air (IOTA), Mills on the Air (MOTA), the Amateur Radio Lighthouse Socirty (ARLHS), International Lighthouse Lightship Weekend (ILLW), Silos on the Air (SIOTA), World Castles Award (WCA), New Zealand on the Air (ZLOTA), Keith Roget Memorial National Parks Award (KRMNPA), Wainwrights on the Air (WOTA), Beaches on the Air (BOTA), Lagos y Lagunas On the Air (LLOTA), Towers on the Air (WWTOTA), Tiles on the Air, Worked All Britain (WAB), Worked All Ireland (WAI), and Toilets on the Air (TOTA).</p>
     <p>As of the time of writing in November 2025, I think Spothole captures essentially all outdoor radio programmes that have a defined reference list, and almost certainly those that have a spotting/alerting API. If you know of one I've missed, please let me know!</p>
     <h4 class="mt-4">Why can I filter spots by both SIG and Source? Isn't that basically the same thing?</h4>
     <p>Mostly, but not quite. While POTA spots generally come from the POTA source and so on, there are a few exceptions:</p>
@@ -54,9 +55,10 @@
     <h2 class="mt-4">Data Accuracy</h2>
     <p>Please note that the data coming out of Spothole is only as good as the data going in. People mis-hear and make typos when spotting callsigns all the time. There are also plenty of cases where Spothole's data, particularly location data, may be inaccurate. For example, there are POTA parks that span multiple US states, countries that span multiple CQ zones, portable operators with no requirement to sign /P, etc. If you are doing something where accuracy is important, such as contesting, you should not rely on Spothole's data to fill in any gaps in your log.</p>
     <h2 id="privacy" class="mt-4">Privacy</h2>
-    <p>Spothole collects no data about you, and there is no way to enter personally identifying information into the site apart from by spotting and alerting through Spothole or the various services it connects to. All spots and alerts are "timed out" and deleted from the system after a set interval, which by default is one hour for spots and one week for alerts.</p>
+    <p>Spothole collects no data about you on a permanent basis. All spots and alerts are "timed out" and deleted from the system after a set interval, which by default is one hour for spots and one week for alerts.</p>
     <p>Settings you select from Spothole's menus are sent to the server, in order to provide the data with the requested filters. They are also stored in your browser's local storage, so that your preferences are remembered between sessions.</p>
-    <p>There are no trackers, no ads, and no cookies.</p>
+    <p>The data you provide can optionally include your login credentials for QRZ.com and HamQTH. You can provide these in the "Data" menu of most pages. If you do, Spothole will augment the data it produces with lookups from these services, which can for example provide more accurate markers on the map tab, and operator names when you mouse over a DX callsign. Spothole will still work fine if you don't provide these. The values you enter are sent to Spothole via HTTPS so are protected in transit, though of course you do have to trust Spothole with this sensitive data in order to use this feature.</p>
+    <p>Spothole uses no trackers, no ads, and no cookies.</p>
     {% if len(web_ui_options["support-button-html"]) > 0 %}
         <p><strong>Caveat: </strong> The owner of this server has chosen to inject their own content into the "spots" page. This is designed for a "donate" or "support this server" button. The functionality of this injected content is the responsibility of the server owner, rather than the Spothole software.</p>
     {% end %}
@@ -67,7 +69,7 @@
     <p>This software is dedicated to the memory of Tom G1PJB, SK, a friend and colleague who sadly passed away around the time I started writing it in Autumn 2025. I was looking forward to showing it to you when it was done.</p>
 </div>
 
-<script src="/js/common.js?v=1775295943"></script>
+<script src="/js/common.js?v=1780424170"></script>
 <script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

templates/add_spot.html

@@ -21,11 +21,11 @@
             <form class="row g-3">
                 <div class="col-auto">
                     <label for="dx-call" class="form-label">DX Call *</label>
-                    <input type="text" class="form-control" id="dx-call" placeholder="N0CALL" style="max-width: 8em;">
+                    <input type="text" class="form-control input-narrow" id="dx-call" placeholder="N0CALL">
                 </div>
                 <div class="col-auto">
                     <label for="freq" class="form-label">Frequency (kHz) *</label>
-                    <input type="text" class="form-control" id="freq" placeholder="e.g. 14100" style="max-width: 8em;">
+                    <input type="text" class="form-control input-narrow" id="freq" placeholder="e.g. 14100">
                 </div>
                 <div class="col-auto">
                     <label for="mode" class="form-label">Mode</label>
@@ -41,22 +41,22 @@
                 </div>
                 <div class="col-auto">
                     <label for="sig-ref" class="form-label">SIG Reference</label>
-                    <input type="text" class="form-control" id="sig-ref" placeholder="e.g. GB-0001" style="max-width: 8em;">
+                    <input type="text" class="form-control input-narrow" id="sig-ref" placeholder="e.g. GB-0001">
                 </div>
                 <div class="col-auto">
                     <label for="dx-grid" class="form-label">DX Grid</label>
-                    <input type="text" class="form-control" id="dx-grid" placeholder="e.g. AA00aa" style="max-width: 8em;">
+                    <input type="text" class="form-control input-narrow" id="dx-grid" placeholder="e.g. AA00aa">
                 </div>
                 <div class="col-auto">
                     <label for="comment" class="form-label">Comment</label>
-                    <input type="text" class="form-control" id="comment" placeholder="e.g. 59 TNX QSO 73" style="max-width: 12em;">
+                    <input type="text" class="form-control input-medium" id="comment" placeholder="e.g. 59 TNX QSO 73">
                 </div>
                 <div class="col-auto">
                     <label for="de-call" class="form-label">Your Call *</label>
-                    <input type="text" class="form-control storeable-text" id="de-call" placeholder="N0CALL" style="max-width: 8em;">
+                    <input type="text" class="form-control storeable-text input-narrow" id="de-call" placeholder="N0CALL">
                 </div>
                 <div class="col-auto">
-                    <button type="button" class="btn btn-primary" style="margin-top: 2em;" onclick="addSpot();">Spot</button>
+                    <button type="button" class="btn btn-primary mt-2em" onclick="addSpot();">Spot</button>
                 </div>
             </form>
 
@@ -69,8 +69,8 @@
 
 </div>
 
-<script src="/js/common.js?v=1775295943"></script>
+<script src="/js/common.js?v=1780424170"></script>
-<script src="/js/add-spot.js?v=1775295943"></script>
+<script src="/js/add-spot.js?v=1780424170"></script>
 <script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

templates/alerts.html

@@ -8,7 +8,7 @@
         </div>
         <div class="col-auto">
             <div class="d-inline-flex gap-1">
-                {% module Template("widgets/filters-display-buttons.html", web_ui_options=web_ui_options) %}
+                {% module Template("widgets/filters-display-data-buttons.html", web_ui_options=web_ui_options) %}
             </div>
         </div>
     </div>
@@ -33,7 +33,7 @@
     <div id="display-area" class="appearing-panel card mb-3">
         {% module Template("widgets/display-area-header.html", web_ui_options=web_ui_options) %}
         <div class="card-body">
-            <div id="display-container" class="row row-cols-1 row-cols-md-3 g-4">
+            <div id="display-container" class="row row-cols-1 row-cols-md-4 g-4">
                 <div class="col">
                     {% module Template("cards/time-zone.html", web_ui_options=web_ui_options) %}
                 </div>
@@ -50,14 +50,28 @@
         </div>
     </div>
 
+    <div id="data-area" class="appearing-panel card mb-3">
+        {% module Template("widgets/data-area-header.html", web_ui_options=web_ui_options) %}
+        <div class="card-body">
+            <div class="row row-cols-1 row-cols-md-4 g-4">
+                <div class="col">
+                    {% module Template("cards/qrz.html", web_ui_options=web_ui_options) %}
+                </div>
+                <div class="col">
+                    {% module Template("cards/hamqth.html", web_ui_options=web_ui_options) %}
+                </div>
+            </div>
+        </div>
+    </div>
+
     <div id="table-container">
         <table id="table" class="table"><thead><tr></tr></thead><tbody></tbody></table>
     </div>
 
 </div>
 
-<script src="/js/common.js?v=1775295943"></script>
+<script src="/js/common.js?v=1780424170"></script>
-<script src="/js/alerts.js?v=1775295943"></script>
+<script src="/js/alerts.js?v=1780424170"></script>
 <script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

templates/apidocs.html

@@ -1,8 +1,5 @@
-{% extends "base.html" %}
+{% extends "skeleton.html" %}
-{% block content %}
+{% block body %}
-
 <redoc spec-url="/apidocs/openapi.yml"></redoc>
 <script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>
-<script>$(document).ready(function() { $("#nav-link-api").addClass("active"); }); <!-- highlight active page in nav --></script>
+{% end %}
-
-{% end %}

templates/bands.html

@@ -8,7 +8,7 @@
         </div>
         <div class="col-auto">
             <div class="d-inline-flex gap-1">
-                {% module Template("widgets/filters-display-buttons.html", web_ui_options=web_ui_options) %}
+                {% module Template("widgets/filters-display-data-buttons.html", web_ui_options=web_ui_options) %}
             </div>
         </div>
     </div>
@@ -55,6 +55,20 @@
         </div>
     </div>
 
+    <div id="data-area" class="appearing-panel card mb-3">
+        {% module Template("widgets/data-area-header.html", web_ui_options=web_ui_options) %}
+        <div class="card-body">
+            <div class="row row-cols-1 row-cols-md-4 g-4">
+                <div class="col">
+                    {% module Template("cards/qrz.html", web_ui_options=web_ui_options) %}
+                </div>
+                <div class="col">
+                    {% module Template("cards/hamqth.html", web_ui_options=web_ui_options) %}
+                </div>
+            </div>
+        </div>
+    </div>
+
     <div id="bands-container"></div>
 
 </div>
@@ -62,9 +76,9 @@
 <script>
     let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1775295943"></script>
+<script src="/js/common.js?v=1780424170"></script>
-<script src="/js/spotsbandsandmap.js?v=1775295943"></script>
+<script src="/js/spotsbandsandmap.js?v=1780424170"></script>
-<script src="/js/bands.js?v=1775295943"></script>
+<script src="/js/bands.js?v=1780424170"></script>
 <script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

templates/base.html

@@ -1,59 +1,29 @@
-<!DOCTYPE html>
+{% extends "skeleton.html" %}
-<html lang="en">
+{% block head_extra %}
-<head>
+    <link rel="stylesheet" href="/css/style.css?v=1780424170" type="text/css">
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-    <meta name="color-scheme" content="light dark">
-    <meta name="theme-color" content="white"/>
-    <meta name="mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent">
-
-    <meta property="og:title" content="Spothole"/>
-    <meta property="twitter:title" content="Spothole"/>
-    <meta name="description" content="An Amateur Radio spotting tool bringing together DX clusters and outdoor programmes, providing a universal JSON API and web interface."/>
-    <meta property="og:description" content="An Amateur Radio spotting tool bringing together DX clusters and outdoor programmes, providing a universal JSON API and web interface."/>
-    <link rel="canonical" href="https://spothole.app/"/>
-    <meta property="og:url" content="https://spothole.app/"/>
-    <meta property="og:image" content="https://spothole.app/img/banner.png"/>
-    <meta property="twitter:image" content="https://spothole.app/img/banner.png"/>
-    <meta name="twitter:card" content="summary_large_image"/>
-    <meta name="author" content="Ian Renton"/>
-    <meta property="og:locale" content="en_GB"/>
-    <meta property="og:type" content="website"/>
-
-    <title>Spothole</title>
-
-    <link rel="stylesheet" href="/css/style.css" type="text/css">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
           integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
     <link href="/fa/css/fontawesome.min.css" rel="stylesheet" />
     <link href="/fa/css/solid.min.css" rel="stylesheet" />
 
-    <link rel="icon" type="image/png" href="/img/icon-512.png">
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"
-    <link rel="apple-touch-icon" href="img/icon-512-pwa.png">
+            integrity="sha384-1H217gwSVyLSIfaLxHbE7dRb3v4mYCKbpQvzx0cegeju1MVsGrX5xXxAvs/HgeFs"
-    <link rel="alternate icon" type="image/png" href="/img/icon-192.png">
+            crossorigin="anonymous"></script>
-    <link rel="alternate icon" type="image/png" href="/img/icon-32.png">
+    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"
-    <link rel="alternate icon" type="image/png" href="/img/icon-16.png">
+            integrity="sha384-N1xdnJwBzqfCpEDxEeSQzv4NPVPViBQq2NLbzth3YA1pLvR9mtf+TV5g6O+KLkPY"
-    <link rel="alternate icon" type="image/x-icon" href="/favicon.ico">
+            crossorigin="anonymous"></script>
-
-    <link rel="manifest" href="manifest.webmanifest">
-
-    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
             integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
             crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/cjs/tinycolor.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/cjs/tinycolor.min.js"
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script>
+            integrity="sha384-L1eE4eD41kpBIWe2I0eHy+GnEUC4RIpcvibVW2JCminuPlTl+2Bc528iPdVMg5Dn"
+            crossorigin="anonymous"></script>
 
-    <script src="https://misc.ianrenton.com/jsutils/utils.js?v=1775295943"></script>
+    <script src="https://misc.ianrenton.com/jsutils/utils.js?v=1780424170"></script>
-    <script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775295943"></script>
+    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1780424170"></script>
-    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775295943"></script>
+    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1780424170"></script>
-    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775295943"></script>
+{% end %}
-
+{% block body %}
-</head>
-<body>
 <div class="container">
     <nav id="header" class="navbar navbar-expand-lg bg-body p-0 border-bottom">
         <div class="container-fluid p-0">
@@ -92,7 +62,7 @@
     <div id="footer" class="hideonmobile hideonmap">
         <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
             <p class="col-md-4 mb-0 text-body-secondary">Made with love by <a href="https://ianrenton.com" class="text-body-secondary">Ian, MØTRT</a> and other contributors.</p>
-            <p class="col-md-4 mb-0 justify-content-center text-body-secondary" style="text-align: center;">Spothole v{{software_version}}</p>
+            <p class="col-md-4 mb-0 justify-content-center text-body-secondary text-center">Spothole v{{software_version}}</p>
             <ul class="nav col-md-4 justify-content-end">
                 <li class="nav-item">
                     <a href="/about#faq" class="nav-link px-3 text-body-secondary">FAQ</a>
@@ -113,5 +83,4 @@
 
 <div id="embeddedModeFooter" class="text-body-secondary pt-2 px-3 pb-1">Powered by <img src="/img/logo.png" class="logo" width="96" height="30" alt="Spothole"></div>
 
-</body>
+{% end %}
-</html>

templates/cards/audio.html

@@ -0,0 +1,11 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title mb-3">Audio</h5>
+        <div class="form-group">
+            <div class="form-check form-check-inline">
+              <input class="form-check-input storeable-checkbox" type="checkbox" id="pingOnNewSpots" value="pingOnNewSpots" oninput="saveSettings();">
+              <label class="form-check-label" for="pingOnNewSpots">Ping on new spots</label>
+            </div>
+        </div>
+    </div>
+</div>

templates/cards/bands.html

@@ -1,6 +1,6 @@
 <div class="card">
     <div class="card-body">
         <h5 class="card-title">Bands</h5>
-        <p id="band-options" class="card-text spothole-card-text"></p>
+        <div id="band-options" class="card-text spothole-card-text"></div>
     </div>
 </div>

templates/cards/basemap.html

@@ -0,0 +1,27 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">Map Style</h5>
+        <p class="card-text spothole-card-text">
+            <label for="basemap" class="form-label">Basemap</label>
+            <select id="basemap" class="storeable-select form-select" oninput="displayUpdated();">
+                <option value="OpenStreetMap.Mapnik" selected>OpenStreetMap Mapnik</option>
+                <option value="OpenStreetMap.Mapnik.Dark">OpenStreetMap Mapnik (Dark)</option>
+                <option value="Esri.NatGeoWorldMap">ESRI NatGeo World Map</option>
+                <option value="Esri.WorldTopoMap">ESRI World Topo Map</option>
+                <option value="Esri.WorldShadedRelief">ESRI World Shaded Relief</option>
+                <option value="Esri.WorldImagery">ESRI World Imagery</option>
+                <option value="CartoDB.Voyager">CartoDB Voyager</option>
+                <option value="CartoDB.DarkMatter">CartoDB DarkMatter</option>
+            </select>
+        </p>
+        <p class="card-text spothole-card-text">
+            <label for="basemapOpacity" class="form-label">Opacity</label>
+            <select id="basemapOpacity" class="storeable-select form-select" oninput="displayUpdated();">
+                <option value="1">100%</option>
+                <option value="0.75">75%</option>
+                <option value="0.5">50%</option>
+                <option value="0.25">25%</option>
+            </select>
+        </p>
+    </div>
+</div>

templates/cards/de-continent.html

@@ -1,6 +1,6 @@
 <div class="card">
     <div class="card-body">
         <h5 class="card-title">DE Continent</h5>
-        <p id="de-continent-options" class="card-text spothole-card-text"></p>
+        <div id="de-continent-options" class="card-text spothole-card-text"></div>
     </div>
 </div>

templates/cards/duration-limit-alerts.html

@@ -2,7 +2,7 @@
     <div class="card-body">
         <h5 class="card-title">Duration Limit <i class='fa-solid fa-circle-question' title='Some users create long-duration alerts for the period they will be generally in and around xOTA references, when they are not indending to be on the air most of the time. Use this control to restrict the maximum duration of spots that the software will display, and exclude any with a long duration, to avoid these filling up the list. By default, we allow DXpeditions to be displayed even if they are longer than this limit, because on a DXpedition the operators typically ARE on the air most of the time.'></i></h5>
         <p class="card-text spothole-card-text">
-            Hide any alerts lasting more than:<br/>
+            <label for="max-duration" class="form-label">Hide any alerts lasting more than</label>
             <select id="max-duration" class="storeable-select form-select" onclick="filtersUpdated();" style="width: 8em; display: inline-block;">
                 <option value="10800">3 hours</option>
                 <option value="43200">12 hours</option>

templates/cards/dx-continent.html

@@ -1,6 +1,6 @@
 <div class="card">
     <div class="card-body">
         <h5 class="card-title">DX Continent</h5>
-        <p id="dx-continent-options" class="card-text spothole-card-text"></p>
+        <div id="dx-continent-options" class="card-text spothole-card-text"></div>
     </div>
 </div>

templates/cards/hamqth.html

@@ -0,0 +1,27 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">HamQTH</h5>
+        <div class="card-text spothole-card-text">
+            <div class="form-check mb-2">
+                <input type="checkbox" class="storeable-checkbox form-check-input" id="hamqth-enabled" onchange="saveSettings();">
+                <label for="hamqth-enabled" class="form-check-label">Use data from HamQTH</label>
+            </div>
+            <div class="mb-2">
+                <input type="text" class="storeable-text form-control" id="hamqth-username" placeholder="Username (Callsign)" onchange="saveSettings();" autocomplete="username">
+            </div>
+            <div class="mb-2">
+                <input type="password" class="password-field form-control" id="hamqth-password" placeholder="Password" data-remember-checkbox="hamqth-remember-password" onchange="saveSettings();" autocomplete="current-password">
+            </div>
+            <div class="form-check">
+                <input type="checkbox" class="storeable-checkbox form-check-input" id="hamqth-remember-password" onchange="saveSettings();">
+                <label for="hamqth-remember-password" class="form-check-label">Remember password</label>
+            </div>
+            <div class="mt-3">
+                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="location.reload();">Reload with this data</button>
+            </div>
+            <div class="mt-1">
+                <small>See <a href="/about#privacy">Privacy</a> for more information.</small>
+            </div>
+        </div>
+    </div>
+</div>

templates/cards/map-features.html

@@ -1,11 +1,41 @@
 <div class="card">
     <div class="card-body">
-        <h5 class="card-title">Map Features</h5>
+        <h5 class="card-title mb-3">Map Features</h5>
         <div class="form-group">
             <div class="form-check form-check-inline">
               <input class="form-check-input storeable-checkbox" type="checkbox" id="mapShowGeodesics" value="mapShowGeodesics" oninput="displayUpdated();">
               <label class="form-check-label" for="mapShowGeodesics">Geodesic Lines</label>
             </div>
         </div>
+        <div class="form-group">
+            <div class="form-check form-check-inline">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="showTerminator" oninput="displayUpdated();" checked>
+                <label class="form-check-label" for="showTerminator">Terminator / Greyline</label>
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="form-check form-check-inline">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="showMaidenheadGrid" oninput="displayUpdated();">
+                <label class="form-check-label" for="showMaidenheadGrid">Maidenhead Grid</label>
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="form-check form-check-inline">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="showCQZones" oninput="displayUpdated();">
+                <label class="form-check-label" for="showCQZones">CQ Zones</label>
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="form-check form-check-inline">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="showITUZones" oninput="displayUpdated();">
+                <label class="form-check-label" for="showITUZones">ITU Zones</label>
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="form-check form-check-inline">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="showWABWAIGrid" oninput="displayUpdated();">
+                <label class="form-check-label" for="showWABWAIGrid">WAB/WAI Grid</label>
+            </div>
+        </div>
     </div>
 </div>

templates/cards/modes.html

@@ -1,6 +1,6 @@
 <div class="card">
     <div class="card-body">
         <h5 class="card-title">Modes</h5>
-        <p id="mode-options" class="card-text spothole-card-text"></p>
+        <div id="mode-options" class="card-text spothole-card-text"></div>
     </div>
 </div>

templates/cards/number-of-alerts.html

@@ -2,7 +2,7 @@
     <div class="card-body">
         <h5 class="card-title">Number of Alerts</h5>
         <p class="card-text spothole-card-text">Show up to
-            <select id="alerts-to-fetch" class="storeable-select form-select ms-2" oninput="filtersUpdated();"  style="width: 5em;display: inline-block;">
+            <select id="alerts-to-fetch" class="storeable-select form-select ms-2 me-2" oninput="filtersUpdated();"  style="width: 5em;display: inline-block;">
             {% for c in web_ui_options["alert-count"] %}
                 <option value="{{c}}" {% if web_ui_options["alert-count-default"] == c %}selected{% end %}>{{c}}</option>
             {% end %}

templates/cards/qrz.html

@@ -0,0 +1,27 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">QRZ.com</h5>
+        <div class="card-text spothole-card-text">
+            <div class="form-check mb-2">
+                <input type="checkbox" class="storeable-checkbox form-check-input" id="qrz-enabled" onchange="saveSettings();">
+                <label for="qrz-enabled" class="form-check-label">Use data from QRZ.com</label>
+            </div>
+            <div class="mb-2">
+                <input type="text" class="storeable-text form-control" id="qrz-username" placeholder="Username (Callsign)" onchange="saveSettings();" autocomplete="username">
+            </div>
+            <div class="mb-2">
+                <input type="password" class="password-field form-control" id="qrz-password" placeholder="Password" data-remember-checkbox="qrz-remember-password" onchange="saveSettings();" autocomplete="current-password">
+            </div>
+            <div class="form-check">
+                <input type="checkbox" class="storeable-checkbox form-check-input" id="qrz-remember-password" onchange="saveSettings();">
+                <label for="qrz-remember-password" class="form-check-label">Remember password</label>
+            </div>
+            <div class="mt-3">
+                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="location.reload();">Reload with this data</button>
+            </div>
+            <div class="mt-1">
+                <small>See <a href="/about#privacy">Privacy</a> for more information.</small>
+            </div>
+        </div>
+    </div>
+</div>

templates/cards/sigs.html

@@ -1,6 +1,6 @@
 <div class="card">
     <div class="card-body">
         <h5 class="card-title">SIGs</h5>
-        <p id="sig-options" class="card-text spothole-card-text"></p>
+        <div id="sig-options" class="card-text spothole-card-text"></div>
     </div>
 </div>

templates/cards/sources.html

@@ -1,6 +1,6 @@
 <div class="card">
     <div class="card-body">
         <h5 class="card-title">Sources</h5>
-        <p id="source-options" class="card-text spothole-card-text"></p>
+        <div id="source-options" class="card-text spothole-card-text"></div>
     </div>
 </div>

templates/cards/table-columns-alerts.html

@@ -1,35 +1,35 @@
 <div class="card">
     <div class="card-body">
         <h5 class="card-title">Table Columns</h5>
-        <div class="form-group">
+        <div class="row row-cols-2 g-1">
-            <div class="form-check form-check-inline">
+            <div class="col"><div class="form-check">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowStartTime" value="tableShowStartTime" oninput="columnsUpdated();" checked>
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowStartTime" value="tableShowStartTime" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowStartTime">Start Time</label>
+                <label class="form-check-label" for="tableShowStartTime">Start Time</label>
-            </div>
+            </div></div>
-            <div class="form-check form-check-inline">
+            <div class="col"><div class="form-check">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowEndTime" value="tableShowEndTime" oninput="columnsUpdated();" checked>
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowEndTime" value="tableShowEndTime" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowEndTime">End Time</label>
+                <label class="form-check-label" for="tableShowEndTime">End Time</label>
-            </div>
+            </div></div>
-            <div class="form-check form-check-inline">
+            <div class="col"><div class="form-check">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDX" value="tableShowDX" oninput="columnsUpdated();" checked>
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDX" value="tableShowDX" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowDX">DX</label>
+                <label class="form-check-label" for="tableShowDX">DX</label>
-            </div>
+            </div></div>
-            <div class="form-check form-check-inline">
+            <div class="col"><div class="form-check">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowFreqsModes" value="tableShowFreqsModes" oninput="columnsUpdated();" checked>
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowFreqsModes" value="tableShowFreqsModes" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowFreqsModes">Frequencies & Modes</label>
+                <label class="form-check-label" for="tableShowFreqsModes">Freq &amp; Mode</label>
-            </div>
+            </div></div>
-            <div class="form-check form-check-inline">
+            <div class="col"><div class="form-check">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowComment" value="tableShowComment" oninput="columnsUpdated();" checked>
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowComment" value="tableShowComment" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowComment">Comment</label>
+                <label class="form-check-label" for="tableShowComment">Comment</label>
-            </div>
+            </div></div>
-            <div class="form-check form-check-inline">
+            <div class="col"><div class="form-check">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowSource" value="tableShowSource" oninput="columnsUpdated();" checked>
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowSource" value="tableShowSource" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowSource">Source</label>
+                <label class="form-check-label" for="tableShowSource">Source</label>
-            </div>
+            </div></div>
-            <div class="form-check form-check-inline">
+            <div class="col"><div class="form-check">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowRef" value="tableShowRef" oninput="columnsUpdated();" checked>
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowRef" value="tableShowRef" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowRef">Ref.</label>
+                <label class="form-check-label" for="tableShowRef">Ref.</label>
-            </div>
+            </div></div>
         </div>
     </div>
-</div>
+</div>

templates/cards/table-columns-spots.html

@@ -1,47 +1,47 @@
 <div class="card">
     <div class="card-body">
         <h5 class="card-title">Table Columns</h5>
-        <div class="form-group">
+        <div class="row row-cols-2 g-1">
-            <div class="form-check form-check-inline">
+            <div class="col"><div class="form-check">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowTime" value="tableShowTime" oninput="columnsUpdated();" checked>
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowTime" value="tableShowTime" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowTime">Time</label>
+                <label class="form-check-label" for="tableShowTime">Time</label>
-            </div>
+            </div></div>
-            <div class="form-check form-check-inline">
+            <div class="col"><div class="form-check">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDX" value="tableShowDX" oninput="columnsUpdated();" checked>
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDX" value="tableShowDX" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowDX">DX</label>
+                <label class="form-check-label" for="tableShowDX">DX</label>
-            </div>
+            </div></div>
-            <div class="form-check form-check-inline">
+            <div class="col"><div class="form-check">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowFreq" value="tableShowFreq" oninput="columnsUpdated();" checked>
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowFreq" value="tableShowFreq" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowFreq">Frequency</label>
+                <label class="form-check-label" for="tableShowFreq">Frequency</label>
-            </div>
+            </div></div>
-            <div class="form-check form-check-inline">
+            <div class="col"><div class="form-check">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowMode" value="tableShowMode" oninput="columnsUpdated();" checked>
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowMode" value="tableShowMode" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowMode">Mode</label>
+                <label class="form-check-label" for="tableShowMode">Mode</label>
-            </div>
+            </div></div>
-            <div class="form-check form-check-inline">
+            <div class="col"><div class="form-check">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowComment" value="tableShowComment" oninput="columnsUpdated();" checked>
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowComment" value="tableShowComment" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowComment">Comment</label>
+                <label class="form-check-label" for="tableShowComment">Comment</label>
-            </div>
+            </div></div>
-            <div class="form-check form-check-inline">
+            <div class="col"><div class="form-check">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowBearing" value="tableShowBearing" oninput="columnsUpdated();">
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowBearing" value="tableShowBearing" oninput="columnsUpdated();">
-              <label class="form-check-label" for="tableShowBearing">Bearing</label>
+                <label class="form-check-label" for="tableShowBearing">Bearing</label>
-            </div>
+            </div></div>
-            <div class="form-check form-check-inline">
+            <div class="col"><div class="form-check">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowType" value="tableShowType" oninput="columnsUpdated();" checked>
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowType" value="tableShowType" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowType">Type</label>
+                <label class="form-check-label" for="tableShowType">Type</label>
-            </div>
+            </div></div>
-            <div class="form-check form-check-inline">
+            <div class="col"><div class="form-check">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowRef" value="tableShowRef" oninput="columnsUpdated();" checked>
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowRef" value="tableShowRef" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowRef">Ref.</label>
+                <label class="form-check-label" for="tableShowRef">Ref.</label>
-            </div>
+            </div></div>
-            <div class="form-check form-check-inline">
+            <div class="col"><div class="form-check">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDE" value="tableShowDE" oninput="columnsUpdated();" checked>
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDE" value="tableShowDE" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowDE">DE</label>
+                <label class="form-check-label" for="tableShowDE">DE</label>
-            </div>
+            </div></div>
-            <div class="form-check form-check-inline">
+            <div class="col"><div class="form-check">
-              <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowWorkedCheckbox" value="tableShowWorkedCheckbox" oninput="columnsUpdated();" checked>
+                <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowWorkedCheckbox" value="tableShowWorkedCheckbox" oninput="columnsUpdated();" checked>
-              <label class="form-check-label" for="tableShowWorkedCheckbox">Worked?</label>
+                <label class="form-check-label" for="tableShowWorkedCheckbox">Worked?</label>
-            </div>
+            </div></div>
         </div>
     </div>
-</div>
+</div>

templates/conditions.html

@@ -137,7 +137,7 @@
 {% if has_noaa_forecast %}
 <div class="card mt-5">
     <div class="card-header">
-        Forecast
+        Solar Weather Forecast
     </div>
     <div class="card-body">
         <div class="row mb-4">
@@ -173,6 +173,47 @@
 </div>
 {% end %}
 
+{% if has_giro_ionosonde %}
+<div class="card mt-5">
+    <div class="card-header">
+        Ionosonde Data
+    </div>
+    <div class="card-body">
+        <div class="mb-3">
+            <label for="ionosonde-station" class="form-label">Ionosonde station:</label>
+            <select id="ionosonde-station" class="form-select storeable-select d-inline-block ms-2 w-auto"
+                    oninput="ionosondeStationChanged();">
+            </select>
+        </div>
+        <div id="ionosonde-latest" class="mb-3">
+            <div id="ionosonde-no-data" class="alert alert-warning mt-2 mb-0 py-2 js-hidden">No data available for this station.</div>
+            <div id="ionosonde-data-rows" class="js-hidden">
+                <div class="row align-items-center me-0">
+                    <div class="col-12 py-2 text-muted">Latest values as of <span id="ionosonde-latest-time"></span></div>
+                </div>
+                <div class="row align-items-center me-0">
+                    <div class="col-12 col-md-4 py-2">LUF: <strong id="ionosonde-latest-luf"></strong></div>
+                    <div class="col-12 col-md-4 py-2">foF2: <strong id="ionosonde-latest-fof2"></strong></div>
+                    <div class="col-12 col-md-4 py-2">MUF (3000 km): <strong id="ionosonde-latest-muf"></strong></div>
+                </div>
+                <div id="ionosonde-stale-warning" class="alert alert-warning mt-2 mb-0 py-2 js-hidden">Data is more than 12 hours old!</div>
+            </div>
+        </div>
+        <div id="ionosonde-band-state" class="mb-3 js-hidden">
+            <table class="table table-sm table-bordered mb-0 d-none d-md-table table-fixed-on-desktop">
+                <thead><tr id="ionosonde-band-state-head"></tr></thead>
+                <tbody><tr id="ionosonde-band-state-row"></tr></tbody>
+            </table>
+            <table class="table table-sm table-bordered mb-0 d-md-none">
+                <tbody id="ionosonde-band-state-body"></tbody>
+            </table>
+        </div>
+        <canvas id="ionosonde-chart" class="mt-3 mb-3 hideonmobile"></canvas>
+        <div class="form-text mt-2">Data from the <a href="https://lgdc.uml.edu/">Lowell GIRO Data Center</a>.</div>
+    </div>
+</div>
+{% end %}
+
 <div class="card mt-5">
     <div class="card-header">
         DX Opportunities
@@ -180,8 +221,8 @@
     <div class="card-body">
         <div class="mb-3">
             <label for="dxstats-de-continent" class="form-label">Your continent:</label>
-            <select id="dxstats-de-continent" class="form-select storeable-select d-inline-block ms-2"
+            <select id="dxstats-de-continent" class="form-select storeable-select d-inline-block ms-2 w-auto"
-                    style="width: auto;" oninput="dxStatsContientChanged();">
+                    oninput="dxStatsContientChanged();">
                 <option value="EU">Europe</option>
                 <option value="NA">North America</option>
                 <option value="SA">South America</option>
@@ -192,7 +233,7 @@
             </select>
         </div>
         <div class="table-responsive">
-            <table class="table table-sm table-bordered mb-0">
+            <table class="table table-sm table-bordered mb-0 table-fixed-on-desktop">
                 <thead>
                 <tr>
                     <th></th>
@@ -229,8 +270,9 @@
     </div>
 </div>
 
-<script src="/js/common.js?v=1775295943"></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script>
-<script src="/js/conditions.js?v=1775295943"></script>
+<script src="/js/common.js?v=1780424170"></script>
+<script src="/js/conditions.js?v=1780424170"></script>
 <script>$(document).ready(function () {
     $("#nav-link-conditions").addClass("active");
 }); <!-- highlight active page in nav --></script>

templates/map.html

@@ -2,12 +2,12 @@
 {% block content %}
 
 <div id="map">
-    <div id="settingsButtonRowMap" class="mt-3 px-3" style="z-index: 1002; position: relative;">
+    <div id="settingsButtonRowMap" class="mt-3 px-3">
         <div class="row mb-3">
             <div class="col-auto me-auto pt-3"></div>
             <div class="col-auto">
                 <div class="d-inline-flex gap-1">
-                    {% module Template("widgets/filters-display-buttons.html", web_ui_options=web_ui_options) %}
+                    {% module Template("widgets/filters-display-data-buttons.html", web_ui_options=web_ui_options) %}
                 </div>
             </div>
         </div>
@@ -47,6 +47,9 @@
                     <div class="col">
                         {% module Template("cards/spot-age.html", web_ui_options=web_ui_options) %}
                     </div>
+                    <div class="col">
+                        {% module Template("cards/basemap.html", web_ui_options=web_ui_options) %}
+                    </div>
                     <div class="col">
                         {% module Template("cards/map-features.html", web_ui_options=web_ui_options) %}
                     </div>
@@ -56,23 +59,44 @@
                 </div>
             </div>
         </div>
+
+        <div id="data-area" class="appearing-panel card mb-3">
+            {% module Template("widgets/data-area-header.html", web_ui_options=web_ui_options) %}
+            <div class="card-body">
+                <div class="row row-cols-1 row-cols-md-4 g-4">
+                    <div class="col">
+                        {% module Template("cards/qrz.html", web_ui_options=web_ui_options) %}
+                    </div>
+                    <div class="col">
+                        {% module Template("cards/hamqth.html", web_ui_options=web_ui_options) %}
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-extra-markers@1.2.2/dist/css/leaflet.extra-markers.min.css">
 <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/overlapping-marker-spiderfier-leaflet/dist/oms.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/leaflet-providers@2.0.0/leaflet-providers.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/leaflet-extra-markers@1.2.2/src/assets/js/leaflet.extra-markers.min.js" type="module"></script>
 <script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic"></script>
+<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/text-image/dist/text-image.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@joergdietrich/leaflet.terminator@1.1.0/L.Terminator.min.js"></script>
+<script src="https://ianrenton.github.io/Leaflet.Maidenhead/src/L.Maidenhead.js"></script>
+<script src="https://ha8tks.github.io/Leaflet.ITUzones/src/L.ITUzones.js"></script>
+<script src="https://ha8tks.github.io/Leaflet.CQzones/src/L.CQzones.js"></script>
+<script src="https://misc.ianrenton.com/Leaflet.WorkedAllBritainIreland/L.WorkedAllBritainIreland.js"></script>
 
 <script>
     let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1775295942"></script>
+<script src="/js/common.js?v=1780424170"></script>
-<script src="/js/spotsbandsandmap.js?v=1775295942"></script>
+<script src="/js/spotsbandsandmap.js?v=1780424170"></script>
-<script src="/js/map.js?v=1775295942"></script>
+<script src="/js/map.js?v=1780424170"></script>
 <script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

templates/skeleton.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <meta name="color-scheme" content="light dark">
+    <meta name="theme-color" content="white"/>
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent">
+
+    <meta property="og:title" content="Spothole"/>
+    <meta property="twitter:title" content="Spothole"/>
+    <meta name="description" content="An Amateur Radio spotting tool bringing together DX clusters and outdoor programmes, providing a universal JSON API and web interface."/>
+    <meta property="og:description" content="An Amateur Radio spotting tool bringing together DX clusters and outdoor programmes, providing a universal JSON API and web interface."/>
+    <link rel="canonical" href="https://spothole.app/"/>
+    <meta property="og:url" content="https://spothole.app/"/>
+    <meta property="og:image" content="https://spothole.app/img/banner.png"/>
+    <meta property="twitter:image" content="https://spothole.app/img/banner.png"/>
+    <meta name="twitter:card" content="summary_large_image"/>
+    <meta name="author" content="Ian Renton"/>
+    <meta property="og:locale" content="en_GB"/>
+    <meta property="og:type" content="website"/>
+
+    <title>Spothole</title>
+
+    <link rel="icon" type="image/png" href="/img/icon-512.png">
+    <link rel="apple-touch-icon" href="img/icon-512-pwa.png">
+    <link rel="alternate icon" type="image/png" href="/img/icon-192.png">
+    <link rel="alternate icon" type="image/png" href="/img/icon-32.png">
+    <link rel="alternate icon" type="image/png" href="/img/icon-16.png">
+    <link rel="alternate icon" type="image/x-icon" href="/favicon.ico">
+
+    <link rel="manifest" href="manifest.webmanifest">
+
+    {% block head_extra %}{% end %}
+</head>
+<body>
+{% block body %}{% end %}
+</body>
+</html>

templates/spots.html

@@ -19,7 +19,7 @@
         <div class="col-md-8 text-end">
             <div class="d-inline-flex gap-3">
                 {% module Template("widgets/search.html", web_ui_options=web_ui_options) %}
-                {% module Template("widgets/filters-display-buttons.html", web_ui_options=web_ui_options) %}
+                {% module Template("widgets/filters-display-data-buttons.html", web_ui_options=web_ui_options) %}
             </div>
         </div>
     </div>
@@ -62,18 +62,35 @@
                 <div class="col">
                     {% module Template("cards/number-of-spots.html", web_ui_options=web_ui_options) %}
                 </div>
-                <div class="col">
-                    {% module Template("cards/location.html", web_ui_options=web_ui_options) %}
-                </div>
-                <div class="col">
-                    {% module Template("cards/worked-calls.html", web_ui_options=web_ui_options) %}
-                </div>
                 <div class="col">
                     {% module Template("cards/color-scheme-and-band-color-scheme.html", web_ui_options=web_ui_options) %}
                 </div>
                 <div class="col">
                     {% module Template("cards/table-columns-spots.html", web_ui_options=web_ui_options) %}
                 </div>
+                <div class="col">
+                    {% module Template("cards/audio.html", web_ui_options=web_ui_options) %}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="data-area" class="appearing-panel card mb-3">
+        {% module Template("widgets/data-area-header.html", web_ui_options=web_ui_options) %}
+        <div class="card-body">
+            <div class="row row-cols-1 row-cols-md-4 g-4">
+                <div class="col">
+                    {% module Template("cards/qrz.html", web_ui_options=web_ui_options) %}
+                </div>
+                <div class="col">
+                    {% module Template("cards/hamqth.html", web_ui_options=web_ui_options) %}
+                </div>
+                <div class="col">
+                    {% module Template("cards/location.html", web_ui_options=web_ui_options) %}
+                </div>
+                <div class="col">
+                    {% module Template("cards/worked-calls.html", web_ui_options=web_ui_options) %}
+                </div>
             </div>
         </div>
     </div>
@@ -87,9 +104,9 @@
 <script>
     let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1775295942"></script>
+<script src="/js/common.js?v=1780424170"></script>
-<script src="/js/spotsbandsandmap.js?v=1775295942"></script>
+<script src="/js/spotsbandsandmap.js?v=1780424170"></script>
-<script src="/js/spots.js?v=1775295942"></script>
+<script src="/js/spots.js?v=1780424170"></script>
 <script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

templates/status.html

@@ -59,8 +59,8 @@
     </div>
 </div>
 
-<script src="/js/common.js?v=1775295943"></script>
+<script src="/js/common.js?v=1780424170"></script>
-<script src="/js/status.js?v=1775295943"></script>
+<script src="/js/status.js?v=1780424170"></script>
 <script>
     $(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav -->
 </script>

templates/widgets/band-color-scheme.html

@@ -1,4 +1,4 @@
-<label class="form-check-label" for="band-color-scheme">Band color scheme</label><br/>
+<label class="form-check-label form-label" for="band-color-scheme">Band color scheme</label><br/>
 <select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
     <option value="PSK Reporter" {% if web_ui_options["band-color-scheme-default"] == "PSK Reporter" %}selected{% end %}>PSK Reporter</option>
     <option value="PSK Reporter (Adjusted)" {% if web_ui_options["band-color-scheme-default"] == "PSK Reporter (Adjusted)" %}selected{% end %}>PSK Reporter (Adjusted)</option>

templates/widgets/color-scheme.html

@@ -1,4 +1,4 @@
-<label class="form-check-label" for="color-scheme">UI color scheme</label>
+<label class="form-check-label form-label" for="color-scheme">UI color scheme</label>
 <select id="color-scheme" class="storeable-select form-select d-inline-block" oninput="setColorSchemeFromUI();" style="display: inline-block;">
     <option value="auto" {% if web_ui_options["color-scheme-default"] == "auto" %}selected{% end %}>Automatic</option>
     <option value="light" {% if web_ui_options["color-scheme-default"] == "light" %}selected{% end %}>Light</option>

templates/widgets/data-area-header.html

@@ -0,0 +1,10 @@
+<div class="card-header">
+    <div class="row">
+        <div class="col-auto me-auto">
+            Data
+        </div>
+        <div class="col-auto d-inline-flex">
+            <button id="close-data-button" type="button" class="btn-close btn-close" aria-label="Close" onclick="closeDataPanel();"></button>
+        </div>
+    </div>
+</div>

templates/widgets/filters-display-buttons.html

@@ -1,4 +0,0 @@
-<div class="d-inline-flex gap-1">
-    <button id="filters-button" type="button" class="btn btn-outline-secondary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i>&nbsp;Filters</button>
-    <button id="display-button" type="button" class="btn btn-outline-secondary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i>&nbsp;Display</button>
-</div>

templates/widgets/filters-display-data-buttons.html

@@ -0,0 +1,5 @@
+<div class="d-inline-flex gap-1">
+    <button id="filters-button" type="button" class="btn btn-outline-secondary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i><span class="hideonmobile">&nbsp;Filters</span></button>
+    <button id="display-button" type="button" class="btn btn-outline-secondary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i><span class="hideonmobile">&nbsp;Display</span></button>
+    <button id="data-button" type="button" class="btn btn-outline-secondary" data-bs-toggle="button" onclick="toggleDataPanel();"><i class="fa-solid fa-database"></i><span class="hideonmobile">&nbsp;Your data</span></button>
+</div>

webassets/css/style.css

@@ -100,11 +100,6 @@ div.appearing-panel {
     display: none;
 }
 
-.spothole-card-text {
-    line-height: 2.5em !important;
-}
-
-
 
 /* SPOTS/ALERTS PAGES, MAIN TABLE */
 
@@ -216,13 +211,16 @@ div#map {
     font-size: 16px;
 }
 
+#settingsButtonRowMap {
+    position: relative;
+    z-index: 1002;
+}
+
 .leaflet-container {
     font-family: var(--bs-body-font-family) !important;
 }
-
+.leaflet-control-attribution {
-[data-bs-theme=dark] .leaflet-layer,
+    background: none;
-[data-bs-theme=dark] .leaflet-control-attribution {
-  filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
 }
 
 /* Make buttons overlaid on the map have a non-transparent fill so you can see the text better */
@@ -330,6 +328,31 @@ div.band-spot:hover span.band-spot-info {
 }
 
 
+/* UTILITY CLASSES */
+
+/* For elements initially hidden and shown/hidden by JS. Unlike Bootstrap's d-none this has no !important,
+   so jQuery's .show() / .hide() / .toggle() can override it with an inline style as expected. */
+.js-hidden {
+    display: none;
+}
+
+.table-fixed-on-desktop {
+    table-layout: fixed;
+}
+
+.input-narrow {
+    max-width: 8em;
+}
+.input-medium {
+    max-width: 12em;
+}
+
+/* Pushes a submit button down to align with labelled inputs in a flex row */
+.mt-2em {
+    margin-top: 2em;
+}
+
+
 /* GENERAL MOBILE SUPPORT */
 
 @media (max-width: 991.99px) {
@@ -353,6 +376,9 @@ div.band-spot:hover span.band-spot-info {
     input#search {
         max-width: 7em;
     }
+    .table-fixed-on-desktop {
+        table-layout: auto !important;
+    }
 }
 
 @media (min-width: 992px) {

webassets/js/add-spot.js

@@ -103,7 +103,11 @@ function addSpot() {
 
 // Show an "add spot" error.
 function showAddSpotError(text) {
-    $("#result-bad").html("<div class='alert alert-danger alert-dismissible fade show mb-0 mt-4' role='alert'><i class='fa-solid fa-triangle-exclamation'></i> " + text + "<button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button></div>");
+    var div = $("<div class='alert alert-danger alert-dismissible fade show mb-0 mt-4' role='alert'></div>");
+    div.append("<i class='fa-solid fa-triangle-exclamation'></i> ");
+    div.append(document.createTextNode(text));
+    div.append("<button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button>");
+    $("#result-bad").empty().append(div);
 }
 
 // Force callsign and mode capitalisation

webassets/js/alerts.js

@@ -6,7 +6,7 @@ var alerts = []
 
 // Load alerts and populate the table.
 function loadAlerts() {
-    $.getJSON('/api/v1/alerts' + buildQueryString(), function(jsonData) {
+    $.getJSON('/api/v1/alerts' + buildQueryString(false), function(jsonData) {
         // Store last updated time
         lastUpdateTime = moment.utc();
         updateRefreshDisplay();
@@ -18,7 +18,7 @@ function loadAlerts() {
 }
 
 // Build a query string for the API, based on the filters that the user has selected.
-function buildQueryString() {
+function buildQueryString(includeCredentials) {
     var str =  "?";
     ["dx_continent", "source"].forEach(fn => {
         if (!allFilterOptionsSelected(fn)) {
@@ -33,6 +33,9 @@ function buildQueryString() {
     if ($("#dxpeditions_skip_max_duration_check")[0].checked) {
         str = str + "&dxpeditions_skip_max_duration_check=true";
     }
+    if (includeCredentials) {
+        str = str + getCredentialQueryString();
+    }
     return str;
 }
 
@@ -218,9 +221,9 @@ function addAlertRowsToTable(tbody, alerts) {
             var items = []
             for (var i = 0; i < a["sig_refs"].length; i++) {
                 if (a["sig_refs"][i]["url"] != null) {
-                    items[i] = `<a href='${a["sig_refs"][i]["url"]}' title='${a["sig_refs"][i]["name"]}' target='_new' class='sig-ref-link'>${a["sig_refs"][i]["id"]}</a>`
+                    items[i] = `<a href='${encodeURI(a["sig_refs"][i]["url"])}' title='${escapeHtml(a["sig_refs"][i]["name"])}' target='_new' class='sig-ref-link'>${escapeHtml(a["sig_refs"][i]["id"])}</a>`
                 } else {
-                    items[i] = `${a["sig_refs"][i]["id"]}`
+                    items[i] = `${escapeHtml(a["sig_refs"][i]["id"])}`
                 }
             }
             sig_refs = items.join(", ");

webassets/js/bands.js

@@ -12,7 +12,7 @@ BAND_COLUMN_SPOT_DIV_HEIGHT_PX = BAND_COLUMN_FONT_SIZE * 1.6;
 
 // Load spots and populate the bands display.
 function loadSpots() {
-    $.getJSON('/api/v1/spots' + buildQueryString(), function(jsonData) {
+    $.getJSON('/api/v1/spots' + buildQueryString(false), function(jsonData) {
         // Store last updated time
         lastUpdateTime = moment.utc();
         updateRefreshDisplay();
@@ -24,7 +24,7 @@ function loadSpots() {
 }
 
 // Build a query string for the API, based on the filters that the user has selected.
-function buildQueryString() {
+function buildQueryString(includeCredentials) {
     var str =  "?";
     ["dx_continent", "de_continent", "mode", "source", "band", "sig"].forEach(fn => {
         if (!allFilterOptionsSelected(fn)) {
@@ -34,6 +34,9 @@ function buildQueryString() {
     str = str + "max_age=" + $("#max-spot-age option:selected").val();
     // Additional filters for the bands view: No dupes, no QRT
     str = str + "&dedupe=true&allow_qrt=false";
+    if (includeCredentials) {
+        str = str + getCredentialQueryString();
+    }
     return str;
 }
 

webassets/js/common.js

@@ -2,6 +2,49 @@
 var options = {};
 // Last time we updated the spots/alerts list on display.
 var lastUpdateTime;
+// Normally load user settings from local storage, unless embedded mode is in use
+let useLocalStorage = true;
+
+// Save settings to local storage. Suppressed if "use local storage" is false.
+function saveSettings() {
+    if (useLocalStorage) {
+        // Find all storeable UI elements, store a key of "element id:property name" mapped to the value of that
+        // property. For a checkbox, that's the "checked" property.
+        $(".storeable-checkbox").each(function () {
+            localStorage.setItem("#" + $(this)[0].id + ":checked", JSON.stringify($(this)[0].checked));
+        });
+        $(".storeable-select").each(function () {
+            localStorage.setItem("#" + $(this)[0].id + ":value", JSON.stringify($(this)[0].value));
+        });
+        $(".storeable-text").each(function () {
+            localStorage.setItem("#" + $(this)[0].id + ":value", JSON.stringify($(this)[0].value));
+        });
+        // Password fields are only saved if the corresponding "remember password" checkbox is ticked.
+        $(".password-field").each(function () {
+            var pwKey = "#" + $(this)[0].id + ":value";
+            var rememberCheckboxId = $(this).data("remember-checkbox");
+            if (rememberCheckboxId && $("#" + rememberCheckboxId)[0] && $("#" + rememberCheckboxId)[0].checked) {
+                localStorage.setItem(pwKey, JSON.stringify($(this)[0].value));
+            } else {
+                localStorage.removeItem(pwKey);
+            }
+        });
+    }
+}
+
+// Load settings from local storage and set up the filter selectors. Suppressed if "use local storage" is false.
+function loadSettings() {
+    if (useLocalStorage) {
+        // Find all local storage entries and push their data to the corresponding UI element
+        Object.keys(localStorage).forEach(function (key) {
+            if (key.startsWith("#") && key.includes(":")) {
+                // Split the key back into an element ID and a property
+                var split = key.split(":");
+                $(split[0]).prop(split[1], JSON.parse(localStorage.getItem(key)));
+            }
+        });
+    }
+}
 
 // Load and apply any URL params. This is used for "embedded mode" where another site can embed a version of
 // Spothole and provide its own interface options rather than using the user's saved ones. These may select things
@@ -75,9 +118,9 @@ function getQueryStringFor(parameter) {
 
 // For a parameter, such as dx_continent, get the filter options that are currently selected in the UI.
 function getSelectedFilterOptions(parameter) {
-    return $(".filter-button-" + parameter).filter(function() {
+    return $(".filter-button-" + parameter).filter(function () {
         return this.checked;
-    }).map(function() {
+    }).map(function () {
         return this.value;
     }).get().join(",");
 }
@@ -85,26 +128,26 @@ function getSelectedFilterOptions(parameter) {
 // For a parameter, such as dx_continent, return true if all possible options are enabled. (In this case, we don't need
 // to bother sending this as one of the query parameters to the API; no parameter provided implies "send everything".)
 function allFilterOptionsSelected(parameter) {
-    var filter = $(".filter-button-" + parameter).filter(function() {
+    var filter = $(".filter-button-" + parameter).filter(function () {
         return !this.checked;
     }).get();
     return filter.length == 0;
 }
 
 
-// Generate a filter card with multiple toggle buttons plus All/None buttons.
+// Generate a filter card with inline checkboxes plus All/None links.
 function generateMultiToggleFilterCard(elementID, filterQuery, options) {
-    // Create a button for each option
+    var $row = $('<div>');
     options.forEach(o => {
-        $(elementID).append(`<input type="checkbox" class="btn-check filter-button-${filterQuery} storeable-checkbox" name="options" id="filter-button-${filterQuery}-${o}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-success" for="filter-button-${filterQuery}-${o}">${o}</label> `);
+        $row.append(`<div class="form-check form-check-inline"><input type="checkbox" class="form-check-input filter-button-${filterQuery} storeable-checkbox" id="filter-button-${filterQuery}-${o}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="form-check-label" for="filter-button-${filterQuery}-${o}">${o}</label></div>`);
     });
-    // Create All/None buttons
+    $(elementID).append($row);
-    $(elementID).append(` <span style="display: inline-block"><button id="filter-button-${filterQuery}-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', true);">All</button>&nbsp;<button id="filter-button-${filterQuery}-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', false);">None</button></span>`);
+    $(elementID).append(`<div class="mt-1"><a href="#" onclick="toggleFilterButtons('${filterQuery}', true); return false;">All</a> &nbsp; <a href="#" onclick="toggleFilterButtons('${filterQuery}', false); return false;">None</a></div>`);
 }
 
 // Method called when "All" or "None" is clicked
 function toggleFilterButtons(filterQuery, state) {
-    $(".filter-button-" + filterQuery).each(function() {
+    $(".filter-button-" + filterQuery).each(function () {
         $(this).prop('checked', state);
     });
     filtersUpdated();
@@ -185,8 +228,9 @@ function listenForOSThemeChange() {
 
 // Panel toggle functions
 const PANELS = [
-    { area: "#filters-area",button: "#filters-button" },
+    {area: "#filters-area", button: "#filters-button"},
-    { area: "#display-area", button: "#display-button" },
+    {area: "#display-area", button: "#display-button"},
+    {area: "#data-area", button: "#data-button"},
 ];
 
 // Toggle a panel open or closed. If opening, all other visible panels are closed first.
@@ -206,18 +250,58 @@ function togglePanel(areaId) {
 // Close a panel and deactivate its toggle button.
 function closePanel(areaId) {
     const panel = PANELS.find(p => p.area === areaId);
-    if (panel) { $(panel.button).button("toggle"); }
+    if (panel) {
+        $(panel.button).button("toggle");
+    }
     $(areaId).hide();
 }
 
-function toggleFiltersPanel()    { togglePanel("#filters-area"); }
+function toggleFiltersPanel() {
-function closeFiltersPanel()     { closePanel("#filters-area"); }
+    togglePanel("#filters-area");
-function toggleDisplayPanel()    { togglePanel("#display-area"); }
+}
-function closeDisplayPanel()     { closePanel("#display-area"); }
+
+function closeFiltersPanel() {
+    closePanel("#filters-area");
+}
+
+function toggleDisplayPanel() {
+    togglePanel("#display-area");
+}
+
+function closeDisplayPanel() {
+    closePanel("#display-area");
+}
+
+function toggleDataPanel() {
+    togglePanel("#data-area");
+}
+
+function closeDataPanel() {
+    closePanel("#data-area");
+}
+
+// Build a query string fragment containing any QRZ.com / HamQTH credentials the user has supplied,
+// provided the corresponding "enabled" checkbox is ticked.
+function getCredentialQueryString() {
+    var str = "";
+    if ($("#qrz-enabled")[0] && $("#qrz-enabled")[0].checked) {
+        var qrzUsername = $("#qrz-username").val();
+        var qrzPassword = $("#qrz-password").val();
+        if (qrzUsername) str += "&qrz_username=" + encodeURIComponent(qrzUsername);
+        if (qrzPassword) str += "&qrz_password=" + encodeURIComponent(qrzPassword);
+    }
+    if ($("#hamqth-enabled")[0] && $("#hamqth-enabled")[0].checked) {
+        var hamqthUsername = $("#hamqth-username").val();
+        var hamqthPassword = $("#hamqth-password").val();
+        if (hamqthUsername) str += "&hamqth_username=" + encodeURIComponent(hamqthUsername);
+        if (hamqthPassword) str += "&hamqth_password=" + encodeURIComponent(hamqthPassword);
+    }
+    return str;
+}
 
 
 // Startup
-$(document).ready(function() {
+$(document).ready(function () {
     usePreferredTheme();
     listenForOSThemeChange();
 });

webassets/js/conditions.js

@@ -1,8 +1,12 @@
 // Cache for the full dxstats API response, so we can reload on the fly if the user changes the value of their continent
 // in the select box
 let dxStatsData = null;
-// Forecast chart
+// Kp forecast chart
 let kpChart = null;
+// Cache for ionosonde data from the API
+let ionosondeData = null;
+// Ionosonde foF2/MUF chart
+let ionosondeChart = null;
 
 // Load solar conditions
 function loadSolarConditions() {
@@ -109,6 +113,14 @@ function loadSolarConditions() {
                 electronFlux <= 100 ? 'bg-success-subtle' : electronFlux <= 1000 ? 'bg-warning-subtle' : 'bg-danger-subtle');
         }
 
+        // Ionosonde
+
+        if (jsonData.ionosonde_data && Object.keys(jsonData.ionosonde_data).length > 0) {
+            ionosondeData = jsonData.ionosonde_data;
+            populateIonosondeDropdown(ionosondeData);
+            renderIonosondeData();
+        }
+
         // Forecast
 
         renderKIndexForecast(jsonData.k_index_forecast);
@@ -348,6 +360,257 @@ function renderBlackoutForecast(r1r2Data, r3Data) {
         .append(makeRow('R3 or greater', e => e.r3));
 }
 
+// Populate the ionosonde station dropdown and restore any saved selection
+function populateIonosondeDropdown(data) {
+    const select = $('#ionosonde-station');
+    const savedUrsi = localStorage.getItem('#ionosonde-station:value');
+    const savedValue = savedUrsi ? JSON.parse(savedUrsi) : null;
+    select.empty();
+    // Sort by station name rather than URSI because station name is what's displayed, and any out-of-order names might
+    // confuse the user
+    Object.values(data).sort((a, b) => a.name.localeCompare(b.name)).forEach(function (station) {
+        select.append($('<option>', {value: station.ursi, text: station.name}));
+    });
+    // Select one by default if the user's localStorage has an existing selection for this
+    if (savedValue && select.find('option[value="' + savedValue + '"]').length) {
+        select.val(savedValue);
+    }
+}
+
+// Render the foF2/MUF data and line chart for the currently selected station
+function renderIonosondeData() {
+    // First make sure that we have some data, that a station entry is selected in the drop-down box, and that the
+    // data contains an entry for that station. If not, this represents an odd state (over and above just "no data for
+    // this station", so bail out at this point. The user will have to reselect something from the list, or wait until
+    // the API is behaving itself again.
+    if (!ionosondeData) return;
+    const ursi = $('#ionosonde-station').val();
+    if (!ursi) return;
+    const station = ionosondeData[ursi];
+    if (!station) return;
+
+    // Set up some styles, matching the k-index chart. We use Bootstrap's "primary", "danger", and "success" colours
+    // not for any real reason but just to get a suitable blue, red, and green that match the other colours Spothole uses
+    const style = getComputedStyle(document.documentElement);
+    const fof2Color = style.getPropertyValue('--bs-primary').trim();
+    const mufColor = style.getPropertyValue('--bs-success').trim();
+    const lufColor = style.getPropertyValue('--bs-danger').trim();
+    const textColor = style.getPropertyValue('--bs-body-color').trim() || '#666';
+    const gridColor = style.getPropertyValue('--bs-border-color').trim() || 'rgba(128,128,128,0.3)';
+
+    // Utility function to convert the dict of timestamp-to-value into just a value array in timestamp key order
+    function toSeries(dict) {
+        if (!dict) return [];
+        return Object.entries(dict)
+            .map(([tsStr, val]) => ({ts: parseFloat(tsStr), val}))
+            .sort((a, b) => a.ts - b.ts);
+    }
+
+    const fof2Entries = toSeries(station.fof2);
+    const mufEntries = toSeries(station.muf);
+    const lufEntries = toSeries(station.luf);
+    const allTs = [...fof2Entries, ...mufEntries, ...lufEntries].map(e => e.ts);
+    if (allTs.length === 0) {
+        $('#ionosonde-no-data').show();
+        $('#ionosonde-data-rows').hide();
+        $('#ionosonde-band-state').hide();
+        $('#ionosonde-chart').hide();
+        if (ionosondeChart) { ionosondeChart.destroy(); ionosondeChart = null; }
+        return;
+    }
+    $('#ionosonde-no-data').hide();
+    $('#ionosonde-data-rows').show();
+
+    // Populate latest values summary (visible on all screen sizes)
+    const latestFof2 = fof2Entries.length ? fof2Entries[fof2Entries.length - 1].val : null;
+    const latestMuf = mufEntries.length ? mufEntries[mufEntries.length - 1].val : null;
+    const latestLuf = lufEntries.length ? lufEntries[lufEntries.length - 1].val : null;
+    const minTs = allTs.length ? Math.min(...allTs) : null;
+    const maxTs = allTs.length ? Math.max(...allTs) : null;
+    if (maxTs != null) {
+        const latestDate = moment.utc(maxTs * 1000);
+        $('#ionosonde-latest-time').text(latestDate.format('DD MMM YYYY HH:mm [UTC]') + ' (' + latestDate.fromNow() + ')');
+    }
+    $('#ionosonde-latest-luf').text(latestLuf !== null ? latestLuf.toFixed(2) + ' MHz' : 'N/A');
+    $('#ionosonde-latest-fof2').text(latestFof2 !== null ? latestFof2.toFixed(2) + ' MHz' : 'N/A');
+    $('#ionosonde-latest-muf').text(latestMuf !== null ? latestMuf.toFixed(2) + ' MHz' : 'N/A');
+    $('#ionosonde-stale-warning').toggle(maxTs !== null && (Date.now() / 1000 - maxTs) > 12 * 3600);
+
+    // Populate band state tables. There are actually two tables to populate, which is pretty janky, but allows us to
+    // display horizontally on desktop but flip it around to become a vertical list on mobile.
+    const bandStateClass = {'Closed': 'bg-danger-subtle', 'Short': 'bg-primary-subtle', 'Long': 'bg-success-subtle'};
+    const bandStates = station.band_states;
+    if (bandStates && Object.keys(bandStates).length > 0) {
+        const headRow = $('#ionosonde-band-state-head').empty();
+        const dataRow = $('#ionosonde-band-state-row').empty();
+        const vBody = $('#ionosonde-band-state-body').empty();
+        Object.entries(bandStates).forEach(([band, state]) => {
+            const cls = bandStateClass[state] || '';
+            headRow.append($('<th>').addClass('text-center').text(band));
+            dataRow.append($('<td>').addClass('text-center ' + cls).text(state));
+            vBody.append($('<tr>').append($('<td>').addClass('fw-bold').text(band)).append($('<td>').addClass(cls).text(state)));
+        });
+        $('#ionosonde-band-state').show();
+    } else {
+        $('#ionosonde-band-state').hide();
+    }
+
+    if (ionosondeChart) {
+        ionosondeChart.destroy();
+    }
+
+    // Compute tick positions at 3-hour UTC boundaries so midnight always lands on a tick, which triggers the date being
+    // printed, and in general looks nicer than arbitrary ticks based on min & max timestamp
+    const tickStep = 3 * 3600;
+    const tickValues = [];
+    tickValues.push(minTs);
+    for (let t = Math.ceil(minTs / tickStep) * tickStep; t <= maxTs; t += tickStep) {
+        tickValues.push(t);
+    }
+    tickValues.push(maxTs);
+
+    // Build time axis
+    const timeAxis = {
+        type: 'linear',
+        min: minTs,
+        max: maxTs,
+        title: {display: true, text: 'Time (UTC)', color: textColor},
+        afterBuildTicks(axis) {
+            axis.ticks = tickValues.map(v => ({value: v}));
+        },
+        ticks: {
+            color: textColor,
+            maxRotation: 45,
+            minRotation: 0,
+            callback(value) {
+                // Use the same type of display as in the k-index chart, where the labels on the axis are just HH:mm
+                // unless that's 00:00, in which case add the short date as well.
+                const dt = new Date(value * 1000);
+                const h = dt.getUTCHours();
+                const m = dt.getUTCMinutes();
+                const timeStr = String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0');
+                if (h === 0 && m === 0) {
+                    return [timeStr, dt.toLocaleDateString('en-GB', {day: '2-digit', month: 'short', timeZone: 'UTC'})];
+                }
+                return timeStr;
+            },
+        },
+        grid: {color: gridColor},
+    };
+
+    // Build frequency axis. This is pretty normal except there's no grid, because we draw extra horizontal lines for
+    // the amateur radio bands which function as grid lines for the frequency axis.
+    const freqAxis = {
+        min: 0,
+        title: {display: true, text: 'Frequency (MHz)', color: textColor},
+        ticks: {color: textColor},
+        grid: {display: false},
+    };
+
+    // List of ham bands for drawing horizontal lines
+    const AMATEUR_BANDS = [
+        {label: '160m', freq: 1.8},
+        {label: '80m', freq: 3.5},
+        {label: '60m', freq: 5.3515},
+        {label: '40m', freq: 7.0},
+        {label: '30m', freq: 10.1},
+        {label: '20m', freq: 14.0},
+        {label: '17m', freq: 18.068},
+        {label: '15m', freq: 21.0},
+        {label: '12m', freq: 24.89},
+        {label: '10m', freq: 28.0},
+    ];
+
+    // Build the horizontal lines for each ham band, including a label on the right-hand side.
+    const bandLinesPlugin = {
+        id: 'bandLines',
+        beforeDatasetsDraw(chart) {
+            const {ctx, chartArea, scales} = chart;
+            if (!scales.y) return;
+            ctx.save();
+            ctx.strokeStyle = gridColor;
+            ctx.lineWidth = 1;
+            ctx.setLineDash([]);
+            // Add an extra vertical line for 30MHz, which should correspond to the top of the chart and avoid having
+            // no top "border" gridline
+            const y30 = scales.y.getPixelForValue(30);
+            if (y30 >= chartArea.top && y30 <= chartArea.bottom) {
+                ctx.beginPath();
+                ctx.moveTo(chartArea.left, y30);
+                ctx.lineTo(chartArea.right, y30);
+                ctx.stroke();
+            }
+            ctx.font = '10px sans-serif';
+            ctx.fillStyle = textColor;
+            // Add the ham band "grid lines"
+            AMATEUR_BANDS.forEach(({label, freq}) => {
+                const y = scales.y.getPixelForValue(freq);
+                if (y < chartArea.top || y > chartArea.bottom) return;
+                ctx.beginPath();
+                ctx.moveTo(chartArea.left, y);
+                ctx.lineTo(chartArea.right, y);
+                ctx.stroke();
+                ctx.textAlign = 'right';
+                ctx.textBaseline = 'bottom';
+                ctx.fillText(label, chartArea.right - 4, y - 2);
+            });
+            ctx.restore();
+        }
+    };
+
+    // Create the chart itself
+    ionosondeChart = new Chart(document.getElementById('ionosonde-chart'), {
+        type: 'line',
+        data: {
+            datasets: [
+                {
+                    label: 'LUF',
+                    data: lufEntries.map(e => ({x: e.ts, y: e.val})),
+                    borderColor: lufColor,
+                    backgroundColor: 'transparent',
+                    pointRadius: 0,
+                    tension: 0.2,
+                },
+                {
+                    label: 'foF2',
+                    data: fof2Entries.map(e => ({x: e.ts, y: e.val})),
+                    borderColor: fof2Color,
+                    backgroundColor: 'transparent',
+                    pointRadius: 0,
+                    tension: 0.2,
+                },
+                {
+                    label: 'MUF (3000 km)',
+                    data: mufEntries.map(e => ({x: e.ts, y: e.val})),
+                    borderColor: mufColor,
+                    backgroundColor: 'transparent',
+                    pointRadius: 0,
+                    tension: 0.2,
+                }
+            ]
+        },
+        options: {
+            responsive: true,
+            aspectRatio: 3,
+            plugins: {
+                legend: {display: true, labels: {color: textColor, usePointStyle: true, pointStyle: 'line'}},
+                tooltip: {enabled: false}
+            },
+            scales: {x: timeAxis, y: freqAxis},
+        },
+        plugins: [bandLinesPlugin],
+    });
+
+    // Chart canvas is normally hidden until we get here with some definitely good data. Now we have that so show it
+    $('#ionosonde-chart').show();
+}
+
+// Called when the ionosonde station select changes
+function ionosondeStationChanged() {
+    saveSettings();
+    renderIonosondeData();
+}
+
 // Render the DX stats table for the currently selected DE continent
 function renderDxStats() {
     if (!dxStatsData) {

webassets/js/map.js

@@ -1,24 +1,46 @@
 // How often to query the server?
 const REFRESH_INTERVAL_SEC = 60;
 
+// Colours
+const MAIDENHEAD_GRID_COLOR_LIGHT = 'rgba(200, 140, 140, 1.0)';
+const CQ_ZONES_COLOR_LIGHT = 'rgba(140, 200, 140, 1.0)';
+const ITU_ZONES_COLOR_LIGHT = 'rgba(200, 200, 140, 1.0)';
+const WAB_WAI_GRID_COLOR_LIGHT = 'rgba(140, 140, 200, 1.0)';
+const MAIDENHEAD_GRID_COLOR_DARK = 'rgba(120, 60, 60, 1.0)';
+const CQ_ZONES_COLOR_DARK = 'rgba(60, 120, 60, 1.0)';
+const ITU_ZONES_COLOR_DARK = 'rgba(120, 120, 60, 1.0)';
+const WAB_WAI_GRID_COLOR_DARK = 'rgba(60, 60, 120, 1.0)';
+
 // Map layers
+var backgroundTileLayer;
 var markersLayer;
 var geodesicsLayer;
+var oms;
 var terminator;
+var maidenheadGrid;
+var cqZones;
+var ituZones;
+var wabwaiGrid;
+// Tracks the currently-loaded basemap provider string to avoid unnecessary tile reloads
+var loadedBasemap;
+// Tracks whether this is the first display of markers after page load
+var firstLoad = true;
 
 // Load spots and populate the map.
 function loadSpots() {
-    $.getJSON('/api/v1/spots' + buildQueryString(), function(jsonData) {
+    $.getJSON('/api/v1/spots' + buildQueryString(true), function(jsonData) {
         // Store data
         spots = jsonData;
         // Update map
         updateMap();
-        terminator.setTime();
+        if ($("#showTerminator")[0].checked) {
+            terminator.setTime();
+        }
     });
 }
 
 // Build a query string for the API, based on the filters that the user has selected.
-function buildQueryString() {
+function buildQueryString(includeCredentials) {
     var str =  "?";
     ["dx_continent", "de_continent", "mode", "source", "band", "sig"].forEach(fn => {
         if (!allFilterOptionsSelected(fn)) {
@@ -27,7 +49,10 @@ function buildQueryString() {
     });
     str = str + "max_age=" + $("#max-spot-age option:selected").val();
     // Additional filters for the map view: No dupes, no QRT, only spots with good locations
-    str = str + "&dedupe=true&allow_qrt=false&needs_good_location=true";
+    str = str + "&dedupe=true&allow_qrt=false";
+    if (includeCredentials) {
+        str = str + getCredentialQueryString();
+    }
     return str;
 }
 
@@ -36,12 +61,14 @@ function updateMap() {
     // Clear existing content
     markersLayer.clearLayers();
     geodesicsLayer.clearLayers();
+    oms.clearMarkers();
 
     // Make new markers for all spots that match the filter
     spots.forEach(function (s) {
         var m = L.marker([s["dx_latitude"], s["dx_longitude"]], {icon: getIcon(s)});
         m.bindPopup(getTooltipText(s));
         markersLayer.addLayer(m);
+        oms.addMarker(m);
 
         // Create geodesics if required
         if ($("#mapShowGeodesics")[0].checked && s["de_latitude"] != null && s["de_longitude"] != null) {
@@ -57,6 +84,15 @@ function updateMap() {
             }
         }
     });
+
+    // On first load, zoom to the extent of the markers
+    if (firstLoad) {
+        if (markersLayer.getLayers().length >= 2) {
+            var group = new L.featureGroup(markersLayer.getLayers());
+            map.fitBounds(group.getBounds().pad(0.1));
+        }
+        firstLoad = false;
+    }
 }
 
 // Get an icon for a spot, based on its band, using PSK Reporter colours, its program etc.
@@ -180,10 +216,27 @@ function loadOptions() {
         // to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress
         // loading settings, so this needs to be called before that.
         loadURLParams();
+        loadMapURLParams();
 
         // Load settings from settings storage now all the controls are available
         loadSettings();
 
+        // If no basemap has been explicitly saved and the UI is in dark mode, default to dark Mapnik
+        if (localStorage.getItem("#basemap:value") === null) {
+            if (document.documentElement.getAttribute("data-bs-theme") === "dark") {
+                $("#basemap").val("OpenStreetMap.Mapnik.Dark");
+            }
+        }
+
+        // Apply basemap and overlay settings now that controls have their saved values
+        setBasemap($("#basemap").val());
+        setBasemapOpacity(parseFloat($("#basemapOpacity").val()));
+        enableTerminator($("#showTerminator")[0].checked);
+        enableMaidenheadGrid($("#showMaidenheadGrid")[0].checked);
+        enableCQZones($("#showCQZones")[0].checked);
+        enableITUZones($("#showITUZones")[0].checked);
+        enableWABWAIGrid($("#showWABWAIGrid")[0].checked);
+
         // Load spots and set up the timer
         loadSpots();
         setInterval(loadSpots, REFRESH_INTERVAL_SEC * 1000);
@@ -193,9 +246,150 @@ function loadOptions() {
 // Method called when any display property is changed to reload the map and persist the display settings.
 function displayUpdated() {
     updateMap();
+    setBasemap($("#basemap").val());
+    setBasemapOpacity(parseFloat($("#basemapOpacity").val()));
+    enableTerminator($("#showTerminator")[0].checked);
+    enableMaidenheadGrid($("#showMaidenheadGrid")[0].checked);
+    enableCQZones($("#showCQZones")[0].checked);
+    enableITUZones($("#showITUZones")[0].checked);
+    enableWABWAIGrid($("#showWABWAIGrid")[0].checked);
     saveSettings();
 }
 
+// Set the basemap
+function setBasemap(basemapname) {
+    // Only change if we have to, to avoid a flash of reloading content
+    if (loadedBasemap !== basemapname) {
+        loadedBasemap = basemapname;
+        if (typeof backgroundTileLayer !== 'undefined') {
+            map.removeLayer(backgroundTileLayer);
+        }
+        // OpenStreetMap.Mapnik.Dark is a synthetic variant that uses Mapnik tiles with a CSS filter applied
+        const providerName = basemapname === "OpenStreetMap.Mapnik.Dark" ? "OpenStreetMap.Mapnik" : basemapname;
+        backgroundTileLayer = L.tileLayer.provider(providerName, {
+            opacity: parseFloat($("#basemapOpacity").val()),
+            edgeBufferTiles: 1
+        });
+        backgroundTileLayer.addTo(map);
+        backgroundTileLayer.bringToBack();
+        if (basemapname === "OpenStreetMap.Mapnik.Dark") {
+            var container = backgroundTileLayer.getContainer();
+            if (container) {
+                container.style.filter = 'invert(100%) hue-rotate(180deg) brightness(80%)';
+            }
+        }
+
+        // Identify dark basemaps to ensure we use white text for unselected icons
+        // and change the background colour appropriately
+        const basemapIsDark = basemapname === "CartoDB.DarkMatter" || basemapname === "Esri.WorldImagery" || basemapname === "OpenStreetMap.Mapnik.Dark";
+        $("#map").css('background-color', basemapIsDark ? "black" : "white");
+
+        // Change the colour of the grid and zone overlays to match
+        if (basemapIsDark) {
+            maidenheadGrid.options.color = MAIDENHEAD_GRID_COLOR_DARK;
+            cqZones.options.color = CQ_ZONES_COLOR_DARK;
+            ituZones.options.color = ITU_ZONES_COLOR_DARK;
+            wabwaiGrid.options.color = WAB_WAI_GRID_COLOR_DARK;
+        } else {
+            maidenheadGrid.options.color = MAIDENHEAD_GRID_COLOR_LIGHT;
+            cqZones.options.color = CQ_ZONES_COLOR_LIGHT;
+            ituZones.options.color = ITU_ZONES_COLOR_LIGHT;
+            wabwaiGrid.options.color = WAB_WAI_GRID_COLOR_LIGHT;
+        }
+
+        // Force regenerate overlays in the new colours
+        map.removeLayer(maidenheadGrid);
+        map.removeLayer(cqZones);
+        map.removeLayer(ituZones);
+        map.removeLayer(wabwaiGrid);
+        enableMaidenheadGrid($("#showMaidenheadGrid")[0].checked);
+        enableCQZones($("#showCQZones")[0].checked);
+        enableITUZones($("#showITUZones")[0].checked);
+        enableWABWAIGrid($("#showWABWAIGrid")[0].checked);
+    }
+}
+
+// Set the basemap opacity
+function setBasemapOpacity(opacity) {
+    if (typeof backgroundTileLayer !== 'undefined') {
+        backgroundTileLayer.setOpacity(opacity);
+    }
+}
+
+// Shows/hides the terminator/greyline overlay
+function enableTerminator(show) {
+    if (show) {
+        terminator.setTime();
+        terminator.addTo(map);
+    } else {
+        map.removeLayer(terminator);
+    }
+}
+
+// Shows/hides the Maidenhead grid overlay
+function enableMaidenheadGrid(show) {
+    if (show) {
+        maidenheadGrid.addTo(map);
+        backgroundTileLayer.bringToBack();
+    } else {
+        map.removeLayer(maidenheadGrid);
+    }
+}
+
+// Shows/hides the CQ zone overlay
+function enableCQZones(show) {
+    if (show) {
+        cqZones.addTo(map);
+        backgroundTileLayer.bringToBack();
+    } else {
+        map.removeLayer(cqZones);
+    }
+}
+
+// Shows/hides the ITU zone overlay
+function enableITUZones(show) {
+    if (show) {
+        ituZones.addTo(map);
+        backgroundTileLayer.bringToBack();
+    } else {
+        map.removeLayer(ituZones);
+    }
+}
+
+// Shows/hides the WAB/WAI grid overlay
+function enableWABWAIGrid(show) {
+    if (show) {
+        wabwaiGrid.addTo(map);
+        backgroundTileLayer.bringToBack();
+    } else {
+        map.removeLayer(wabwaiGrid);
+    }
+}
+
+// Load map-specific URL parameters for center position and zoom level.
+// These set Leaflet state directly rather than form controls, so they live here rather than in loadURLParams().
+// If any parameter is applied, firstLoad is set to false so updateMap() does not override the position.
+function loadMapURLParams() {
+    let params = new URLSearchParams(document.location.search);
+    let lat = parseFloat(params.get("map-center-lat"));
+    let lon = parseFloat(params.get("map-center-lon"));
+    let zoom = parseFloat(params.get("map-zoom"));
+
+    let hasLatLon = !isNaN(lat) && !isNaN(lon);
+    let hasZoom = !isNaN(zoom);
+
+    if (hasLatLon || hasZoom) {
+        if (hasLatLon && hasZoom) {
+            map.setView([lat, lon], zoom);
+        } else if (hasLatLon) {
+            map.setView([lat, lon], map.getZoom());
+        } else {
+            map.setZoom(zoom);
+        }
+        firstLoad = false;
+    }
+}
+
 // Set up the map
 function setUpMap() {
     // Create map
@@ -206,29 +400,82 @@ function setUpMap() {
     });
 
     // Add basemap
-    backgroundTileLayer = L.tileLayer.provider("OpenStreetMap.Mapnik", {
+    loadedBasemap = $("#basemap").val();
-        opacity: 1,
+    const initialProviderName = loadedBasemap === "OpenStreetMap.Mapnik.Dark" ? "OpenStreetMap.Mapnik" : loadedBasemap;
+    backgroundTileLayer = L.tileLayer.provider(initialProviderName, {
+        opacity: parseFloat($("#basemapOpacity").val()),
         edgeBufferTiles: 1
     });
     backgroundTileLayer.addTo(map);
     backgroundTileLayer.bringToBack();
+    if (loadedBasemap === "OpenStreetMap.Mapnik.Dark") {
+        var container = backgroundTileLayer.getContainer();
+        if (container) {
+            container.style.filter = 'invert(100%) hue-rotate(180deg) brightness(80%)';
+        }
+    }
 
     // Add marker layer
     markersLayer = new L.LayerGroup();
     markersLayer.addTo(map);
 
+    // Set up spiderfy for overlapping markers
+    oms = new OverlappingMarkerSpiderfier(map, {keepSpiderfied: true});
+    oms.addListener('click', function(marker) {
+        marker.openPopup();
+    });
+
     // Add geodesic layer
     geodesicsLayer = new L.LayerGroup();
     geodesicsLayer.addTo(map);
 
-    // Add terminator/greyline
+    // Add terminator/greyline (toggleable)
     terminator = L.terminator({
         interactive: false
     });
     terminator.setStyle({fillColor: '#00000050'});
-    terminator.addTo(map);
+    if ($("#showTerminator")[0].checked) {
+        terminator.addTo(map);
+    }
 
-    // Display a default view.
+    // Add Maidenhead grid (toggleable)
+    maidenheadGrid = L.maidenhead({
+        color : MAIDENHEAD_GRID_COLOR_LIGHT
+    });
+    if ($("#showMaidenheadGrid")[0].checked) {
+        maidenheadGrid.addTo(map);
+        backgroundTileLayer.bringToBack();
+    }
+
+    // Add CQ zone layer (toggleable)
+    cqZones = L.cqzones({
+        color : CQ_ZONES_COLOR_LIGHT
+    });
+    if ($("#showCQZones")[0].checked) {
+        cqZones.addTo(map);
+        backgroundTileLayer.bringToBack();
+    }
+
+    // Add ITU zone layer (toggleable)
+    ituZones = L.ituzones({
+        color : ITU_ZONES_COLOR_LIGHT
+    });
+    if ($("#showITUZones")[0].checked) {
+        ituZones.addTo(map);
+        backgroundTileLayer.bringToBack();
+    }
+
+    // Add WAB/WAI grid layer (toggleable)
+    wabwaiGrid = L.workedAllBritainIreland({
+        color : WAB_WAI_GRID_COLOR_LIGHT
+    });
+    if ($("#showWABWAIGrid")[0].checked) {
+        wabwaiGrid.addTo(map);
+        backgroundTileLayer.bringToBack();
+    }
+
+    // Display a default view. This will only last until the spots are first loaded, at which point the map will zoom
+    // to the extent of ths spots.
     map.setView([30, 0], 3);
 }
 

webassets/js/spots.js

@@ -12,7 +12,7 @@ function loadSpots() {
     }
 
     // Make the new query
-    $.getJSON('/api/v1/spots' + buildQueryString(), function(jsonData) {
+    $.getJSON('/api/v1/spots' + buildQueryString(false), function(jsonData) {
         // Store data
         spots = jsonData;
         // Update table
@@ -31,7 +31,7 @@ function startSSEConnection() {
     if (evtSource != null) {
         evtSource.close();
     }
-    evtSource = new EventSource('/api/v1/spots/stream' + buildQueryString());
+    evtSource = new EventSource('/api/v1/spots/stream' + buildQueryString(true));
 
     evtSource.onmessage = function(event) {
         // Get the new spot
@@ -61,6 +61,11 @@ function startSSEConnection() {
 
         // Add the new spot to table
         addSpotToTopOfTable(newSpot, true);
+
+        // Ping if we need to
+        if ($("#pingOnNewSpots")[0].checked) {
+            new Audio("/audio/ping.mp3").play();
+        }
     };
 
     evtSource.onerror = function(err) {
@@ -73,7 +78,7 @@ function startSSEConnection() {
 }
 
 // Build a query string for the API, based on the filters that the user has selected.
-function buildQueryString() {
+function buildQueryString(includeCredentials) {
     var str =  "?";
     ["dx_continent", "de_continent", "mode", "source", "band", "sig"].forEach(fn => {
         if (!allFilterOptionsSelected(fn)) {
@@ -84,6 +89,9 @@ function buildQueryString() {
     if ($("#search").val() != "") {
         str = str + "&text_includes=" + encodeURIComponent($("#search").val());
     }
+    if (includeCredentials) {
+        str = str + getCredentialQueryString();
+    }
     return str;
 }
 
@@ -284,9 +292,9 @@ function createNewTableRowsForSpot(s, highlightNew) {
         var items = []
         for (var i = 0; i < s["sig_refs"].length; i++) {
             if (s["sig_refs"][i]["url"] != null) {
-                items[i] = `<span style="white-space: nowrap;"><a href='${s["sig_refs"][i]["url"]}' title='${s["sig_refs"][i]["name"]}' target='_new' class='sig-ref-link'>${s["sig_refs"][i]["id"]}</a></span>`
+                items[i] = `<span style="white-space: nowrap;"><a href='${encodeURI(s["sig_refs"][i]["url"])}' title='${escapeHtml(s["sig_refs"][i]["name"])}' target='_new' class='sig-ref-link'>${escapeHtml(s["sig_refs"][i]["id"])}</a></span>`
             } else {
-                items[i] = `<span style="white-space: nowrap;">${s["sig_refs"][i]["id"]}</span>`
+                items[i] = `<span style="white-space: nowrap;">${escapeHtml(s["sig_refs"][i]["id"])}</span>`
             }
         }
         sig_refs = items.join(", ");

webassets/js/spotsbandsandmap.js

@@ -6,27 +6,26 @@ var spots = []
 // to localStorage.
 let worked = []
 
-// Dynamically add CSS code for the band toggle buttons to be in the appropriate colour.
+// Dynamically add CSS code for the band checkboxes to show in the appropriate colour.
 // Some band names contain decimal points which are not allowed in CSS classes, so we text-replace them to "p".
 function addBandToggleColourCSS(band_options) {
     var $style = $('<style>');
     band_options.forEach(o => {
         var domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
-        $style.append(`#filter-button-label-band-${domSafeName} { border-color: ${bandToColor(o['name'])}; color: var(--bs-secondary);}`);
+        $style.append(`#filter-button-label-band-${domSafeName} { padding-left: 0.3em; border-left: 5px solid ${bandToColor(o['name'])};}`);
-        $style.append(`.btn-check:checked + #filter-button-label-band-${domSafeName} { background-color: ${bandToColor(o['name'])}; color: ${bandToContrastColor(o['name'])};}`);
     });
     $('html > head').append($style);
 }
 
 // Generate bands filter card. This one is a special case.
 function generateBandsMultiToggleFilterCard(band_options) {
-    // Create a button for each option
+    var $grid = $('<div class="row row-cols-3 row-cols-md-2 row-cols-lg-3 row-cols-xxl-4 g-1 mb-1">');
     band_options.forEach(o => {
         var domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
-        $("#band-options").append(`<input type="checkbox" class="btn-check filter-button-band storeable-checkbox" name="options" id="filter-button-band-${domSafeName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-secondary" id="filter-button-label-band-${domSafeName}" for="filter-button-band-${domSafeName}">${o['name']}</label> `);
+        $grid.append(`<div class="col"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-band storeable-checkbox" id="filter-button-band-${domSafeName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked> <label class="form-check-label" id="filter-button-label-band-${domSafeName}" for="filter-button-band-${domSafeName}">${o['name']}</label></div></div>`);
     });
-    // Create All/None/Ham HF buttons
+    $("#band-options").append($grid);
-    $("#band-options").append(` <span style="display: inline-block"><button id="filter-button-band-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', true);">All</button> <button id="filter-button-band-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', false);">None</button> <button id="filter-button-band-none" type="button" class="btn btn-outline-secondary" onclick="setHamHFBandToggles();">Ham HF</button></span>`);
+    $("#band-options").append(`<div class="mt-1"><a href="#" onclick="toggleFilterButtons('band', true); return false;">All</a> &nbsp; <a href="#" onclick="toggleFilterButtons('band', false); return false;">None</a> &nbsp; <a href="#" onclick="setHamHFBandToggles(); return false;">Ham HF only</a></div>`);
 }
 
 // Set the band toggles so that only the amateur radio HF bands are selected. This includes 160m and 6m because that's
@@ -41,72 +40,58 @@ function setHamHFBandToggles() {
 
 // Generate SIGs filter card. This one is also a special case.
 function generateSIGsMultiToggleFilterCard(sig_options) {
-    // Create a button for each option
+    var $grid = $('<div class="row row-cols-2 row-cols-xxl-3 g-1 mb-1">');
     sig_options.forEach(o => {
         var domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
-        $("#sig-options").append(`<input type="checkbox" class="btn-check filter-button-sig storeable-checkbox" name="options" id="filter-button-sig-${domSafeName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-success" id="filter-button-label-sig-${domSafeName}" for="filter-button-sig-${domSafeName}" title="${o['description']}"><i class="fa-solid ${sigToIcon(o['name'], 'fa-tower-cell')}"></i> ${o['name']}</label> `);
+        $grid.append(`<div class="col"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-sig storeable-checkbox" id="filter-button-sig-${domSafeName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="form-check-label" id="filter-button-label-sig-${domSafeName}" for="filter-button-sig-${domSafeName}" title="${o['description']}"><i class="fa-solid ${sigToIcon(o['name'], 'fa-tower-cell')}"></i> ${o['name']}</label></div></div>`);
     });
-    // Create a bonus "NO_SIG" / "General DX" option
+    // Bonus "NO_SIG" / "General DX" option
-    $("#sig-options").append(`<input type="checkbox" class="btn-check filter-button-sig storeable-checkbox" name="options" id="filter-button-sig-NO_SIG" value="NO_SIG" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-success" id="filter-button-label-sig-NO_SIG" for="filter-button-sig-NO_SIG"><i class="fa-solid fa-tower-cell"></i> General DX</label> `);
+    $grid.append(`<div class="w-100"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-sig storeable-checkbox" id="filter-button-sig-NO_SIG" value="NO_SIG" autocomplete="off" onClick="filtersUpdated()" checked><label class="form-check-label" id="filter-button-label-sig-NO_SIG" for="filter-button-sig-NO_SIG"><i class="fa-solid fa-tower-cell"></i> General DX</label></div></div>`);
-    // Create All/None buttons
+    $("#sig-options").append($grid);
-    $("#sig-options").append(` <span style="display: inline-block"><button id="filter-button-sig-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('sig', true);">All</button>&nbsp;<button id="filter-button-sig-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('sig', false);">None</button></span>`);
+    $("#sig-options").append(`<div class="mt-1"><a href="#" onclick="toggleFilterButtons('sig', true); return false;">All</a> &nbsp; <a href="#" onclick="toggleFilterButtons('sig', false); return false;">None</a></div>`);
 }
 
 // Generate modes filter card. This one is also a special case.
 function generateModesMultiToggleFilterCard(mode_options) {
-    // Create a button for each option
+    var $grid = $('<div class="row row-cols-3 row-cols-md-2 row-cols-lg-3 g-1 mb-1">');
     mode_options.forEach(o => {
         var domSafeName = o.replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
-        $("#mode-options").append(`<input type="checkbox" class="btn-check filter-button-mode storeable-checkbox" name="options" id="filter-button-mode-${domSafeName}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-success" id="filter-button-label-mode-${domSafeName}" for="filter-button-mode-${domSafeName}">${o}</label> `);
+        $grid.append(`<div class="col"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-mode storeable-checkbox" id="filter-button-mode-${domSafeName}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="form-check-label" id="filter-button-label-mode-${domSafeName}" for="filter-button-mode-${domSafeName}">${o}</label></div></div>`);
     });
-    // Create All/None buttons
+    $("#mode-options").append($grid);
-    $("#mode-options").append(` <span style="display: inline-block"><button id="filter-button-mode-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('mode', true);">All</button>&nbsp;<button id="filter-button-mode-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('mode', false);">None</button></span>`);
+    $("#mode-options").append(`<div class="mt-1"><a href="#" onclick="toggleFilterButtons('mode', true); return false;">All</a> &nbsp; <a href="#" onclick="toggleFilterButtons('mode', false); return false;">None</a> &nbsp; <a href="#" onclick="setVoiceModeToggles(); return false;">Voice only</a> &nbsp; <a href="#" onclick="setDigiModeToggles(); return false;">Digimodes only</a></div>`);
-    // Create category buttons
-    $("#mode-options").append(` <button id="filter-button-mode-av" type="button" class="btn btn-outline-secondary" onclick="toggleAnalogVoiceModeToggles();">Analog Voice</button>&nbsp;<button id="filter-button-mode-dv" type="button" class="btn btn-outline-secondary" onclick="toggleDigitalVoiceModeToggles();">Digital Voice</button>&nbsp;<button id="filter-button-mode-digi" type="button" class="btn btn-outline-secondary" onclick="toggleDigiModeToggles();">Digimodes</button></span>`);
 }
 
-// Toggle the mode toggles that relate to Analog Voice.
+// Set the mode toggles that relate to Analog Voice.
-function toggleAnalogVoiceModeToggles() {
+function setVoiceModeToggles() {
-    toggleToggles("mode", ["PHONE", "SSB", "LSB", "USB", "AM", "FM"]);
+    const modes = ["PHONE", "SSB", "LSB", "USB", "AM", "FM", "DV", "DMR", "DSTAR", "C4FM", "M17"];
-}
+    $(".filter-button-mode").each(function() {
-
+        $(this).prop('checked', modes.includes($(this).val().replace("filter-button-mode-", "")));
-// Toggle the mode toggles that relate to Digital Voice.
-function toggleDigitalVoiceModeToggles() {
-    toggleToggles("mode", ["DV", "DMR", "DSTAR", "C4FM", "M17"]);
-}
-
-// Toggle the mode toggles that relate to Digimodes.
-function toggleDigiModeToggles() {
-    toggleToggles("mode", ["DATA", "FT8", "FT4", "RTTY", "SSTV", "JS8", "HELL", "PSK", "OLIVIA", "PKT", "MSK144"]);
-}
-
-// Toggle the a set of toggles of the given type (e.g. "mode") that match the given values (e.g. ["SSB", "AM", "FM"]).
-function toggleToggles(type, values) {
-    let toggle = null;
-    $(".filter-button-" + type).each(function() {
-        console.log($(this));
-        if (values.includes($(this).val().replace("filter-button-" + type, ""))) {
-            if (toggle == null) {
-                toggle = !$(this).prop('checked');
-            }
-            $(this).prop('checked', toggle);
-        }
     });
     filtersUpdated();
 }
 
-// Generate Sources filter card. This one is a minor special case as we create the buttons in the normal way, but then
+// Set the mode toggles that relate to Digimodes.
+function setDigiModeToggles() {
+    const modes = ["DATA", "FT8", "FT4", "RTTY", "SSTV", "JS8", "HELL", "PSK", "OLIVIA", "PKT", "MSK144"];
+    $(".filter-button-mode").each(function() {
+        $(this).prop('checked', modes.includes($(this).val().replace("filter-button-mode-", "")));
+    });
+    filtersUpdated();
+}
+
+// Generate Sources filter card. This one is a minor special case as we create the checkboxes in the normal way, but
 // set which ones are enabled by default based on config rather than having them all enabled by default. We also sanitise
 // names here for HTML elements.
 function generateSourcesMultiToggleFilterCard(source_options, sources_enabled_by_default) {
-    // Create a button for each option
+    var $grid = $('<div class="row row-cols-2 row-cols-xxl-3 g-1 mb-1">');
     source_options.forEach(o => {
         var enable = sources_enabled_by_default.includes(o);
         var domSafeName = o.replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
-        $("#source-options").append(`<input type="checkbox" class="btn-check filter-button-source storeable-checkbox" name="options" id="filter-button-source-${domSafeName}" value="${o}" autocomplete="off" onClick="filtersUpdated()" ${enable ? "checked" : ""}><label class="btn btn-outline-success" for="filter-button-source-${domSafeName}">${o}</label> `);
+        $grid.append(`<div class="col"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-source storeable-checkbox" id="filter-button-source-${domSafeName}" value="${o}" autocomplete="off" onClick="filtersUpdated()" ${enable ? "checked" : ""}><label class="form-check-label" for="filter-button-source-${domSafeName}">${o}</label></div></div>`);
     });
-    // Create All/None buttons
+    $("#source-options").append($grid);
-    $("#source-options").append(` <span style="display: inline-block"><button id="filter-button-source-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('source', true);">All</button>&nbsp;<button id="filter-button-source-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('source', false);">None</button></span>`);
+    $("#source-options").append(`<div class="mt-1"><a href="#" onclick="toggleFilterButtons('source', true); return false;">All</a> &nbsp; <a href="#" onclick="toggleFilterButtons('source', false); return false;">None</a></div>`);
 }
 
 // Method called when any filter is changed to reload the spots and persist the filter settings.

webassets/js/status.js

@@ -13,7 +13,7 @@ function loadStatus() {
         $("#web-server-last-page").text(moment.unix(jsonData["webserver"]["last_page_access"]).utc().fromNow());
 
         $("#cleanup-status").text(jsonData["cleanup"]["status"]);
-        $("#cleanu-last-ran").text(moment.unix(jsonData["cleanup"]["last_ran"]).utc().fromNow());
+        $("#cleanup-last-ran").text(moment.unix(jsonData["cleanup"]["last_ran"]).utc().fromNow());
 
         jsonData["spot_providers"].forEach(p => {
             $("#spot-providers-status-container").append(`