Manage map tiles dark mode with leaflet-osm plugin

openstreetmap · May 9, 2024 · 6a3f718 · 6a3f718
1 parent 71005e4
commit 6a3f718
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 1 deletion.
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -66,6 +66,8 @@ window.updateLinks = function (loc, zoom, layers, object) {
     .toggleClass("disabled", editDisabled);
 };
 
+L.OSM.colorSchemeWatcher.enable();
+
 $(document).ready(function () {
   // NB: Turns Turbo Drive off by default. Turbo Drive must be opt-in on a per-link and per-form basis
   // See https://turbo.hotwired.dev/reference/drive#turbo.session.drive

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
@@ -481,7 +481,6 @@ body.small-nav {
 }
 
 @include color-mode(dark) {
-  .leaflet-tile-container,
   .mapkey-table-entry td:first-child > * {
     filter: brightness(.8);
   }

diff --git a/vendor/assets/leaflet/leaflet.osm.js b/vendor/assets/leaflet/leaflet.osm.js
@@ -1,5 +1,58 @@
 L.OSM = {};
 
+L.OSM.colorSchemeWatcher = {
+  darkFilter: 'brightness(.8)',
+  _watchedLayers: [],
+
+  enable: function() {
+    var watcher = this;
+    matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function() {
+      var prefersDarkScheme = matchMedia("(prefers-color-scheme: dark)").matches;
+      watcher._watchedLayers.forEach(function(watchedLayer) {
+        if (prefersDarkScheme) {
+          watcher._switchLayerToDarkScheme(watchedLayer);
+        } else {
+          watcher._switchLayerToLightScheme(watchedLayer);
+        }
+      });
+    });
+  },
+
+  addLayer: function(layer) {
+    this._watchedLayers.push(layer);
+    var prefersDarkScheme = matchMedia("(prefers-color-scheme: dark)").matches;
+    if (prefersDarkScheme) {
+      this._switchLayerToDarkScheme(layer);
+    }
+  },
+  removeLayer: function(layer) {
+    this._watchedLayers = this._watchedLayers.filter(function(watchedLayer) {
+      return watchedLayer !== layer;
+    });
+    this._cleanUpLayerOnRemove(layer);
+  },
+
+  _switchLayerToDarkScheme: function(layer) {
+    if (layer.options.darkUrl) {
+      layer.setUrl(layer.options.darkUrl);
+    } else {
+      layer.getPane().style.setProperty('filter', this.darkFilter);
+    }
+  },
+  _switchLayerToLightScheme: function(layer) {
+    if (layer.options.darkUrl) {
+      layer.setUrl(layer.options.url);
+    } else {
+      layer.getPane().style.removeProperty('filter');
+    }
+  },
+  _cleanUpLayerOnRemove: function(layer) {
+    if (!layer.options.darkUrl) {
+      layer.getPane().style.removeProperty('filter');
+    }
+  }
+};
+
 L.OSM.TileLayer = L.TileLayer.extend({
   options: {
     url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
@@ -9,6 +62,11 @@ L.OSM.TileLayer = L.TileLayer.extend({
   initialize: function (options) {
     options = L.Util.setOptions(this, options);
     L.TileLayer.prototype.initialize.call(this, options.url);
+    this.on("add", function() {
+      L.OSM.colorSchemeWatcher.addLayer(this);
+    }).on("remove", function() {
+      L.OSM.colorSchemeWatcher.removeLayer(this);
+    });
   }
 });
 
@@ -39,6 +97,7 @@ L.OSM.CycleMap = L.OSM.TileLayer.extend({
 L.OSM.TransportMap = L.OSM.TileLayer.extend({
   options: {
     url: 'https://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}{r}.png?apikey={apikey}',
+    darkUrl: 'https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}{r}.png?apikey={apikey}',
     maxZoom: 21,
     attribution: '© <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors. Tiles courtesy of <a href="http://www.thunderforest.com/" target="_blank">Andy Allan</a>'
   }