Render changesets at locations closest to map view center

diff --git a/app/assets/javascripts/index/history-changesets-layer.js b/app/assets/javascripts/index/history-changesets-layer.js
index dc045779c781d4ca4bcb933f92e4f7d49f495f36..37a45873777913cff5172789c743be9396fdc7d0 100644 (file)
--- a/app/assets/javascripts/index/history-changesets-layer.js
+++ b/app/assets/javascripts/index/history-changesets-layer.js
@@ -34,6 +34,8 @@ OSM.HistoryChangesetsLayer = L.FeatureGroup.extend({
       return b.bounds.getSize() - a.bounds.getSize();
     });
 
       return b.bounds.getSize() - a.bounds.getSize();
     });
 

+    this.updateChangesetLocations(map);
+

     for (const changeset of this._changesets) {
       const rect = L.rectangle(changeset.bounds,
                                { weight: 2, color: "#FF9500", opacity: 1, fillColor: "#FFFFAF", fillOpacity: 0 });
     for (const changeset of this._changesets) {
       const rect = L.rectangle(changeset.bounds,
                                { weight: 2, color: "#FF9500", opacity: 1, fillColor: "#FFFFAF", fillOpacity: 0 });


@@ -42,6 +44,24 @@ OSM.HistoryChangesetsLayer = L.FeatureGroup.extend({
     }
   },
 
     }
   },
 

+  updateChangesetLocations: function (map) {
+    const mapCenterLng = map.getCenter().lng;
+
+    for (const changeset of this._changesets) {
+      const changesetSouthWest = changeset.bounds.getSouthWest();
+      const changesetNorthEast = changeset.bounds.getNorthEast();
+      const changesetCenterLng = (changesetSouthWest.lng + changesetNorthEast.lng) / 2;
+      const shiftInWorldCircumferences = Math.round((changesetCenterLng - mapCenterLng) / 360);
+
+      if (shiftInWorldCircumferences) {
+        changesetSouthWest.lng -= shiftInWorldCircumferences * 360;
+        changesetNorthEast.lng -= shiftInWorldCircumferences * 360;
+
+        this.getLayer(changeset.id)?.setBounds(changeset.bounds);
+      }
+    }
+  },
+

   highlightChangeset: function (id) {
     this.getLayer(id)?.setStyle({ fillOpacity: 0.3, color: "#FF6600", weight: 3 });
   },
   highlightChangeset: function (id) {
     this.getLayer(id)?.setStyle({ fillOpacity: 0.3, color: "#FF6600", weight: 3 });
   },

diff --git a/app/assets/javascripts/index/history.js b/app/assets/javascripts/index/history.js
index 3d572b6c72989ccdf908c4244b1f6b128a3a51d9..05877784035fba11cb621125ebca2e13f4a6a88b 100644 (file)
--- a/app/assets/javascripts/index/history.js
+++ b/app/assets/javascripts/index/history.js
@@ -236,6 +236,8 @@ OSM.History = function (map) {
     if (location.pathname === "/history") {
       OSM.router.replace("/history" + window.location.hash);
       loadFirstChangesets();
     if (location.pathname === "/history") {
       OSM.router.replace("/history" + window.location.hash);
       loadFirstChangesets();

+    } else {
+      changesetsLayer.updateChangesetsPositions(map);

     }
   }
 
     }
   }