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

[rails.git] / app / assets / javascripts / leaflet.map.js

diff --git a/app/assets/javascripts/leaflet.map.js b/app/assets/javascripts/leaflet.map.js
index d053a81ce4d873a44c0e9d7e8ce0834668193beb..7929ea0ac7f33545f34c2a73de64150b1ed0f231 100644 (file)
--- a/app/assets/javascripts/leaflet.map.js
+++ b/app/assets/javascripts/leaflet.map.js
@@ -15,122 +15,31 @@ L.OSM.Map = L.Map.extend({
   initialize: function (id, options) {
     L.Map.prototype.initialize.call(this, id, options);
 
-    const layerDefinitions = [
-      {
-        leafletOsmId: "Mapnik",
-        code: "M",
-        keyId: "mapnik",
-        nameId: "standard",
-        credit: {
-          id: "make_a_donation",
-          href: "https://supporting.openstreetmap.org",
-          donate: true
-        }
-      },
-      {
-        leafletOsmId: "CyclOSM",
-        code: "Y",
-        keyId: "cyclosm",
-        nameId: "cyclosm",
-        credit: {
-          id: "cyclosm_credit",
-          children: {
-            cyclosm_link: {
-              id: "cyclosm_name",
-              href: "https://www.cyclosm.org"
-            },
-            osm_france_link: {
-              id: "osm_france",
-              href: "https://openstreetmap.fr/"
-            }
-          }
-        }
-      },
-      {
-        leafletOsmId: "CycleMap",
-        code: "C",
-        keyId: "cyclemap",
-        nameId: "cycle_map",
-        apiKeyId: "THUNDERFOREST_KEY",
-        credit: {
-          id: "thunderforest_credit",
-          children: {
-            thunderforest_link: {
-              id: "andy_allan",
-              href: "https://www.thunderforest.com/"
-            }
-          }
-        }
-      },
-      {
-        leafletOsmId: "TransportMap",
-        code: "T",
-        keyId: "transportmap",
-        nameId: "transport_map",
-        apiKeyId: "THUNDERFOREST_KEY",
-        credit: {
-          id: "thunderforest_credit",
-          children: {
-            thunderforest_link: {
-              id: "andy_allan",
-              href: "https://www.thunderforest.com/"
-            }
-          }
-        }
-      },
-      {
-        leafletOsmId: "TracestrackTopo",
-        code: "P",
-        keyId: "tracestracktopo",
-        nameId: "tracestracktop_topo",
-        apiKeyId: "TRACESTRACK_KEY",
-        credit: {
-          id: "tracestrack_credit",
-          children: {
-            tracestrack_link: {
-              id: "tracestrack",
-              href: "https://www.tracestrack.com/"
-            }
-          }
-        }
-      },
-      {
-        leafletOsmId: "HOT",
-        code: "H",
-        keyId: "hot",
-        nameId: "hot",
-        credit: {
-          id: "hotosm_credit",
-          children: {
-            hotosm_link: {
-              id: "hotosm_name",
-              href: "https://www.hotosm.org/"
-            },
-            osm_france_link: {
-              id: "osm_france",
-              href: "https://openstreetmap.fr/"
-            }
-          }
-        }
-      }
-    ];
-
     this.baseLayers = [];
 
-    for (const layerDefinition of layerDefinitions) {
+    for (const layerDefinition of OSM.LAYER_DEFINITIONS) {
       if (layerDefinition.apiKeyId && !OSM[layerDefinition.apiKeyId]) continue;
 
-      const layerOptions = {
-        attribution: makeAttribution(layerDefinition.credit),
-        code: layerDefinition.code,
-        keyid: layerDefinition.keyId,
-        name: I18n.t(`javascripts.map.base.${layerDefinition.nameId}`)
-      };
-      if (layerDefinition.apiKeyId) {
-        layerOptions.apikey = OSM[layerDefinition.apiKeyId];
+      let layerConstructor = L.OSM.TileLayer;
+      const layerOptions = {};
+
+      for (const [property, value] of Object.entries(layerDefinition)) {
+        if (property === "credit") {
+          layerOptions.attribution = makeAttribution(value);
+        } else if (property === "nameId") {
+          layerOptions.name = I18n.t(`javascripts.map.base.${value}`);
+        } else if (property === "apiKeyId") {
+          layerOptions.apikey = OSM[value];
+        } else if (property === "leafletOsmId") {
+          layerConstructor = L.OSM[value];
+        } else if (property === "leafletOsmDarkId" && OSM.isDarkMap() && L.OSM[value]) {
+          layerConstructor = L.OSM[value];
+        } else {
+          layerOptions[property] = value;
+        }
       }
 
-      const layer = new L.OSM[layerDefinition.leafletOsmId](layerOptions);
+      const layer = new layerConstructor(layerOptions);
       this.baseLayers.push(layer);
     }
 
@@ -223,11 +132,14 @@ L.OSM.Map = L.Map.extend({
   },
 
   getMapBaseLayerId: function () {
-    var baseLayerId;
-    this.eachLayer(function (layer) {
-      if (layer.options && layer.options.keyid) baseLayerId = layer.options.keyid;
-    });
-    return baseLayerId;
+    const layer = this.getMapBaseLayer();
+    if (layer) return layer.options.layerId;
+  },
+
+  getMapBaseLayer: function () {
+    for (const layer of this.baseLayers) {
+      if (this.hasLayer(layer)) return layer;
+    }
   },
 
   getUrl: function (marker) {
@@ -357,7 +269,7 @@ L.OSM.Map = L.Map.extend({
 
     this.removeObject();
 
-    if (object.type === "note") {
+    if (object.type === "note" || object.type === "changeset") {
       this._objectLoader = {
         abort: function () {}
       };
@@ -365,18 +277,27 @@ L.OSM.Map = L.Map.extend({
       this._object = object;
       this._objectLayer = L.featureGroup().addTo(this);
 
-      L.circleMarker(object.latLng, haloStyle).addTo(this._objectLayer);
+      if (object.type === "note") {
+        L.circleMarker(object.latLng, haloStyle).addTo(this._objectLayer);
 
-      if (object.icon) {
-        L.marker(object.latLng, {
-          icon: object.icon,
-          opacity: 1,
-          interactive: true
-        }).addTo(this._objectLayer);
+        if (object.icon) {
+          L.marker(object.latLng, {
+            icon: object.icon,
+            opacity: 1,
+            interactive: true
+          }).addTo(this._objectLayer);
+        }
+      } else if (object.type === "changeset") {
+        if (object.bbox) {
+          L.rectangle([
+            [object.bbox.minlat, object.bbox.minlon],
+            [object.bbox.maxlat, object.bbox.maxlon]
+          ], changesetStyle).addTo(this._objectLayer);
+        }
       }
 
       if (callback) callback(this._objectLayer.getBounds());
-    } else { // element or changeset handled by L.OSM.DataLayer
+    } else { // element handled by L.OSM.DataLayer
       var map = this;
       this._objectLoader = $.ajax({
         url: OSM.apiUrl(object),
@@ -393,13 +314,11 @@ L.OSM.Map = L.Map.extend({
             }
           });
 
-          map._objectLayer.interestingNode = function (node, ways, relations) {
+          map._objectLayer.interestingNode = function (node, wayNodes, relationNodes) {
             if (object.type === "node") {
               return true;
             } else if (object.type === "relation") {
-              for (var i = 0; i < relations.length; i++) {
-                if (relations[i].members.indexOf(node) !== -1) return true;
-              }
+              return Boolean(relationNodes[node.id]);
             } else {
               return false;
             }
@@ -469,6 +388,14 @@ L.extend(L.Icon.Default.prototype, {
   }
 });
 
+OSM.isDarkMap = function () {
+  var mapTheme = $("body").attr("data-map-theme");
+  if (mapTheme) return mapTheme === "dark";
+  var siteTheme = $("html").attr("data-bs-theme");
+  if (siteTheme) return siteTheme === "dark";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+};
+
 OSM.getUserIcon = function (url) {
   return L.icon({
     iconUrl: url || OSM.MARKER_RED,