[openstreetmap/openstreetmap-website] Use map tiles dark mode from leaflet-osm plugin (PR #5426)

[Tom Hughes]

@tomhughes requested changes on this pull request.

As it stands this only works correctly for the transport layer that has a dark variant - for all other layers it disables the filtering when in dark mode.

> @@ -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.getPane("tilePane").style.setProperty("--dark-mode-map-filter", layer.options.filter || "none");

There is no layer that has a `filter` option now so this just always removes the filter, plus we don't want to be editing the style anyway as we're trying to get away from using inline styles.

What this should do is change the style rules at https://github.com/openstreetmap/openstreetmap-website/blob/e0f30303538df66b25e6e7840d2534f57f44f27f/app/assets/stylesheets/common.scss#L518 to avoid filtering when the map has the `dark` class applied.

> @@ -52,9 +55,14 @@ 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) return;
+      this.setMaxZoom(layer.options.maxZoom);
+      const container = layer.getContainer();
+      if (layer.options.schemeClass) container.classList.add(layer.options.schemeClass);
+      for (let filterReceiver of [container, document.querySelector(".key-ui")]) {
+        if (!filterReceiver) continue;
+        filterReceiver.style.setProperty("--dark-mode-map-filter", layer.options.filter || "none");

The same thing applies here - we should be making the style look at the class instead of modifying the style inline in a way that doesn't even work.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/5426#pullrequestreview-2525528372
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/5426/review/2525528372 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20241230/99d6c4b9/attachment.htm>