From 5ba7596cedaf99ef12bcbad3871e6cb107529bab Mon Sep 17 00:00:00 2001 From: Richard Zink Date: Thu, 8 Oct 2026 08:06:27 +0200 Subject: [PATCH] Mirror tile content across NS axis (image + N/S labels only) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit User feedback: the corridor arrangement is correct (lng=+12 at screen top in N flight), but the per-tile image and labels were upside down relative to expectations. - Image drawing: changed from 180° rotation (-TILE, -TILE on both axes) to Y-only flip (TILE, -TILE on Y). Image top (north) now lands at canvas bottom; image bottom (south) at canvas top. X axis is preserved so image east is still on the right within each tile. - N/S labels: swapped so N is at canvas bottom (= image north) and S at canvas top (= image south). --- vendor/clouds3d.js | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/vendor/clouds3d.js b/vendor/clouds3d.js index 6219971..546b8c1 100644 --- a/vendor/clouds3d.js +++ b/vendor/clouds3d.js @@ -346,8 +346,11 @@ function drawTileAt(lng, perp, dx, dz, centerTileX, centerTileY) { // (canvasX + 256, canvasY + 256). After this, image north // (high lat) is at canvas bottom and image south at canvas // top; image east at canvas right, image west at canvas left. - groundCtx.drawImage(img, canvasX + GROUND_TILE_SIZE, canvasY + GROUND_TILE_SIZE, - -GROUND_TILE_SIZE, -GROUND_TILE_SIZE); + // Flip image only on the Y axis (NS mirror). Image top + // (north) -> canvas bottom, image bottom (south) -> canvas + // top. X axis (EW) is preserved. + groundCtx.drawImage(img, canvasX, canvasY + GROUND_TILE_SIZE, + GROUND_TILE_SIZE, -GROUND_TILE_SIZE); groundLoadedTiles[tileX + '_' + tileY] = true; // Debug labels: 'N' at the image's north edge (top of canvas @@ -359,12 +362,13 @@ function drawTileAt(lng, perp, dx, dz, centerTileX, centerTileY) { groundCtx.lineWidth = 3; groundCtx.font = 'bold 48px sans-serif'; groundCtx.textAlign = 'center'; - // N at canvas top of tile area (= north in image) - groundCtx.strokeText('N', canvasX + 128, canvasY + 56); - groundCtx.fillText('N', canvasX + 128, canvasY + 56); - // S at canvas bottom of tile area - groundCtx.strokeText('S', canvasX + 128, canvasY + 240); - groundCtx.fillText('S', canvasX + 128, canvasY + 240); + // N at canvas bottom of tile area (image north is at canvas + // bottom because image is Y-flipped). + groundCtx.strokeText('N', canvasX + 128, canvasY + 240); + groundCtx.fillText('N', canvasX + 128, canvasY + 240); + // S at canvas top + groundCtx.strokeText('S', canvasX + 128, canvasY + 56); + groundCtx.fillText('S', canvasX + 128, canvasY + 56); // Tile coords groundCtx.font = 'bold 20px monospace'; groundCtx.strokeText('x=' + tileX + ' y=' + tileY,