Bring localstorage stuff in from jsutils, it's only used here

Wider bands/sigs/sources columns on mobile
Style tweak
2026-04-29 18:25:58 +00:00 · 2026-04-06 19:11:47 +01:00 · 2026-04-06 18:22:45 +01:00 · 2026-04-06 16:37:45 +01:00 · 2026-04-06 16:16:19 +01:00
14 changed files with 86 additions and 28 deletions
--- a/templates/about.html
+++ b/templates/about.html
@@ -67,7 +67,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=1775382121"></script>
+<script src="/js/common.js?v=1775499107"></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,8 @@

 </div>

-<script src="/js/common.js?v=1775382121"></script>
-<script src="/js/add-spot.js?v=1775382121"></script>
+<script src="/js/common.js?v=1775499107"></script>
+<script src="/js/add-spot.js?v=1775499107"></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
@@ -56,8 +56,8 @@

 </div>

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

 {% end %}
--- a/templates/bands.html
+++ b/templates/bands.html
@@ -62,9 +62,9 @@
 <script>
    let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1775382121"></script>
-<script src="/js/spotsbandsandmap.js?v=1775382121"></script>
-<script src="/js/bands.js?v=1775382121"></script>
+<script src="/js/common.js?v=1775499107"></script>
+<script src="/js/spotsbandsandmap.js?v=1775499107"></script>
+<script src="/js/bands.js?v=1775499107"></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
@@ -46,10 +46,9 @@
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/cjs/tinycolor.min.js"></script>

-    <script src="https://misc.ianrenton.com/jsutils/utils.js?v=1775382121"></script>
-    <script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775382121"></script>
-    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775382121"></script>
-    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775382121"></script>
+    <script src="https://misc.ianrenton.com/jsutils/utils.js?v=1775499107"></script>
+    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775499107"></script>
+    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775499107"></script>

 </head>
 <body>
--- a/templates/cards/basemap.html
+++ b/templates/cards/basemap.html
@@ -5,6 +5,7 @@
            <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>
--- a/templates/conditions.html
+++ b/templates/conditions.html
@@ -230,8 +230,8 @@
 </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=1775382121"></script>
-<script src="/js/conditions.js?v=1775382121"></script>
+<script src="/js/common.js?v=1775499107"></script>
+<script src="/js/conditions.js?v=1775499107"></script>
 <script>$(document).ready(function () {
    $("#nav-link-conditions").addClass("active");
 }); <!-- highlight active page in nav --></script>
--- a/templates/map.html
+++ b/templates/map.html
@@ -79,9 +79,9 @@
 <script>
    let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1775382121"></script>
-<script src="/js/spotsbandsandmap.js?v=1775382121"></script>
-<script src="/js/map.js?v=1775382121"></script>
+<script src="/js/common.js?v=1775499107"></script>
+<script src="/js/spotsbandsandmap.js?v=1775499107"></script>
+<script src="/js/map.js?v=1775499107"></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
@@ -87,9 +87,9 @@
 <script>
    let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1775382121"></script>
-<script src="/js/spotsbandsandmap.js?v=1775382121"></script>
-<script src="/js/spots.js?v=1775382121"></script>
+<script src="/js/common.js?v=1775499107"></script>
+<script src="/js/spotsbandsandmap.js?v=1775499107"></script>
+<script src="/js/spots.js?v=1775499107"></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,8 @@
    </div>
 </div>

-<script src="/js/common.js?v=1775382121"></script>
-<script src="/js/status.js?v=1775382121"></script>
+<script src="/js/common.js?v=1775499107"></script>
+<script src="/js/status.js?v=1775499107"></script>
 <script>
    $(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav -->
 </script>
--- a/webassets/css/style.css
+++ b/webassets/css/style.css
@@ -214,6 +214,9 @@ div#map {
 .leaflet-container {
    font-family: var(--bs-body-font-family) !important;
 }
+.leaflet-control-attribution {
+    background: none;
+}

 /* Make buttons overlaid on the map have a non-transparent fill so you can see the text better */
 .btn-outline-secondary {
--- a/webassets/js/common.js
+++ b/webassets/js/common.js
@@ -2,6 +2,39 @@
 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));
+        });
+    }
+}
+
+// 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
--- a/webassets/js/map.js
+++ b/webassets/js/map.js
@@ -215,6 +215,13 @@ function loadOptions() {
        // 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()));
@@ -251,16 +258,24 @@ function setBasemap(basemapname) {
        if (typeof backgroundTileLayer !== 'undefined') {
            map.removeLayer(backgroundTileLayer);
        }
-        backgroundTileLayer = L.tileLayer.provider(basemapname, {
+        // 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";
+        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
@@ -380,12 +395,19 @@ function setUpMap() {

    // Add basemap
    loadedBasemap = $("#basemap").val();
-    backgroundTileLayer = L.tileLayer.provider(loadedBasemap, {
+    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();
--- a/webassets/js/spotsbandsandmap.js
+++ b/webassets/js/spotsbandsandmap.js
@@ -19,7 +19,7 @@ function addBandToggleColourCSS(band_options) {

 // Generate bands filter card. This one is a special case.
 function generateBandsMultiToggleFilterCard(band_options) {
-    var $grid = $('<div class="row row-cols-4 g-1 mb-1">');
+    var $grid = $('<div class="row row-cols-3 row-cols-md-4 g-1 mb-1">');
    band_options.forEach(o => {
        var domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
        $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>`);
@@ -40,7 +40,7 @@ function setHamHFBandToggles() {

 // Generate SIGs filter card. This one is also a special case.
 function generateSIGsMultiToggleFilterCard(sig_options) {
-    var $grid = $('<div class="row row-cols-3 g-1 mb-1">');
+    var $grid = $('<div class="row row-cols-2 row-cols-md-3 g-1 mb-1">');
    sig_options.forEach(o => {
        var domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
        $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>`);
@@ -84,7 +84,7 @@ function setDigiModeToggles() {
 // 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) {
-    var $grid = $('<div class="row row-cols-3 g-1 mb-1">');
+    var $grid = $('<div class="row row-cols-2 row-cols-md-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, "");
Author	SHA1	Message	Date
Ian Renton	3870e560ec	Bring localstorage stuff in from jsutils, it's only used here	2026-04-06 19:11:47 +01:00
Ian Renton	236ac1a584	Wider bands/sigs/sources columns on mobile	2026-04-06 18:22:45 +01:00
Ian Renton	9243f98604	Style tweak	2026-04-06 16:37:45 +01:00
Ian Renton	8f062320d3	Re-add Dark Mapnik theme (via dodgy CSS hacks)	2026-04-06 16:16:19 +01:00