diff --git a/templates/about.html b/templates/about.html
index 1edd3b5..4be726a 100644
--- a/templates/about.html
+++ b/templates/about.html
@@ -67,7 +67,7 @@
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.
-
+
{% end %}
\ No newline at end of file
diff --git a/templates/add_spot.html b/templates/add_spot.html
index 0c993e6..582d365 100644
--- a/templates/add_spot.html
+++ b/templates/add_spot.html
@@ -69,8 +69,8 @@
-
-
+
+
{% end %}
\ No newline at end of file
diff --git a/templates/alerts.html b/templates/alerts.html
index c7188f9..5653013 100644
--- a/templates/alerts.html
+++ b/templates/alerts.html
@@ -56,8 +56,8 @@
-
-
+
+
{% end %}
\ No newline at end of file
diff --git a/templates/bands.html b/templates/bands.html
index 17e5f0f..6e99725 100644
--- a/templates/bands.html
+++ b/templates/bands.html
@@ -62,9 +62,9 @@
-
-
-
+
+
+
{% end %}
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 6497f30..87c8ee0 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -46,10 +46,10 @@
crossorigin="anonymous">
-
-
-
-
+
+
+
+
diff --git a/templates/cards/basemap.html b/templates/cards/basemap.html
index 2255849..9f2fb64 100644
--- a/templates/cards/basemap.html
+++ b/templates/cards/basemap.html
@@ -5,6 +5,7 @@
Basemap
OpenStreetMap Mapnik
+ OpenStreetMap Mapnik (Dark)
ESRI NatGeo World Map
ESRI World Topo Map
ESRI World Shaded Relief
diff --git a/templates/conditions.html b/templates/conditions.html
index 1ddfc8e..997e3bb 100644
--- a/templates/conditions.html
+++ b/templates/conditions.html
@@ -230,8 +230,8 @@
-
-
+
+
diff --git a/templates/map.html b/templates/map.html
index 7c90f2f..adc67e8 100644
--- a/templates/map.html
+++ b/templates/map.html
@@ -79,9 +79,9 @@
-
-
-
+
+
+
{% end %}
\ No newline at end of file
diff --git a/templates/spots.html b/templates/spots.html
index c6c0280..8356611 100644
--- a/templates/spots.html
+++ b/templates/spots.html
@@ -87,9 +87,9 @@
-
-
-
+
+
+
{% end %}
\ No newline at end of file
diff --git a/templates/status.html b/templates/status.html
index 9993357..b18ccdd 100644
--- a/templates/status.html
+++ b/templates/status.html
@@ -59,8 +59,8 @@
-
-
+
+
diff --git a/webassets/css/style.css b/webassets/css/style.css
index b9668d4..3e17c0b 100644
--- 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;
}
+[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 */
.btn-outline-secondary {
diff --git a/webassets/js/map.js b/webassets/js/map.js
index 5db5b18..785a6c3 100644
--- 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();