Internalise third-party dependencies

2026-06-24 13:45:11 +00:00 · 2026-06-18 20:07:42 +01:00
parent 8fc3cfa56d
commit 725eb619b4
47 changed files with 4771 additions and 49 deletions
--- a/README.md
+++ b/README.md
@@ -348,9 +348,9 @@ To navigate your way around the source code, this list may help.
 * `/webassets` - Root for static files served by the web server
 * `/webassets/apidocs` - Contains the OpenAPI spec (`openapi.yml`)
 * `/webassets/css` - CSS files used by the web front-end
-* `/webassets/fa` - a copy of the FontAwesome library
 * `/webassets/img` - image files used by the web front-end
 * `/webassets/js` - JavaScript used by the web front-end
+* `/webassets/vendor` - Third-party libraries (CSS, JS, fonts and images)

 *Miscellaneous*

@@ -383,11 +383,13 @@ As well as being my work, I have also gratefully received feature patches from S

 The project contains GeoJSON files for CQ and ITU zones, in the `/datafiles/` directory. These are MIT-licenced and, to my knowledge, created by HA8TKS for his CQ and ITU zone layers for Leaflet.

-The project contains a self-hosted copy of Font Awesome's free library, in the `/webassets/fa/` directory. This is subject to Font Awesome's licence and is not covered by the overall licence declared in the `LICENSE` file. This approach was taken in preference to using their hosted kits due to the popularity of this project exceeding the page view limit for their free hosted offering.
-
 The project contains a set of flag icons generated using the "Noto Color Emoji" font on a Debian system, in the `/webassets/img/flags/` directory.

