preserve imagery offset during tile layer transition, fixes #10748

openstreetmap · Feb 9, 2025 · ac3fe66 · ac3fe66
1 parent 057af4d
commit ac3fe66
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -44,14 +44,16 @@ _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
 #### :rocket: Presets
 #### :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
@@ -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 + ')';
         }