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

28
webassets/js/map.js
View File

@@ -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();