From 1f826851b2619d387223f396bf19c3df205258ed Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Mon, 3 Jul 2017 16:03:41 -0400 Subject: [PATCH] Make tileCenter return the point actually at the tile center Then use css to adjust the position of the debug div --- css/80_app.css | 3 +++ modules/renderer/tile_layer.js | 6 ++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index 9845da69d..9cdb65e54 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -2484,6 +2484,7 @@ img.tile { } .tile-label-debug { + font-size: 10px; background: rgba(0, 0, 0, 0.7); color: #fff; position: absolute; @@ -2491,6 +2492,8 @@ img.tile { padding: 5px; border-radius: 3px; z-index: 2; + margin-left: -50px; + margin-top: -20px; transform-origin:0 0; -ms-transform-origin:0 0; diff --git a/modules/renderer/tile_layer.js b/modules/renderer/tile_layer.js index 292391d6d..975909686 100644 --- a/modules/renderer/tile_layer.js +++ b/modules/renderer/tile_layer.js @@ -151,11 +151,9 @@ export function rendererTileLayer(context) { function tileCenter(d) { var _ts = tileSize * Math.pow(2, z - d[2]); var scale = tileSizeAtZoom(d, z); - // FIXME: this scale * tileSize/number stuff is hacky, and more for displaying the debug text. - // It's not really the center of the tile, but it is guaranteed to be somewhere in the tile. return [ - ((d[0] * _ts) - tileOrigin[0] + pixelOffset[0] + scale * (tileSize / 4)), - ((d[1] * _ts) - tileOrigin[1] + pixelOffset[1] + scale * (tileSize / 2)) + ((d[0] * _ts) - tileOrigin[0] + pixelOffset[0] + (_ts / 2)), + ((d[1] * _ts) - tileOrigin[1] + pixelOffset[1] + (_ts / 2)) ]; }