Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use map tiles dark mode without leaflet-osm plugin #5397

Draft
wants to merge 6 commits into
base: master
Choose a base branch
from
Draft

Use map tiles dark mode without leaflet-osm plugin #5397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
eb97cbc
Add dark Transport tile url
hlfan Dec 13, 2024
c96e1da
Add adding of layer scheme class to DOM
hlfan Dec 13, 2024
2a3ec98
Add logic to display dark map tiles
hlfan Dec 13, 2024
0664b6e
Lint leaflet.layers.js
hlfan Dec 13, 2024
88c90f3
Lint leaflet.map.js
hlfan Dec 13, 2024
e77f38b
Propagate layer filter to property
hlfan Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions app/assets/javascripts/leaflet.layers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,11 @@ 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.getPane("tilePane").style.setProperty("--dark-mode-map-filter", layer.options.filter || "none");

miniMap.dragging.disable();
miniMap.touchZoom.disable();
miniMap.doubleClickZoom.disable();
Expand Down
34 changes: 31 additions & 3 deletions app/assets/javascripts/leaflet.map.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -52,9 +57,19 @@ 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];
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

minor spelling error - filterReceivers

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");
}
}
});

Expand Down Expand Up @@ -376,6 +391,19 @@ 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,
Expand Down
1 change: 1 addition & 0 deletions config/layers.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
Loading