-The software uses a number of Python libraries as listed in `requirements.txt`, and a number of JavaScript libraries such as jQuery, Leaflet and Bootstrap. This project would not have been possible without these libraries, so many thanks to their developers.
+The software uses a number of Python libraries as listed in `requirements.txt`, and a number of JavaScript libraries. This project would not have been possible without these libraries, so many thanks to their developers.
+
+### Third Party Libraries
+
+A number of third-party libraries are self-hosted in the `/webassets/vendor/` directory. These files are subject to their own licences and are not covered by the overall licence declared in the `LICENSE` file.

 Particular thanks go to country-files.com for providing country lookup data for amateur radio, to K0SWE for [this JSON-formatted DXCC data](https://github.com/k0swe/dxcc-json/), and to the developers of `pyhamtools` for making it easy to use country-files.com data as well as QRZ.com and Clublog lookup.

--- a/templates/about.html
+++ b/templates/about.html
@@ -69,7 +69,6 @@
    <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=1781716082"></script>
 <script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/add_spot.html
+++ b/templates/add_spot.html
@@ -69,8 +69,7 @@

 </div>

-<script src="/js/common.js?v=1781716082"></script>
-<script src="/js/add-spot.js?v=1781716082"></script>
+<script src="/js/add-spot.js?v=1781809662"></script>
 <script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/alerts.html
+++ b/templates/alerts.html
@@ -70,8 +70,7 @@

 </div>

-<script src="/js/common.js?v=1781716082"></script>
-<script src="/js/alerts.js?v=1781716082"></script>
+<script src="/js/alerts.js?v=1781809662"></script>
 <script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/api_only_home.html
+++ b/templates/api_only_home.html
@@ -1,6 +1,6 @@
 {% extends "skeleton.html" %}
 {% block head_extra %}
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
+    <link href="/vendor/css/bootstrap-5.3.8.min.css" rel="stylesheet">
 {% end %}
 {% block body %}
 <div class="container mt-5">
--- a/templates/bands.html
+++ b/templates/bands.html
@@ -76,9 +76,8 @@
 <script>
    let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1781716082"></script>
-<script src="/js/spotsbandsandmap.js?v=1781716082"></script>
-<script src="/js/bands.js?v=1781716082"></script>
+<script src="/js/spotsbandsandmap.js?v=1781809662"></script>
+<script src="/js/bands.js?v=1781809662"></script>
 <script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,18 +1,19 @@
 {% extends "skeleton.html" %}
 {% block head_extra %}
-    <link rel="stylesheet" href="/css/style.css?v=1781716082" type="text/css">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
-    <link href="/fa/css/fontawesome.min.css" rel="stylesheet" />
-    <link href="/fa/css/solid.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="/css/style.css?v=1781809662" type="text/css">
+    <link href="/vendor/css/bootstrap-5.3.8.min.css" rel="stylesheet">
+    <link href="/vendor/css/fontawesome-6.7.2.min.css" rel="stylesheet">
+    <link href="/vendor/css/solid-6.7.2.min.css" rel="stylesheet">

-    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/cjs/tinycolor.min.js" crossorigin="anonymous"></script>
+    <script src="/vendor/js/jquery-3.7.1.min.js"></script>
+    <script src="/vendor/js/moment-2.29.4.min.js"></script>
+    <script src="/vendor/js/bootstrap-5.3.8.bundle.min.js"></script>
+    <script src="/vendor/js/tinycolor2-1.6.0.min.js"></script>

-    <script src="https://misc.ianrenton.com/jsutils/utils.js?v=1781716082"></script>
-    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1781716082"></script>
-    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1781716082"></script>
+    <script src="/js/utils.js?v=1781809662"></script>
+    <script src="/js/ui-ham.js?v=1781809662"></script>
+    <script src="/js/geo.js?v=1781809662"></script>
+    <script src="/js/common.js?v=1781809662"></script>
 {% end %}
 {% block body %}
 <div class="container">
--- a/templates/conditions.html
+++ b/templates/conditions.html
@@ -283,9 +283,8 @@
    </div>
 </div>

-<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script>
-<script src="/js/common.js?v=1781716082"></script>
-<script src="/js/conditions.js?v=1781716082"></script>
+<script src="/vendor/js/chart-4.4.9.umd.min.js"></script>
+<script src="/js/conditions.js?v=1781809662"></script>
 <script>$(document).ready(function () {
    $("#nav-link-conditions").addClass("active");
 }); <!-- highlight active page in nav --></script>
--- a/templates/map.html
+++ b/templates/map.html
@@ -76,27 +76,26 @@
    </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>
+<link rel="stylesheet" href="/vendor/css/leaflet-1.9.4.min.css">
+<link rel="stylesheet" href="/vendor/css/leaflet-extra-markers-1.2.2.min.css">
+<script src="/vendor/js/leaflet-1.9.4.min.js"></script>
+<script src="/vendor/js/oms-leaflet-0.2.7.min.js"></script>
+<script src="/vendor/js/leaflet-providers-2.0.0.js"></script>
+<script src="/vendor/js/leaflet-extra-markers-1.2.2.min.js"></script>
+<script src="/vendor/js/leaflet-geodesic-2.7.2.umd.min.js"></script>
+<script src="/vendor/js/leaflet-vectorgrid-1.3.0.js"></script>
+<script src="/vendor/js/text-image-0.7.0.js"></script>
+<script src="/vendor/js/leaflet-terminator-1.1.0.min.js"></script>
+<script src="/vendor/js/leaflet-maidenhead.js"></script>
+<script src="/vendor/js/leaflet-ituzones.js"></script>
+<script src="/vendor/js/leaflet-cqzones.js"></script>
+<script src="/vendor/js/leaflet-workedallbritainireland.js"></script>

 <script>
    let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1781716082"></script>
-<script src="/js/spotsbandsandmap.js?v=1781716082"></script>
-<script src="/js/map.js?v=1781716082"></script>
+<script src="/js/spotsbandsandmap.js?v=1781809662"></script>
+<script src="/js/map.js?v=1781809662"></script>
 <script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/spots.html
+++ b/templates/spots.html
@@ -104,9 +104,8 @@
 <script>
    let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1781716082"></script>
-<script src="/js/spotsbandsandmap.js?v=1781716082"></script>
-<script src="/js/spots.js?v=1781716082"></script>
+<script src="/js/spotsbandsandmap.js?v=1781809662"></script>
+<script src="/js/spots.js?v=1781809662"></script>
 <script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/status.html
+++ b/templates/status.html
@@ -59,8 +59,7 @@
    </div>
 </div>

-<script src="/js/common.js?v=1781716082"></script>
-<script src="/js/status.js?v=1781716082"></script>
+<script src="/js/status.js?v=1781809662"></script>
 <script>
    $(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav -->
 </script>
--- a/webassets/js/geo.js
+++ b/webassets/js/geo.js
@@ -0,0 +1,104 @@
+//
+// GEOGRAPHIC UTILITY FUNCTIONS
+// Great Circle calculation, Maidenhead grid calcs, etc.
+//
+
+// Calculate great circle bearing between two lat/lon points.
+function calcBearing(lat1, lon1, lat2, lon2) {
+    lat1 *= Math.PI / 180;
+    lon1 *= Math.PI / 180;
+    lat2 *= Math.PI / 180;
+    lon2 *= Math.PI / 180;
+    var lonDelta = lon2 - lon1;
+    var y = Math.sin(lonDelta) * Math.cos(lat2);
+    var x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lonDelta);
+    var bearing = Math.atan2(y, x);
+    bearing = bearing * (180 / Math.PI);
+    if ( bearing < 0 ) { bearing += 360; }
+    return bearing;
+}
+
+// Convert a Maidenhead grid reference of arbitrary precision to the lat/long of the centre point of the square.
+// Returns null if the grid format is invalid.
+function latLonForGridCentre(grid) {
+    let [lat, lon, latCellSize, lonCellSize] = latLonForGridSWCornerPlusSize(grid);
+    if (lat != null && lon != null && latCellSize != null && lonCellSize != null) {
+        return [lat + latCellSize / 2.0, lon + lonCellSize / 2.0];
+    } else {
+        return null;
+    }
+}
+
+// Convert a Maidenhead grid reference of arbitrary precision to lat/long, including in the result the size of the
+// lowest grid square. This is a utility method used by the main methods that return the centre, southwest, and
+// northeast coordinates of a grid square.
+// The return type is always an array of size 4. The elements in it are null if the grid format is invalid.
+function latLonForGridSWCornerPlusSize(grid) {
+    // Make sure we are in upper case so our maths works. Case is arbitrary for Maidenhead references
+    grid = grid.toUpperCase();
+
+    // Return null if our Maidenhead string is invalid or too short
+    let len = grid.length;
+    if (len <= 0 || (len % 2) !== 0) {
+        return [null, null, null, null];
+    }
+
+    let lat = 0.0; // aggregated latitude
+    let lon = 0.0; // aggregated longitude
+    let latCellSize = 10; // Size in degrees latitude of the current cell. Starts at 20 and gets smaller as the calculation progresses
+    let lonCellSize = 20; // Size in degrees longitude of the current cell. Starts at 20 and gets smaller as the calculation progresses
+    let latCellNo; // grid latitude cell number this time
+    let lonCellNo; // grid longitude cell number this time
+
+    // Iterate through blocks (two-character sections)
+    for (let block = 0; block * 2 < len; block += 1) {
+        if (block % 2 === 0) {
+            // Letters in this block
+            lonCellNo = grid.charCodeAt(block * 2) - 'A'.charCodeAt(0);
+            latCellNo = grid.charCodeAt(block * 2 + 1) - 'A'.charCodeAt(0);
+            // Bail if the values aren't in range. Allowed values are A-R (0-17) for the first letter block, or
+            // A-X (0-23) thereafter.
+            let maxCellNo = (block === 0) ? 17 : 23;
+            if (latCellNo < 0 || latCellNo > maxCellNo || lonCellNo < 0 || lonCellNo > maxCellNo) {
+                return [null, null, null, null];
+            }
+        } else {
+            // Numbers in this block
+            lonCellNo = parseInt(grid.charAt(block * 2));
+            latCellNo = parseInt(grid.charAt(block * 2 + 1));
+            // Bail if the values aren't in range 0-9..
+            if (latCellNo < 0 || latCellNo > 9 || lonCellNo < 0 || lonCellNo > 9) {
+                return [null, null, null, null];
+            }
+        }
+
+        // Aggregate the angles
+        lat += latCellNo * latCellSize;
+        lon += lonCellNo * lonCellSize;
+
+        // Reduce the cell size for the next block, unless we are on the last cell.
+        if (block * 2 < len - 2) {
+            // Still have more work to do, so reduce the cell size
+            if (block % 2 === 0) {
+                // Just dealt with letters, next block will be numbers so cells will be 1/10 the current size
+                latCellSize = latCellSize / 10.0;
+                lonCellSize = lonCellSize / 10.0;
+            } else {
+                // Just dealt with numbers, next block will be letters so cells will be 1/24 the current size
+                latCellSize = latCellSize / 24.0;
+                lonCellSize = lonCellSize / 24.0;
+            }
+        }
+    }
+
+    // Offset back to (-180, -90) where the grid starts
+    lon -= 180.0;
+    lat -= 90.0;
+
+    // Return nulls on maths errors
+    if (isNaN(lat) || isNaN(lon) || isNaN(latCellSize) ||  isNaN(lonCellSize)) {
+        return [null, null, null, null];
+    }
+
+    return [lat, lon, latCellSize, lonCellSize];
+}
--- a/webassets/js/ui-ham.js
+++ b/webassets/js/ui-ham.js
@@ -0,0 +1,438 @@
+//
+// USER INTERFACE FUNCTIONS (AMATEUR RADIO)
+// Functions providing colour schemes for ham radio bands, SIG icons etc.
+//
+
+const BAND_COLOR_SCHEMES = {
+	"PSK Reporter": {
+		"2200m": "#ff4500",
+		"600m": "#1e90ff",
+		"160m": "#7cfc00",
+		"80m": "#e550e5",
+		"60m": "#00008b",
+		"40m": "#5959ff",
+		"30m": "#62d962",
+		"20m": "#f2c40c",
+		"17m": "#f2f261",
+		"15m": "#cca166",
+		"12m": "#b22222",
+		"11m": "#00ff00",
+		"10m": "#ff69b4",
+		"6m": "#FF0000",
+		"5m": "#e0e0e0",
+		"4m": "#cc0044",
+		"2m": "#FF1493",
+		"1.25m": "#CCFF00",
+		"70cm": "#999900",
+		"23cm": "#5AB8C7",
+		"13cm": "#FF7F50",
+		"5.8GHz": "#cc0099",
+		"10GHz": "#696969",
+		"24GHz": "#f3edc6",
+		"47GHz": "#ffe786",
+		"76GHz": "#baf9d8"
+	},
+	"PSK Reporter (Adjusted)": {
+		"2200m": "#ff4500",
+		"600m": "#1e90ff",
+		"160m": "#7cfc00",
+		"80m": "#b33fb3",
+		"60m": "#00008b",
+		"40m": "#5959ff",
+		"30m": "#62d962",
+		"20m": "#f2c40c",
+		"17m": "#f2f261",
+		"15m": "#cca166",
+		"12m": "#b22222",
+		"11m": "#00ff00",
+		"10m": "#ff7eb4",
+		"6m": "#FF0000",
+		"5m": "#e0e0e0",
+		"4m": "#cc0044",
+		"2m": "#FF1493",
+		"1.25m": "#CCFF00",
+		"70cm": "#999900",
+		"23cm": "#5AB8C7",
+		"13cm": "#FF7F50",
+		"5.8GHz": "#cc0099",
+		"10GHz": "#696969",
+		"24GHz": "#f3edc6",
+		"47GHz": "#ffe786",
+		"76GHz": "#baf9d8"
+	},
+	"RBN": {
+		"2200m": "#000000",
+		"600m": "#aaaaaa",
+		"160m": "#ffe000",
+		"80m": "#093F00",
+		"60m": "#777777",
+		"40m": "#ffa500",
+		"30m": "#ff0000",
+		"20m": "#800080",
+		"17m": "#0000ff",
+		"15m": "#444444",
+		"12m": "#00ffff",
+		"11m": "#000000",
+		"10m": "#ff00ff",
+		"6m": "#ffc0cb",
+		"5m": "#000000",
+		"4m": "#a276ff",
+		"2m": "#92FF7F",
+		"1.25m": "#000000",
+		"70cm": "#000000",
+		"23cm": "#000000",
+		"13cm": "#000000",
+		"5.8GHz": "#000000",
+		"10GHz": "#000000",
+		"24GHz": "#000000",
+		"47GHz": "#000000",
+		"76GHz": "#000000"
+	},
+	"Ham Rainbow": {
+		"2200m": "#8e4f37",
+		"600m": "#8e4f37",
+		"160m": "#8e3737",
+		"80m": "#da2f93",
+		"60m": "#792fda",
+		"40m": "#2f4bda",
+		"30m": "#2fdad2",
+		"20m": "#68da2f",
+		"17m": "#dad52f",
+		"15m": "#da832f",
+		"12m": "#da5c2f",
+		"11m": "#8e8e8e",
+		"10m": "#da2f2f",
+		"6m": "#8e377a",
+		"5m": "#8e8e8e",
+		"4m": "#42378e",
+		"2m": "#37748e",
+		"1.25m": "#8e8e8e",
+		"70cm": "#378e65",
+		"23cm": "#8e8e37",
+		"13cm": "#8e6037",
+		"5.8GHz": "#8e6037",
+		"10GHz": "#8e6037",
+		"24GHz": "#8e6037",
+		"47GHz": "#8e6037",
+		"76GHz": "#8e6037"
+	},
+	"Ham Rainbow (Reverse)": {
+		"2200m": "#42378e",
+		"600m": "#42378e",
+		"160m": "#8e377a",
+		"80m": "#da2f2f",
+		"60m": "#da5c2f",
+		"40m": "#da832f",
+		"30m": "#dad52f",
+		"20m": "#68da2f",
+		"17m": "#2fdad2",
+		"15m": "#2f4bda",
+		"12m": "#792fda",
+		"11m": "#8e8e8e",
+		"10m": "#da2f93",
+		"6m": "#8e3737",
+		"5m": "#8e8e8e",
+		"4m": "#8e4f37",
+		"2m": "#8e6037",
+		"1.25m": "#8e8e8e",
+		"70cm": "#8e8e37",
+		"23cm": "#378e65",
+		"13cm": "#37748e",
+		"5.8GHz": "#37748e",
+		"10GHz": "#37748e",
+		"24GHz": "#37748e",
+		"47GHz": "#37748e",
+		"76GHz": "#37748e",
+	},
+	"Kate Morley": {
+		"2200m": "#817",
+		"600m": "#817",
+		"160m": "#817",
+		"80m": "#a35",
+		"60m": "#c66",
+		"40m": "#e94",
+		"30m": "#ed0",
+		"20m": "#9d5",
+		"17m": "#4d8",
+		"15m": "#2cb",
+		"12m": "#0bc",
+		"11m": "#09c",
+		"10m": "#09c",
+		"6m": "#36b",
+		"5m": "#36b",
+		"4m": "#36b",
+		"2m": "#36b",
+		"1.25m": "#36b",
+		"70cm": "#639",
+		"23cm": "#639",
+		"13cm": "#639",
+		"5.8GHz": "#639",
+		"10GHz": "#639",
+		"24GHz": "#639",
+		"47GHz": "#639",
+		"76GHz": "#639",
+	},
+	"ColorBrewer": {
+		"2200m": "#54278f",
+		"600m": "#756bb1",
+		"160m": "#9e9ac8",
+		"80m": "#cbc9e2",
+		"60m": "#08519c",
+		"40m": "#3182bd",
+		"30m": "#6baed6",
+		"20m": "#bdd7e7",
+		"17m": "#006d2c",
+		"15m": "#31a354",
+		"12m": "#74c476",
+		"11m": "#bae4b3",
+		"10m": "#a63603",
+		"6m": "#e6550d",
+		"5m": "#fd8d3c",
+		"4m": "#fdbe85",
+		"2m": "#a50f15",
+		"1.25m": "#de2d26",
+		"70cm": "#fb6a4a",
+		"23cm": "#fcae91",
+		"13cm": "#636363",
+		"5.8GHz": "#636363",
+		"10GHz": "#969696",
+		"24GHz": "#969696",
+		"47GHz": "#cccccc",
+		"76GHz": "#cccccc",
+	},
+	"IWantHue": {
+		"2200m": "#409271",
+		"600m": "#b03ce1",
+		"160m": "#50c640",
+		"80m": "#d545b7",
+		"60m": "#99b936",
+		"40m": "#7260db",
+		"30m": "#60af57",
+		"20m": "#d54788",
+		"17m": "#58c79f",
+		"15m": "#e2462a",
+		"12m": "#49b1d3",
+		"11m": "#df872f",
+		"10m": "#506bb0",
+		"6m": "#c6a639",
+		"5m": "#9554a3",
+		"4m": "#36783c",
+		"2m": "#da405b",
+		"1.25m": "#657527",
+		"70cm": "#8c97e2",
+		"23cm": "#b44f2f",
+		"13cm": "#d386c8",
+		"5.8GHz": "#aaac66",
+		"10GHz": "#9d4760",
+		"24GHz": "#90672c",
+		"47GHz": "#e08086",
+		"76GHz": "#dc9769",
+	},
+	"IWantHue (Color Blind)": {
+		"2200m": "#bf9e3d",
+		"600m": "#9d2fec",
+		"160m": "#79df39",
+		"80m": "#d445db",
+		"60m": "#5dd175",
+		"40m": "#814dd8",
+		"30m": "#d7ce2f",
+		"20m": "#657af1",
+		"17m": "#8cc34a",
+		"15m": "#d635aa",
+		"12m": "#6cbd80",
+		"11m": "#b860c1",
+		"10m": "#e48721",
+		"6m": "#686ccc",
+		"5m": "#d44e2b",
+		"4m": "#51b3db",
+		"2m": "#d74058",
+		"1.25m": "#56c5ad",
+		"70cm": "#d0478d",
+		"23cm": "#708940",
+		"13cm": "#c380c2",
+		"5.8GHz": "#cab775",
+		"10GHz": "#7a7fc2",
+		"24GHz": "#b87148",
+		"47GHz": "#bd678c",
+		"76GHz": "#c3666b",
+	},
+	"Mokole": {
+		"2200m": "#8b4513",
+		"600m": "#006400",
+		"160m": "#808000",
+		"80m": "#483d8b",
+		"60m": "#5f9ea0",
+		"40m": "#000080",
+		"30m": "#9acd32",
+		"20m": "#8b008b",
+		"17m": "#ff0000",
+		"15m": "#ff8c00",
+		"12m": "#ffd700",
+		"11m": "#7fff00",
+		"10m": "#8a2be2",
+		"6m": "#00ff7f",
+		"5m": "#dc143c",
+		"4m": "#00bfff",
+		"2m": "#0000ff",
+		"1.25m": "#d8bfd8",
+		"70cm": "#ff00ff",
+		"23cm": "#1e90ff",
+		"13cm": "#db7093",
+		"5.8GHz": "#f0e68c",
+		"10GHz": "#ff1493",
+		"24GHz": "#ffa07a",
+		"47GHz": "#ee82ee",
+		"76GHz": "#7fffd4",
+	}
+};
+let bandColorScheme = "PSK Reporter (Adjusted)";
+
+// Set the band colour scheme. Returns true if successful, false if the requested scheme was not known
+function setBandColorScheme(scheme) {
+    let ret = BAND_COLOR_SCHEMES[scheme]
+    if (ret) {
+        bandColorScheme = scheme;
+    }
+    return ret;
+}
+
+// Get the list of known bands
+function getKnownBands() {
+    return Array.from(Object.keys(BAND_COLOR_SCHEMES[bandColorScheme]));
+}
+
+// Get the list of available band colour schemes
+function getAvailableBandColorSchemes() {
+    return Array.from(Object.keys(BAND_COLOR_SCHEMES));
+}
+
+// Band name to colour (in the current colour scheme). If the band is unknown, black will be returned.
+function bandToColor(band) {
+    let col = (band != null) ? BAND_COLOR_SCHEMES[bandColorScheme][band] : null;
+    if (col) {
+        return col;
+    } else {
+        return "#000000";
+    }
+}
+
+// Band name to contrast colour (in the current colour scheme). This is either black or white, contrasting as well as
+// possible with the band colour. If the band is unknown, white will be returned.
+function bandToContrastColor(band) {
+    const rgb = hexToRGB(bandToColor(band));
+    const lum = 0.2126*rgb[0] + 0.7152*rgb[1] + 0.0722*rgb[2];
+    return (lum > 128) ? "#000000" : "#ffffff";
+}
+
+const MODE_TYPE_COLOR_SCHEMES = {
+    "CW": "red",
+    "PHONE": "green",
+    "DATA": "blue"
+}
+
+// Mode type (CW, PHONE, DATA) to colour. If the mode type is unknown, black will be returned.
+function modeTypeToColor(modeType) {
+    let col = (modeType != null) ? MODE_TYPE_COLOR_SCHEMES[modeType.toUpperCase()] : null;
+    if (col) {
+        return col;
+    } else {
+        return "#000000";
+    }
+}
+
+const SIG_ICONS = {
+	"POTA": "fa-tree",
+	"SOTA": "fa-mountain-sun",
+	"WWFF": "fa-seedling",
+	"GMA": "fa-person-hiking",
+	"WWBOTA": "fa-radiation",
+	"HEMA": "fa-mound",
+	"IOTA": "fa-book-atlas",
+	"MOTA": "fa-fan",
+	"ARLHS": "fa-house-flood-water",
+	"ILLW": "fa-house-flood-water",
+	"SIOTA": "fa-wheat-awn",
+	"WCA": "fa-chess-rook",
+	"ZLOTA": "fa-kiwi-bird",
+	"WOTA": "fa-w",
+	"BOTA": "fa-umbrella-beach",
+	"KRMNPA": "fa-earth-oceania",
+	"LLOTA": "fa-water",
+	"WWTOTA": "fa-tower-observation",
+	"WAB": "fa-table-cells-large",
+	"WAI": "fa-table-cells-large",
+	"Tiles": "fa-square",
+	"TOTA": "fa-toilet"
+}
+
+const SIG_NAMES = {
+	"POTA": "Parks on the Air",
+	"SOTA": "Summits on the Air",
+	"WWFF": "Worldwide Flora & Fauna",
+	"GMA": "Global Mountain Activity",
+	"WWBOTA": "Bunkers on the Air",
+	"HEMA": "Humps Excluding Marilyns Award",
+	"IOTA": "Islands on the Air",
+	"MOTA": "Mills on the Air",
+	"ARLHS": "Amateur Radio Lighthouse Society",
+	"ILLW": "International Lighthouse Lightship Weekend",
+	"SIOTA": "Silos on the Air",
+	"WCA": "World Castles Award",
+	"ZLOTA": "New Zealand on the Air",
+	"WOTA": "Wainwrights on the Air",
+	"BOTA": "Beaches on the Air",
+	"KRMNPA": "Keith Roget Memorial National Parks Award",
+	"LLOTA": "Lagos y Lagunas on the Air",
+	"WWTOTA": "Towers on the Air",
+	"WAB": "Worked All Britain",
+	"WAI": "Worked All Ireland",
+	"Tiles": "Tiles on the Air",
+	"TOTA": "Toilets on the Air"
+}
+
+// Get the Font Awesome icon for a given SIG. If the SIG is unknown, the provided default symbol will be returned
+function sigToIcon(sig, defaultIcon) {
+    let col = (sig != null) ? SIG_ICONS[sig] : null;
+    if (col) {
+        return col;
+    } else {
+		let col = (sig != null) ? SIG_ICONS[sig.toUpperCase()] : null;
+		if (col) {
+			return col;
+		} else {
+			return defaultIcon;
+		}
+    }
+}
+
+// Get the full name for a given SIG abbreviation. If the SIG is unknown, an empty string will be returned.
+function sigToName(sig) {
+	let col = (sig != null) ? SIG_NAMES[sig] : null;
+	if (col) {
+		return col;
+	} else {
+		let col = (sig != null) ? SIG_NAMES[sig.toUpperCase()] : null;
+		if (col) {
+			return col;
+		} else {
+			return "";
+		}
+	}
+}
+
+// Get the list of known SIGs
+function getKnownSIGs() {
+    return Array.from(Object.keys(SIG_ICONS));
+}
+
+// Format a Maidenhead grid with alternating alphabetic blocks in lower case
+function formatGrid(grid) {
+	grid = grid.toUpperCase();
+	if (grid.length >= 6) {
+		grid = grid.substring(0, 4) + grid.substring(4, 6).toLowerCase() + grid.substring(6);
+	}
+	if (grid.length >= 12) {
+		grid = grid.substring(0, 10) + grid.substring(10, 12).toLowerCase() + grid.substring(14);
+	}
+	return grid;
+}
--- a/webassets/js/utils.js
+++ b/webassets/js/utils.js
@@ -0,0 +1,33 @@
+//
+// GENERAL UTILITY FUNCTIONS
+// OBject, string manipulation etc.
+//
+
+// Utility function to escape HTML characters from a string.
+function escapeHtml(str) {
+    if (typeof str !== 'string') {
+        return '';
+    }
+
+    const escapeCharacter = (match) => {
+        switch (match) {
+            case '&': return '&amp;';
+            case '<': return '&lt;';
+            case '>': return '&gt;';
+            case '"': return '&quot;';
+            case '\'': return '&#039;';
+            case '`': return '&#096;';
+            default: return match;
+        }
+    };
+
+    return str.replace(/[&<>"'`]/g, escapeCharacter);
+}
+
+// Converts an HTML hex colour to an array of [R, G, B] where each is 0-255.
+function hexToRGB(hex) {
+    return hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i
+             ,(m, r, g, b) => '#' + r + r + g + g + b + b)
+    .substring(1).match(/.{2}/g)
+    .map(x => parseInt(x, 16));
+}
--- a/webassets/vendor/css/bootstrap-5.3.8.min.css
+++ b/webassets/vendor/css/bootstrap-5.3.8.min.css
--- a/webassets/vendor/css/fontawesome-6.7.2.min.css
+++ b/webassets/vendor/css/fontawesome-6.7.2.min.css
--- a/webassets/vendor/css/images/layers-2x.png
+++ b/webassets/vendor/css/images/layers-2x.png
--- a/webassets/vendor/css/images/layers.png
+++ b/webassets/vendor/css/images/layers.png
--- a/webassets/vendor/css/images/marker-icon-2x.png
+++ b/webassets/vendor/css/images/marker-icon-2x.png
--- a/webassets/vendor/css/images/marker-icon.png
+++ b/webassets/vendor/css/images/marker-icon.png
--- a/webassets/vendor/css/images/marker-shadow.png
+++ b/webassets/vendor/css/images/marker-shadow.png
--- a/webassets/vendor/css/leaflet-1.9.4.min.css
+++ b/webassets/vendor/css/leaflet-1.9.4.min.css
--- a/webassets/vendor/css/leaflet-extra-markers-1.2.2.min.css
+++ b/webassets/vendor/css/leaflet-extra-markers-1.2.2.min.css
--- a/webassets/vendor/css/solid-6.7.2.min.css
+++ b/webassets/vendor/css/solid-6.7.2.min.css
--- a/webassets/vendor/img/markers_default.png
+++ b/webassets/vendor/img/markers_default.png
--- a/webassets/vendor/img/markers_default@2x.png
+++ b/webassets/vendor/img/markers_default@2x.png
--- a/webassets/vendor/img/markers_shadow.png
+++ b/webassets/vendor/img/markers_shadow.png
--- a/webassets/vendor/img/markers_shadow@2x.png
+++ b/webassets/vendor/img/markers_shadow@2x.png
--- a/webassets/vendor/js/bootstrap-5.3.8.bundle.min.js
+++ b/webassets/vendor/js/bootstrap-5.3.8.bundle.min.js
--- a/webassets/vendor/js/chart-4.4.9.umd.min.js
+++ b/webassets/vendor/js/chart-4.4.9.umd.min.js
--- a/webassets/vendor/js/jquery-3.7.1.min.js
+++ b/webassets/vendor/js/jquery-3.7.1.min.js
--- a/webassets/vendor/js/leaflet-1.9.4.min.js
+++ b/webassets/vendor/js/leaflet-1.9.4.min.js
--- a/webassets/vendor/js/leaflet-cqzones.js
+++ b/webassets/vendor/js/leaflet-cqzones.js
--- a/webassets/vendor/js/leaflet-extra-markers-1.2.2.min.js
+++ b/webassets/vendor/js/leaflet-extra-markers-1.2.2.min.js
--- a/webassets/vendor/js/leaflet-geodesic-2.7.2.umd.min.js
+++ b/webassets/vendor/js/leaflet-geodesic-2.7.2.umd.min.js
--- a/webassets/vendor/js/leaflet-ituzones.js
+++ b/webassets/vendor/js/leaflet-ituzones.js
--- a/webassets/vendor/js/leaflet-maidenhead.js
+++ b/webassets/vendor/js/leaflet-maidenhead.js
@@ -0,0 +1,113 @@
+/*
+ * L.Maidenhead displays a Maidenhead Locator of lines on the map.
+ */
+
+L.Maidenhead = L.LayerGroup.extend({
+
+	
+	options: {
+		// Line and label color
+		color: 'rgba(255, 0, 0, 0.4)',
+		// Redraw on move or moveend
+		redraw: 'move'
+	},
+
+	initialize: function (options) {
+		L.LayerGroup.prototype.initialize.call(this);
+		L.Util.setOptions(this, options);
+
+	},
+
+	onAdd: function (map) {
+		this._map = map;
+		var grid = this.redraw();
+		this._map.on('viewreset '+ this.options.redraw, function () {
+			grid.redraw();
+		});
+
+		this.eachLayer(map.addLayer, map);
+	},
+	
+	onRemove: function (map) {
+		// remove layer listeners and elements
+		map.off('viewreset '+ this.options.redraw, this.map);
+		this.eachLayer(this.removeLayer, this);
+	},
+
+	redraw: function () {
+		var d3 =         new Array(20,10,10,10,10,10,1 ,1 ,1 ,1 ,1/24,1/24,1/24,1/24,1/24,1/240,1/240,1/240,1/240/24,1/240/24,1/240/24 );
+		var lat_cor =    new Array(0 ,8 ,8 ,8 ,10,14,6 ,8 ,8 ,8 ,1.4 ,2.5 ,3   ,3.5 ,4   ,4    ,3.5  ,3.5  ,1.47    ,1.8     ,1.6      );
+		var bounds = map.getBounds();
+		var zoom = map.getZoom();
+		var unit = d3[Math.round(zoom)];
+		var lcor = lat_cor[Math.round(zoom)];
+		var w = bounds.getWest();
+		var e = bounds.getEast();
+		var n = bounds.getNorth();
+		var s = bounds.getSouth();
+		if (zoom==1) {var c = 2;} else {var c = 0.1;}
+		if (n > 85) n = 85;
+		if (s < -85) s = -85;
+		var left = Math.floor(w/(unit*2))*(unit*2);
+		var right = Math.ceil(e/(unit*2))*(unit*2);
+		var top = Math.ceil(n/unit)*unit;
+		var bottom = Math.floor(s/unit)*unit;
+		this.eachLayer(this.removeLayer, this);
+		for (var lon = left; lon < right; lon += (unit*2)) {
+			for (var lat = bottom; lat < top; lat += unit) {
+			var bounds = [[lat,lon],[lat+unit,lon+(unit*2)]];
+			this.addLayer(L.rectangle(bounds, {color: this.options.color, weight: 1, fill:false, interactive: false}));
+			//var pont = map.latLngToLayerPoint([lat,lon]);
+			//console.log(pont.x);
+			this.addLayer(this._getLabel(lon+unit-(unit/lcor),lat+(unit/2)+(unit/lcor*c)));
+			}
+		}
+		return this;
+	},
+    	
+	_getLabel: function(lon,lat) {
+	  var title_size = new Array(0 ,10,12,16,20,26,12,16,24,36,12  ,14  ,20  ,36  ,60  ,12   ,20   ,36   ,8   ,12      ,24       );
+	  var zoom = map.getZoom();
+	  var size = title_size[Math.round(zoom)]+'px';
+	  var title = '<span style="cursor: default;"><font style="color:'+this.options.color+'; font-size:'+size+'; font-weight: 900; ">' + this._getLocator(lon,lat) + '</font></span>';
+      var myIcon = L.divIcon({className: 'my-div-icon', html: title});
+      var marker = L.marker([lat,lon], {icon: myIcon}, clickable=false);
+      return marker;
+	},
+	
+	_getLocator: function(lon,lat) {
+	  var ydiv_arr=new Array(10, 1, 1/24, 1/240, 1/240/24);
+	  var d1 = "ABCDEFGHIJKLMNOPQR".split("");
+	  var d2 = "ABCDEFGHIJKLMNOPQRSTUVWX".split("");
+	  var d4 =         new Array(0 ,1 ,1 ,1 ,1 ,1 ,2 ,2 ,2 ,2 ,3   ,3   ,3   ,3   ,3   ,4    ,4    ,4    ,5    ,5       ,5        );
+      var locator = "";
+      var x = lon;
+      var y = lat;
+      var precision = d4[Math.round(map.getZoom())];
+      while (x < -180) {x += 360;}
+      while (x > 180) {x -=360;}
+      x = x + 180;
+      y = y + 90;
+      locator = locator + d1[Math.floor(x/20)] + d1[Math.floor(y/10)];
+      for (var i=0; i<4; i=i+1) {
+		if (precision > i+1) {
+        rlon = x%(ydiv_arr[i]*2);
+        rlat = y%(ydiv_arr[i]);
+			if ((i%2)==0) {
+				locator += Math.floor(rlon/(ydiv_arr[i+1]*2)) +""+ Math.floor(rlat/(ydiv_arr[i+1]));
+			} else {
+				locator += d2[Math.floor(rlon/(ydiv_arr[i+1]*2))] +""+ d2[Math.floor(rlat/(ydiv_arr[i+1]))];	
+			}
+		}
+	  }  
+      return locator;
+	},
+
+  
+	
+
+});
+
+L.maidenhead = function (options) {
+	return new L.Maidenhead(options);
+};
--- a/webassets/vendor/js/leaflet-providers-2.0.0.js
+++ b/webassets/vendor/js/leaflet-providers-2.0.0.js
--- a/webassets/vendor/js/leaflet-terminator-1.1.0.min.js
+++ b/webassets/vendor/js/leaflet-terminator-1.1.0.min.js
@@ -0,0 +1,8 @@
+/**
+ * Minified by jsDelivr using Terser v5.37.0.
+ * Original file: /npm/@joergdietrich/leaflet.terminator@1.1.0/L.Terminator.js
+ *
+ * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
+ */
+!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i(require("leaflet")):"function"==typeof define&&define.amd?define(["leaflet"],i):(t.L=t.L||{},t.L.terminator=i(t.L))}(this,(function(t){"use strict";var i=(t=t&&t.hasOwnProperty("default")?t.default:t).Polygon.extend({options:{color:"#00",opacity:.5,fillColor:"#00",fillOpacity:.5,resolution:2},initialize:function(i){this.version="0.1.0",this._R2D=180/Math.PI,this._D2R=Math.PI/180,t.Util.setOptions(this,i);var n=this._compute(this.options.time);this.setLatLngs(n)},setTime:function(t){this.options.time=t;var i=this._compute(t);this.setLatLngs(i)},_sunEclipticPosition:function(t){var i=t-2451545,n=280.46+.9856474*i,e=357.528+.9856003*i;return e%=360,{lambda:(n%=360)+1.915*Math.sin(e*this._D2R)+.02*Math.sin(2*e*this._D2R),R:1.00014-.01671*Math.cos(e*this._D2R)-.0014*Math.cos(2*e*this._D2R)}},_eclipticObliquity:function(t){var i=(t-2451545)/36525;return 23.43929111-i*(46.836769/3600-i*(1831e-7/3600+i*(5.565e-7-i*(1.6e-10-4.34e-8*i/3600))))},_sunEquatorialPosition:function(t,i){var n=Math.atan(Math.cos(i*this._D2R)*Math.tan(t*this._D2R))*this._R2D,e=Math.asin(Math.sin(i*this._D2R)*Math.sin(t*this._D2R))*this._R2D;return{alpha:n+=90*Math.floor(t/90)-90*Math.floor(n/90),delta:e}},_hourAngle:function(t,i,n){return 15*(n+t/15)-i.alpha},_latitude:function(t,i){return Math.atan(-Math.cos(t*this._D2R)/Math.tan(i.delta*this._D2R))*this._R2D},_compute:function(t){for(var i=t?new Date(t):new Date,n=i/864e5+2440587.5,e=function(t){return(18.697374558+24.06570982441908*(t-2451545))%24}(n),o=[],s=this._sunEclipticPosition(n),a=this._eclipticObliquity(n),h=this._sunEquatorialPosition(s.lambda,a),r=0;r<=720*this.options.resolution;r++){var u=r/this.options.resolution-360,l=this._hourAngle(u,h,e);o[r+1]=[this._latitude(l,h),u]}return h.delta<0?(o[0]=[90,-360],o[o.length]=[90,360]):(o[0]=[-90,-360],o[o.length]=[-90,360]),o}});return function(t){return new i(t)}}));
+//# sourceMappingURL=/sm/0ad6cc527a0e7748dc9ea3acda4c2088f86401baae9f9dddc41fc73f9afa2de2.map
--- a/webassets/vendor/js/leaflet-vectorgrid-1.3.0.js
+++ b/webassets/vendor/js/leaflet-vectorgrid-1.3.0.js
--- a/webassets/vendor/js/leaflet-workedallbritainireland.js
+++ b/webassets/vendor/js/leaflet-workedallbritainireland.js
@@ -0,0 +1,259 @@
+L.WorkedAllBritainIreland = L.LayerGroup.extend({
+
+    options: {
+        // Line and label color
+        color: 'rgba(80, 80, 80, 1)',
+        // Grid squares to draw
+        gbSquares: ["HP", "HT", "HU", "HW", "HX", "HY", "HZ", "NA", "NB", "NC", "ND", "NF", "NG", "NH", "NJ", "NK", "NL", "NM", "NN", "NO", "NR", "NS", "NT", "NU", "NW", "NX", "NY", "NZ", "OV", "SC", "SD", "SE", "SH", "SJ", "SK", "SM", "SN", "SO", "SP", "SR", "SS", "ST", "SU", "SV", "SW", "SX", "SY", "SZ", "TA", "TF", "TG", "TL", "TM", "TR", "TQ", "TV"],
+        ieSquares: ["B", "C", "D", "F", "G", "H", "J", "L", "M", "N", "O", "Q", "R", "S", "T", "V", "W", "X"],
+        ciSquares: ["WA", "WV"]
+    },
+
+    initialize: function (options) {
+        // Initialise the LayerGroup superclass and set the options for this class.
+        L.LayerGroup.prototype.initialize.call(this);
+        L.Util.setOptions(this, options);
+
+        // Workaround to load the geodesy modules in non-modular code. Once we have loaded all three modules, trigger a
+        // first draw.
+        import("https://misc.ianrenton.com/Leaflet.WorkedAllBritainIreland/modules/geodesy/osgridref.js")
+            .then(module => {
+                this._osGridLibrary = module;
+                if (this._ieGridLibrary && this._utmLibrary) {
+                    this.redraw();
+                }
+            })
+            .catch(error => {
+                console.log("Error loading OS Grid Ref library, GB WAB squares may not be available.");
+                console.log(error);
+            });
+        import("https://misc.ianrenton.com/Leaflet.WorkedAllBritainIreland/modules/geodesy/iegridref.js")
+            .then(module => {
+                this._ieGridLibrary = module;
+                if (this._osGridLibrary && this._utmLibrary) {
+                    this.redraw();
+                }
+            })
+            .catch(error => {
+                console.log("Error loading IE Grid Ref library, NI WAB squares may not be available.");
+                console.log(error);
+            });
+        import("https://misc.ianrenton.com/Leaflet.WorkedAllBritainIreland/modules/geodesy/utm_ci.js")
+            .then(module => {
+                this._utmLibrary = module;
+                if (this._osGridLibrary && this._ieGridLibrary) {
+                    this.redraw();
+                }
+            })
+            .catch(error => {
+                console.log("Error loading UTM library, Channel Islands WAB squares may not be available.");
+                console.log(error);
+            });
+    },
+
+    onAdd: function (map) {
+        this._map = map;
+        var grid = this.redraw();
+        map.on('moveend', function () { grid.redraw(); });
+        map.on('zoomend', function () { grid.redraw(); });
+        this.eachLayer(map.addLayer, map);
+    },
+
+    onRemove: function (map) {
+        map.off('moveend', this.map);
+        map.off('zoomend', this.map);
+        this.eachLayer(this.removeLayer, this);
+    },
+
+    redraw: function () {
+        // Don't proceed unless we have a map object and our libraries are loaded
+        if (this._map && this._osGridLibrary && this._ieGridLibrary && this._utmLibrary) {
+            // Remove existing content
+            this.eachLayer(this.removeLayer, this);
+
+            // Determine detail level based on current map zoom.
+            const detailLevel = (map.getZoom() > 4) ? (map.getZoom() > 8) ? 2 : 1 : 0;
+
+            // Generate new content for the three grid systems.
+            this.options.gbSquares.forEach(squareRef => {
+                this._addWABGraphicsForSquare(squareRef, "GB", detailLevel);
+            });
+            this.options.ieSquares.forEach(squareRef => {
+                this._addWABGraphicsForSquare(squareRef, "IE", detailLevel);
+            });
+            this.options.ciSquares.forEach(squareRef => {
+                this._addWABGraphicsForSquare(squareRef, "CI", detailLevel);
+            });
+        }
+        return this;
+    },
+
+
+    // Add WAB graphics to the layer for the given square, using the given grid system ("GB", "IE" or "CI") and the
+    // required level of detail.
+    _addWABGraphicsForSquare: function (squareRef, gridSystem, detailLevel) {
+        if (detailLevel === 0 || detailLevel === 1) {
+            // If detail level is 0 or 1, we want a single large square.
+            const swCorner = this._gridRefToLatLon(squareRef + " 00000 00000", gridSystem);
+            const nwCorner = this._gridRefToLatLon(squareRef + " 99999 00000", gridSystem);
+            const neCorner = this._gridRefToLatLon(squareRef + " 99999 99999", gridSystem);
+            const seCorner = this._gridRefToLatLon(squareRef + " 00000 99999", gridSystem);
+            const centre = this._gridRefToLatLon(squareRef + " 50000 50000", gridSystem);
+
+            let square = L.polygon([swCorner, nwCorner, neCorner, seCorner], {color: this.options.color, interactive: false});
+            this.addLayer(square);
+
+            // Additionally if detail level is 1, we want to label it.
+            if (detailLevel === 1) {
+                let label = new L.marker(centre, {
+                    icon: new L.DivIcon({
+                        html: '<span style="position: relative; top: -40%; left: -40%; text-align: center; cursor: hand; color:'+this.options.color+'; font-weight: bold; font-size:120%;">' + squareRef + '</font></span>',
+                        className: 'wabSquareLabel' // Prevent default background & border and provide ability to customise
+                    })
+                }, clickable=false);
+                this.addLayer(label);
+            }
+
+        } else if (detailLevel === 2) {
+            // If detail level is 2, we want to generate all the inner squares (with labels)
+            // instead of just one square. But, doing this for every square will cause CPU issues,
+            // so we only want to generate graphics if they would actually end up on screen.
+            for (let i = 0; i < 10; i++) {
+                for (let j = 0; j < 10; j++) {
+
+                    // Bail out if we have a grid reference that doesn't apply. This is where GB grid overlaps with NI etc.
+                    // are deconflicted.
+                    if (this._validSmallSquare(squareRef, i, j)) {
+
+                        // If we get this far, now calculate the coordinates of the box.
+                        const swCorner = this._gridRefToLatLon(squareRef + " " + i + "0000 " + j + "0000", gridSystem);
+                        const nwCorner = this._gridRefToLatLon(squareRef + " " + i + "9999 " + j + "0000", gridSystem);
+                        const neCorner = this._gridRefToLatLon(squareRef + " " + i + "9999 " + j + "9999", gridSystem);
+                        const seCorner = this._gridRefToLatLon(squareRef + " " + i + "0000 " + j + "9999", gridSystem);
+                        const centre = this._gridRefToLatLon(squareRef + " " + i + "5000 " + j + "5000", gridSystem);
+
+                        // Find out if this box is going to be on our screen. If not, don't draw anything.
+                        if (map.getBounds().contains(swCorner) || map.getBounds().contains(nwCorner)
+                            || map.getBounds().contains(neCorner) || map.getBounds().contains(seCorner)) {
+                            let square = L.polygon([swCorner, nwCorner, neCorner, seCorner], {color: this.options.color, interactive: false});
+                            this.addLayer(square);
+
+                            let label = new L.marker(centre, {
+                                icon: new L.DivIcon({
+                                    html: '<span style="position: relative; top: -20%; left: -100%; text-align: center; cursor: hand; color:'+this.options.color+'; font-weight: bold; font-size:120%;">' + squareRef + i + j + '</font></span>',
+                                    className: 'wabSquareLabelLong' // Prevent default background & border and provide ability to customise
+                                })
+                            }, clickable=false);
+                            this.addLayer(label);
+                        }
+                    }
+                }
+            }
+        }
+    },
+
+    // Determine if a given small square is OK to draw. This is where e.g. overlapping GB and IE squares are
+    // deconflicted in the Irish Sea.
+    _validSmallSquare: function (squareRef, i, j) {
+        let valid = true;
+        if (squareRef === "WA" && j > 1) {
+            valid = false;
+        } else if (squareRef === "TR" && i > 4 && j < 5) {
+            valid = false;
+        } else if (squareRef === "SM" && i < 4) {
+            valid = false;
+        } else if (squareRef === "SM" && i < 7 && j > 4) {
+            valid = false;
+        } else if (squareRef === "TV" && i === 9 && j === 0) {
+            valid = false;
+        } else if (squareRef === "NW" && i < 9) {
+            valid = false;
+        } else if (squareRef === "NR" && i < 5 && j < 3) {
+            valid = false;
+        } else if (squareRef === "C" && j > 6) {
+            valid = false;
+        } else if (squareRef === "D" && (i > 5 || j > 5 || (i > 2 && j > 3))) {
+            valid = false;
+        } else if (squareRef === "J" && i > 6) {
+            valid = false;
+        } else if (squareRef === "O" && i > 8) {
+            valid = false;
+        } else if (squareRef === "T" && i > 6 && j < 5) {
+            valid = false;
+        }
+        return valid;
+    },
+
+    // Convert the given grid reference to lat/lon, using the given grid system ("GB", "IE" or "CI")
+    _gridRefToLatLon: function (grid, gridSystem) {
+        if (gridSystem === "GB") {
+            return this._osgbGridRefToLatLon(grid);
+        } else if (gridSystem === "IE") {
+            return this._osieGridRefToLatLon(grid);
+        } else if (gridSystem === "CI") {
+            return this._ciGridRefToLatLon(grid);
+        } else {
+            return null;
+        }
+    },
+
+    // OSGB grid reference to lat/lon
+    _osgbGridRefToLatLon: function (grid) {
+        if (this._osGridLibrary) {
+            return this._osGridLibrary.default.parse(grid).toLatLon();
+        } else {
+            return null;
+        }
+    },
+
+    // Lat/lon to OSGB grid reference
+    _latLonToOSGBGridRef: function (lat, lon) {
+        if (this._osGridLibrary) {
+            return new this._osGridLibrary.LatLon(lat, lon).toOsGrid();
+        } else {
+            return null;
+        }
+    },
+
+    // OSIE grid reference to lat/lon
+    _osieGridRefToLatLon: function (grid) {
+        if (this._ieGridLibrary) {
+            return this._ieGridLibrary.default.parse(grid).toLatLon();
+        } else {
+            return null;
+        }
+    },
+
+    // Lat/lon to OSIE grid reference
+    _latLonToOSIEGridRef: function (lat, lon) {
+        if (this._ieGridLibrary) {
+            return new this._ieGridLibrary.LatLon(lat, lon).toOsGrid();
+        } else {
+            return null;
+        }
+    },
+
+    // CI grid reference to lat/lon
+    _ciGridRefToLatLon: function (grid) {
+        if (this._utmLibrary) {
+            return this._utmLibrary.default.parseChannelIslandGrid(grid).toLatLon();
+        } else {
+            return null;
+        }
+    },
+
+    // Lat/lon to CI grid reference
+    _latLonToCIGridRef: function (lat, lon) {
+        if (this._utmLibrary) {
+            let utm = (new this._utmLibrary.LatLon(lat, lon)).toUtm();
+            // todo convert UTM coordinate system back to CI grid ref cells
+            return null;
+        } else {
+            return null;
+        }
+    }
+});
+
+L.workedAllBritainIreland = function (options) {
+    return new L.WorkedAllBritainIreland(options);
+};
--- a/webassets/vendor/js/moment-2.29.4.min.js
+++ b/webassets/vendor/js/moment-2.29.4.min.js
--- a/webassets/vendor/js/oms-leaflet-0.2.7.min.js
+++ b/webassets/vendor/js/oms-leaflet-0.2.7.min.js
--- a/webassets/vendor/js/text-image-0.7.0.js
+++ b/webassets/vendor/js/text-image-0.7.0.js
@@ -0,0 +1 @@
+!function(){var t,n=document.createElement("pre"),h=document.createElement("canvas"),r=h.getContext("2d"),i={font:"Sans-serif",align:"left",color:"#000000",size:16,background:"rgba(0, 0, 0, 0)",stroke:0,strokeColor:"#FFFFFF",lineHeight:"1.2em",bold:!1,italic:!1};function s(t){t=String(t),n.innerText=t,n.setAttribute("style",this._style),document.body.append(n);var e=t.split("\n"),i=this.style.stroke,s=n.offsetHeight/e.length,l=.25*s;h.width=n.offsetWidth+2*i,h.height=n.offsetHeight,r.clearRect(0,0,h.width,h.height),r.fillStyle=this.style.background,r.beginPath(),r.fillRect(0,0,h.width,h.height),r.fill();var o="";switch(this.style.italic&&(o+="italic "),this.style.bold&&(o+="bold "),o+=this.style.size+"pt "+this.style.font,r.font=o,r.textAlign=this.style.align,r.lineWidth=this.style.stroke,r.strokeStyle=this.style.strokeColor,r.fillStyle=this.style.color,r.textAlign){case"center":i=h.width/2;break;case"right":i=h.width-i}e.forEach(function(t,e){this.style.stroke&&r.strokeText(t,i,s*(e+1)-l),r.fillText(t,i,s*(e+1)-l)}.bind(this)),document.body.removeChild(n)}window.TextImage=function(t){return this instanceof TextImage?(this.setStyle(t),this):new TextImage(t)},(t=window.TextImage.prototype).setStyle=function(t){for(var e in this.style=t||{},i)this.style[e]||(this.style[e]=i[e]);return this._style="font: ",this.style.italic&&(this._style+="italic "),this.style.bold&&(this._style+="bold "),this._style+=this.style.size+"pt "+this.style.font+";",this._style+="line-height:"+this.style.lineHeight+";",this._style+="text-align: "+this.style.align+";",this._style+="color: "+this.style.color+";",this._style+="background-color: "+this.style.background+";",this._style+=";padding: 0; display: block; position: fixed; top: 100%; overflow: hidden;",this},t.toDataURL=function(t){return t&&s.call(this,t),h.toDataURL()},t.toImage=function(t,e){s.call(this,t);var i=new Image;return e&&(i.onload=e),i.src=h.toDataURL(),i}}();
--- a/webassets/vendor/js/tinycolor2-1.6.0.min.js
+++ b/webassets/vendor/js/tinycolor2-1.6.0.min.js
--- a/webassets/vendor/webfonts/fa-solid-900.ttf
+++ b/webassets/vendor/webfonts/fa-solid-900.ttf
--- a/webassets/vendor/webfonts/fa-solid-900.woff2
+++ b/webassets/vendor/webfonts/fa-solid-900.woff2
				`@@ -0,0 +1 @@`
				!function(){var t,n=document.createElement("pre"),h=document.createElement("canvas"),r=h.getContext("2d"),i={font:"Sans-serif",align:"left",color:"#000000",size:16,background:"rgba(0, 0, 0, 0)",stroke:0,strokeColor:"#FFFFFF",lineHeight:"1.2em",bold:!1,italic:!1};function s(t){t=String(t),n.innerText=t,n.setAttribute("style",this._style),document.body.append(n);var e=t.split("\n"),i=this.style.stroke,s=n.offsetHeight/e.length,l=.25s;h.width=n.offsetWidth+2i,h.height=n.offsetHeight,r.clearRect(0,0,h.width,h.height),r.fillStyle=this.style.background,r.beginPath(),r.fillRect(0,0,h.width,h.height),r.fill();var o="";switch(this.style.italic&&(o+="italic "),this.style.bold&&(o+="bold "),o+=this.style.size+"pt "+this.style.font,r.font=o,r.textAlign=this.style.align,r.lineWidth=this.style.stroke,r.strokeStyle=this.style.strokeColor,r.fillStyle=this.style.color,r.textAlign){case"center":i=h.width/2;break;case"right":i=h.width-i}e.forEach(function(t,e){this.style.stroke&&r.strokeText(t,i,s(e+1)-l),r.fillText(t,i,s(e+1)-l)}.bind(this)),document.body.removeChild(n)}window.TextImage=function(t){return this instanceof TextImage?(this.setStyle(t),this):new TextImage(t)},(t=window.TextImage.prototype).setStyle=function(t){for(var e in this.style=t\|\|{},i)this.style[e]\|\|(this.style[e]=i[e]);return this._style="font: ",this.style.italic&&(this._style+="italic "),this.style.bold&&(this._style+="bold "),this._style+=this.style.size+"pt "+this.style.font+";",this._style+="line-height:"+this.style.lineHeight+";",this._style+="text-align: "+this.style.align+";",this._style+="color: "+this.style.color+";",this._style+="background-color: "+this.style.background+";",this._style+=";padding: 0; display: block; position: fixed; top: 100%; overflow: hidden;",this},t.toDataURL=function(t){return t&&s.call(this,t),h.toDataURL()},t.toImage=function(t,e){s.call(this,t);var i=new Image;return e&&(i.onload=e),i.src=h.toDataURL(),i}}();