From ac3fe661d0889398d4272c0c2906ef9f00bc5e5c Mon Sep 17 00:00:00 2001
From: Martin Raifer <martin@raifer.tech>
Date: Sun, 9 Feb 2025 19:40:06 +0100
Subject: [PATCH] preserve imagery offset during tile layer transition, fixes
 #10748

---
 CHANGELOG.md                   |  4 +++-
 modules/renderer/tile_layer.js | 18 +++++++++---------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index aaca932f7..58d099744 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -44,7 +44,8 @@ _Breaking developer changes, which may affect downstream projects or sites that
 * Add warning if aeroways cross each other, buildings or highways ([#9315], thanks [@k-yle])
 #### :bug: Bugfixes
 * Prevent degenerate ways caused by deleting a corner of a triangle ([#10003], thanks [@k-yle])
-* Fix briefly disappearing data layer during background layer tile switching transition ([#10748])
+* Fix briefly disappearing data layer during background layer tile layer switching transition ([#10748])
+* Preserve imagery offset during tile layer switching transition ([#10748])
 #### :earth_asia: Localization
 #### :hourglass: Performance
 #### :mortar_board: Walkthrough / Help
@@ -52,6 +53,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 #### :hammer: Development
 
 [#10003]: https://github.com/openstreetmap/iD/pull/10003
+[#10748]: https://github.com/openstreetmap/iD/issues/10748
 
 
 # 2.31.1
diff --git a/modules/renderer/tile_layer.js b/modules/renderer/tile_layer.js
index d0fde4756..ed0407939 100644
--- a/modules/renderer/tile_layer.js
+++ b/modules/renderer/tile_layer.js
@@ -79,6 +79,7 @@ export function rendererTileLayer(context) {
     function addSource(d) {
         d.url = _source.url(d);
         d.tileSize = _tileSize;
+        d.source = _source;
         return d;
     }
 
@@ -97,18 +98,17 @@ export function rendererTileLayer(context) {
             pixelOffset = [0, 0];
         }
 
-        var translate = [
-            _projection.translate()[0] + pixelOffset[0],
-            _projection.translate()[1] + pixelOffset[1]
-        ];
 
         tiler
             .scale(_projection.scale() * 2 * Math.PI)
-            .translate(translate);
+            .translate([
+                _projection.translate()[0] + pixelOffset[0],
+                _projection.translate()[1] + pixelOffset[1]
+            ]);
 
         _tileOrigin = [
-            _projection.scale() * Math.PI - translate[0],
-            _projection.scale() * Math.PI - translate[1]
+            _projection.scale() * Math.PI - _projection.translate()[0],
+            _projection.scale() * Math.PI - _projection.translate()[1]
         ];
 
         render(selection);
@@ -163,9 +163,9 @@ export function rendererTileLayer(context) {
             var ts = d.tileSize * Math.pow(2, _zoom - d[2]);
             var scale = tileSizeAtZoom(d, _zoom);
             return 'translate(' +
-                ((d[0] * ts) * _tileSize / d.tileSize - _tileOrigin[0]
+                ((d[0] * ts + d.source.offset()[0] * Math.pow(2, _zoom)) * _tileSize / d.tileSize - _tileOrigin[0]
             ) + 'px,' +
-                ((d[1] * ts) * _tileSize / d.tileSize - _tileOrigin[1]
+                ((d[1] * ts + d.source.offset()[1] * Math.pow(2, _zoom)) * _tileSize / d.tileSize - _tileOrigin[1]
             ) + 'px) ' +
                 'scale(' + scale * _tileSize / d.tileSize + ',' + scale * _tileSize / d.tileSize + ')';
         }