w1cdn/spothole
1
0
Fork 0
mirror of https://git.ianrenton.com/ian/spothole.git synced 2026-04-29 18:25:58 +00:00
Code Issues 13 Packages Projects Releases Wiki Activity

Re-add Dark Mapnik theme (via dodgy CSS hacks)

Browse Source
This commit is contained in:
Ian Renton
2026-04-06 16:16:19 +01:00
parent 60126b0010
commit 8f062320d3
12 changed files with 51 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/about.html
View File

@@ -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> <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> </div>
<script src="/js/common.js?v=1775382121"></script> <script src="/js/common.js?v=1775488579"></script>
<script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

4
templates/add_spot.html
View File

@@ -69,8 +69,8 @@
</div> </div>
<script src="/js/common.js?v=1775382121"></script> <script src="/js/common.js?v=1775488579"></script>
<script src="/js/add-spot.js?v=1775382121"></script> <script src="/js/add-spot.js?v=1775488579"></script>
<script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

4
templates/alerts.html
View File

@@ -56,8 +56,8 @@
</div> </div>
<script src="/js/common.js?v=1775382121"></script> <script src="/js/common.js?v=1775488579"></script>
<script src="/js/alerts.js?v=1775382121"></script> <script src="/js/alerts.js?v=1775488579"></script>
<script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

6
templates/bands.html
View File

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

8
templates/base.html
View File

@@ -46,10 +46,10 @@
crossorigin="anonymous"></script> 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>
<script src="https://misc.ianrenton.com/jsutils/utils.js?v=1775382121"></script> <script src="https://misc.ianrenton.com/jsutils/utils.js?v=1775488579"></script>
<script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775382121"></script> <script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775488579"></script>
<script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775382121"></script> <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775488579"></script>
<script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775382121"></script> <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775488579"></script>
</head> </head>
<body> <body>

1
templates/cards/basemap.html
View File

@@ -5,6 +5,7 @@
<label for="basemap" class="form-label">Basemap</label> <label for="basemap" class="form-label">Basemap</label>
<select id="basemap" class="storeable-select form-select" oninput="displayUpdated();"> <select id="basemap" class="storeable-select form-select" oninput="displayUpdated();">
<option value="OpenStreetMap.Mapnik" selected>OpenStreetMap Mapnik</option> <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.NatGeoWorldMap">ESRI NatGeo World Map</option>
<option value="Esri.WorldTopoMap">ESRI World Topo Map</option> <option value="Esri.WorldTopoMap">ESRI World Topo Map</option>
<option value="Esri.WorldShadedRelief">ESRI World Shaded Relief</option> <option value="Esri.WorldShadedRelief">ESRI World Shaded Relief</option>

4
templates/conditions.html
View File

@@ -230,8 +230,8 @@
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script> <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/common.js?v=1775488579"></script>
<script src="/js/conditions.js?v=1775382121"></script> <script src="/js/conditions.js?v=1775488579"></script>
<script>$(document).ready(function () { <script>$(document).ready(function () {
$("#nav-link-conditions").addClass("active"); $("#nav-link-conditions").addClass("active");
}); <!-- highlight active page in nav --></script> }); <!-- highlight active page in nav --></script>

6
templates/map.html
View File

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

6
templates/spots.html
View File

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

4
templates/status.html
View File

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

3
webassets/css/style.css
View File

@@ -214,6 +214,9 @@ div#map {
.leaflet-container { .leaflet-container {
font-family: var(--bs-body-font-family) !important; font-family: var(--bs-body-font-family) !important;
} }
[data-bs-theme=dark] .leaflet-control-attribution {
filter: invert(100%) hue-rotate(180deg) brightness(80%);
}
/* Make buttons overlaid on the map have a non-transparent fill so you can see the text better */ /* Make buttons overlaid on the map have a non-transparent fill so you can see the text better */
.btn-outline-secondary { .btn-outline-secondary {

28
webassets/js/map.js
View File

@@ -215,6 +215,13 @@ function loadOptions() {
// Load settings from settings storage now all the controls are available // Load settings from settings storage now all the controls are available
loadSettings(); 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 // Apply basemap and overlay settings now that controls have their saved values
setBasemap($("#basemap").val()); setBasemap($("#basemap").val());
setBasemapOpacity(parseFloat($("#basemapOpacity").val())); setBasemapOpacity(parseFloat($("#basemapOpacity").val()));
@@ -251,16 +258,24 @@ function setBasemap(basemapname) {
if (typeof backgroundTileLayer !== 'undefined') { if (typeof backgroundTileLayer !== 'undefined') {
map.removeLayer(backgroundTileLayer); 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()), opacity: parseFloat($("#basemapOpacity").val()),
edgeBufferTiles: 1 edgeBufferTiles: 1
}); });
backgroundTileLayer.addTo(map); backgroundTileLayer.addTo(map);
backgroundTileLayer.bringToBack(); 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 // Identify dark basemaps to ensure we use white text for unselected icons
// and change the background colour appropriately // 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"); $("#map").css('background-color', basemapIsDark ? "black" : "white");
// Change the colour of the grid and zone overlays to match // Change the colour of the grid and zone overlays to match
@@ -380,12 +395,19 @@ function setUpMap() {
// Add basemap // Add basemap
loadedBasemap = $("#basemap").val(); 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()), opacity: parseFloat($("#basemapOpacity").val()),
edgeBufferTiles: 1 edgeBufferTiles: 1
}); });
backgroundTileLayer.addTo(map); backgroundTileLayer.addTo(map);
backgroundTileLayer.bringToBack(); 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 // Add marker layer
markersLayer = new L.LayerGroup(); markersLayer = new L.LayerGroup();