From eb97cbc032aeb1b98abcad7eff6a26cbbfc2b1d4 Mon Sep 17 00:00:00 2001 From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com> Date: Fri, 13 Dec 2024 10:03:51 +0100 Subject: [PATCH 1/6] Add dark Transport tile url --- config/layers.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/config/layers.yml b/config/layers.yml index 4f883cc940..a018f360f4 100644 --- a/config/layers.yml +++ b/config/layers.yml @@ -38,6 +38,7 @@ layerId: "transportmap" nameId: "transport_map" apiKeyId: "THUNDERFOREST_KEY" + darkUrl: "https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}{r}.png?apikey={apikey}" credit: id: "thunderforest_credit" children: From c96e1dacd9a9413391b8f2ab52636151c3508685 Mon Sep 17 00:00:00 2001 From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com> Date: Fri, 13 Dec 2024 10:04:41 +0100 Subject: [PATCH 2/6] Add adding of layer scheme class to DOM --- app/assets/javascripts/leaflet.layers.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js index 35b958c7aa..518a030738 100644 --- a/app/assets/javascripts/leaflet.layers.js +++ b/app/assets/javascripts/leaflet.layers.js @@ -31,6 +31,9 @@ L.OSM.layers = function (options) { var miniMap = L.map(mapContainer[0], { attributionControl: false, zoomControl: false, keyboard: false }) .addLayer(new layer.constructor(layer.options)); + if (layer.options.schemeClass) + miniMap.getPane('tilePane').classList.add(layer.options.schemeClass); + miniMap.dragging.disable(); miniMap.touchZoom.disable(); miniMap.doubleClickZoom.disable(); From 2a3ec98afc4c96c6bf048c4f2ae587d051381127 Mon Sep 17 00:00:00 2001 From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com> Date: Fri, 13 Dec 2024 10:05:44 +0100 Subject: [PATCH 3/6] Add logic to display dark map tiles --- app/assets/javascripts/leaflet.map.js | 30 ++++++++++++++++++++++++--- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/leaflet.map.js b/app/assets/javascripts/leaflet.map.js index 02ed318acf..b191476d21 100644 --- a/app/assets/javascripts/leaflet.map.js +++ b/app/assets/javascripts/leaflet.map.js @@ -32,6 +32,11 @@ L.OSM.Map = L.Map.extend({ layerOptions.apikey = OSM[value]; } else if (property === "leafletOsmId") { layerConstructor = L.OSM[value]; + } else if (property === "darkUrl") { + if (OSM.isDarkMap()) { + layerOptions.url = value; + layerOptions.schemeClass = 'dark'; + } } else { layerOptions[property] = value; } @@ -52,9 +57,17 @@ L.OSM.Map = L.Map.extend({ code: "G" }); - this.on("layeradd", function (event) { - if (this.baseLayers.indexOf(event.layer) >= 0) { - this.setMaxZoom(event.layer.options.maxZoom); + this.on("layeradd", function ({layer}) { + if (this.baseLayers.indexOf(layer) >= 0) { + this.setMaxZoom(layer.options.maxZoom); + const container = layer.getContainer(); + if (!container) return; + if (layer.options.schemeClass) container.classList.add(layer.options.schemeClass); + const filterRecievers = [container]; + if (document.getElementById('map').contains(container)) + filterRecievers.push(document.querySelector('.key-ui')); + for (let el of filterRecievers) + el.style.setProperty('--dark-mode-map-filter', layer.options.filter || 'none'); } }); @@ -376,6 +389,17 @@ L.extend(L.Icon.Default.prototype, { } }); +OSM.isDarkMap = function() { + var themeFlags = [ + $('body').attr('data-map-theme'), + $('html').attr('data-bs-theme') + ]; + for (var themeFlag of themeFlags) + if (themeFlag) + return themeFlag === 'dark'; + return window.matchMedia('(prefers-color-scheme: dark)').matches; +} + OSM.getUserIcon = function (url) { return L.icon({ iconUrl: url || OSM.MARKER_RED, From 0664b6ea2dda75ce82a192fcffbc43aab2bc30a2 Mon Sep 17 00:00:00 2001 From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com> Date: Fri, 13 Dec 2024 10:25:05 +0100 Subject: [PATCH 4/6] Lint leaflet.layers.js --- app/assets/javascripts/leaflet.layers.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js index 518a030738..35b19e9af3 100644 --- a/app/assets/javascripts/leaflet.layers.js +++ b/app/assets/javascripts/leaflet.layers.js @@ -31,8 +31,9 @@ L.OSM.layers = function (options) { var miniMap = L.map(mapContainer[0], { attributionControl: false, zoomControl: false, keyboard: false }) .addLayer(new layer.constructor(layer.options)); - if (layer.options.schemeClass) - miniMap.getPane('tilePane').classList.add(layer.options.schemeClass); + if (layer.options.schemeClass) { + miniMap.getPane("tilePane").classList.add(layer.options.schemeClass); + } miniMap.dragging.disable(); miniMap.touchZoom.disable(); From 88c90f37fc7cc0dd3d1f0975565c7e75f392f155 Mon Sep 17 00:00:00 2001 From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com> Date: Fri, 13 Dec 2024 10:25:11 +0100 Subject: [PATCH 5/6] Lint leaflet.map.js --- app/assets/javascripts/leaflet.map.js | 32 +++++++++++++++------------ 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/app/assets/javascripts/leaflet.map.js b/app/assets/javascripts/leaflet.map.js index b191476d21..9300e542ea 100644 --- a/app/assets/javascripts/leaflet.map.js +++ b/app/assets/javascripts/leaflet.map.js @@ -35,7 +35,7 @@ L.OSM.Map = L.Map.extend({ } else if (property === "darkUrl") { if (OSM.isDarkMap()) { layerOptions.url = value; - layerOptions.schemeClass = 'dark'; + layerOptions.schemeClass = "dark"; } } else { layerOptions[property] = value; @@ -57,17 +57,19 @@ L.OSM.Map = L.Map.extend({ code: "G" }); - this.on("layeradd", function ({layer}) { + this.on("layeradd", function ({ layer }) { if (this.baseLayers.indexOf(layer) >= 0) { this.setMaxZoom(layer.options.maxZoom); const container = layer.getContainer(); if (!container) return; if (layer.options.schemeClass) container.classList.add(layer.options.schemeClass); const filterRecievers = [container]; - if (document.getElementById('map').contains(container)) - filterRecievers.push(document.querySelector('.key-ui')); - for (let el of filterRecievers) - el.style.setProperty('--dark-mode-map-filter', layer.options.filter || 'none'); + if (document.getElementById("map").contains(container)) { + filterRecievers.push(document.querySelector(".key-ui")); + } + for (let el of filterRecievers) { + el.style.setProperty("--dark-mode-map-filter", layer.options.filter || "none"); + } } }); @@ -389,16 +391,18 @@ L.extend(L.Icon.Default.prototype, { } }); -OSM.isDarkMap = function() { +OSM.isDarkMap = function () { var themeFlags = [ - $('body').attr('data-map-theme'), - $('html').attr('data-bs-theme') + $("body").attr("data-map-theme"), + $("html").attr("data-bs-theme") ]; - for (var themeFlag of themeFlags) - if (themeFlag) - return themeFlag === 'dark'; - return window.matchMedia('(prefers-color-scheme: dark)').matches; -} + for (var themeFlag of themeFlags) { + if (themeFlag) { + return themeFlag === "dark"; + } + } + return window.matchMedia("(prefers-color-scheme: dark)").matches; +}; OSM.getUserIcon = function (url) { return L.icon({ From e77f38b1f2c0eaf7be817563268bcca14eb34569 Mon Sep 17 00:00:00 2001 From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com> Date: Wed, 18 Dec 2024 16:09:02 +0100 Subject: [PATCH 6/6] Propagate layer filter to property --- app/assets/javascripts/leaflet.layers.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js index 35b19e9af3..46e0cd86f5 100644 --- a/app/assets/javascripts/leaflet.layers.js +++ b/app/assets/javascripts/leaflet.layers.js @@ -34,6 +34,7 @@ L.OSM.layers = function (options) { if (layer.options.schemeClass) { miniMap.getPane("tilePane").classList.add(layer.options.schemeClass); } + miniMap.getPane("tilePane").style.setProperty("--dark-mode-map-filter", layer.options.filter || "none"); miniMap.dragging.disable(); miniMap.touchZoom.disable();