Merge remote-tracking branch 'upstream/pull/3767'

[rails.git] / app / assets / javascripts / embed.js.erb

diff --git a/app/assets/javascripts/embed.js.erb b/app/assets/javascripts/embed.js.erb
index 44bb1fef5dbd7dabfc465a2f46ca34ff3a34ac81..aff13add80debee64834bcf9b8852a0c4201840e 100644 (file)
--- a/app/assets/javascripts/embed.js.erb
+++ b/app/assets/javascripts/embed.js.erb
@@ -32,16 +32,18 @@ window.onload = function () {
 <% end %>
   };
 
-  var map = L.map("map");
+  const map = L.map("map");
   map.attributionControl.setPrefix("");
   map.removeControl(map.attributionControl);
 
+  const isDarkTheme = args.theme === "dark" || (args.theme !== "light" && window.matchMedia("(prefers-color-scheme: dark)").matches);
   const layers = <%=
     YAML.load_file(Rails.root.join("config/layers.yml"))
       .select { |entry| entry["canEmbed"] }
       .each_with_object({}) do |entry, obj|
         obj[entry["layerId"]] = {
           layer: entry["leafletOsmId"],
+          darkLayer: entry["leafletOsmDarkId"],
           apiKeyId: entry["apiKeyId"]
         }.compact
       end.to_json
@@ -49,7 +51,7 @@ window.onload = function () {
   const layerId = (args.layer || "").replaceAll(" ", "");
   const layerConfig = layers[layerId] || layers.mapnik;
   const { layer, ...options } = {
-    layer: layerConfig.layer,
+    layer: layerConfig.darkLayer && isDarkTheme ? layerConfig.darkLayer : layerConfig.layer,
     apikey: apiKeys[layerConfig.apiKeyId],
     ...tileOptions[layerId]
   };
@@ -78,7 +80,7 @@ L.Control.OSMReportAProblem = L.Control.Attribution.extend({
   },
 
   onAdd: function (map) {
-    var container = L.Control.Attribution.prototype.onAdd.call(this, map);
+    const container = L.Control.Attribution.prototype.onAdd.call(this, map);
 
     map.on("moveend", this._update, this);