Draw debug tiles for source with greatest max zoom and Add overscaled…

…Z to debug tile text

src/render/draw_debug.js

@@ -24,7 +24,7 @@ function drawDebug(painter: Painter, sourceCache: SourceCache, coords: Array<Ove
     }
 }
 
-function drawDebugTile(painter, sourceCache, coord) {
+function drawDebugTile(painter, sourceCache, coord: OverscaledTileID) {
     const context = painter.context;
     const gl = context.gl;
 
@@ -45,7 +45,11 @@ function drawDebugTile(painter, sourceCache, coord) {
     const tileSizeKb = Math.floor(tileByteLength / 1024);
     const tileSize = sourceCache.getTile(coord).tileSize;
     const scaleRatio = 512 / Math.min(tileSize, 512);
-    const vertices = createTextVertices(`${coord.toString()} ${tileSizeKb}kb`, 50, 200 * scaleRatio, 5 * scaleRatio);
+    let tileIdText = coord.canonical.toString();
+    if (coord.overscaledZ !== coord.canonical.z) {
+        tileIdText += ` => ${coord.overscaledZ}`;
+    }
+    const vertices = createTextVertices(`${tileIdText} ${tileSizeKb}kb`, 50, 200 * scaleRatio, 5 * scaleRatio);
     const debugTextArray = new PosArray();
     const debugTextIndices = new LineIndexArray();
     for (let v = 0; v < vertices.length; v += 2) {

src/render/painter.js

@@ -8,6 +8,7 @@ import EXTENT from '../data/extent';
 import pixelsToTileUnits from '../source/pixels_to_tile_units';
 import SegmentVector from '../data/segment';
 import {RasterBoundsArray, PosArray, TriangleIndexArray, LineStripIndexArray} from '../data/array_types';
+import {values} from '../util/util';
 import rasterBoundsAttributes from '../data/raster_bounds_attributes';
 import posAttributes from '../data/pos_attributes';
 import ProgramConfiguration from '../data/program_configuration';
@@ -431,9 +432,22 @@ class Painter {
         }
 
         if (this.options.showTileBoundaries) {
-            for (const id in sourceCaches) {
-                draw.debug(this, sourceCaches[id], coordsAscending[id]);
-                break;
+            //Use source with highest maxzoom
+            let selectedSource;
+            let sourceCache;
+            const layers = values(this.style._layers);
+            layers.forEach((layer) => {
+                if (layer.source && !layer.isHidden(this.transform.zoom)) {
+                    if (layer.source !== (sourceCache && sourceCache.id)) {
+                        sourceCache = this.style.sourceCaches[layer.source];
+                    }
+                    if (!selectedSource || (selectedSource.getSource().maxzoom < sourceCache.getSource().maxzoom)) {
+                        selectedSource = sourceCache;
+                    }
+                }
+            });
+            if (selectedSource) {
+                draw.debug(this, selectedSource, selectedSource.getVisibleCoordinates());
             }
         }
 

src/source/tile_id.js

@@ -48,6 +48,10 @@ export class CanonicalTileID {
             (coord.x * tilesAtZoom - this.x) * EXTENT,
             (coord.y * tilesAtZoom - this.y) * EXTENT);
     }
+
+    toString() {
+        return `${this.z}/${this.x}/${this.y}`;
+    }
 }
 
 export class UnwrappedTileID {

test/integration/render-tests/debug/tile/style.json

@@ -12,6 +12,14 @@
   ],
   "zoom": 14,
   "sources": {
+    "satellite": {
+      "type": "raster",
+      "tiles": [
+        "local://tiles/{z}-{x}-{y}.satellite.png"
+      ],
+      "maxzoom": 1,
+      "tileSize": 256
+    },
     "mapbox": {
       "type": "vector",
       "maxzoom": 14,
@@ -30,6 +38,14 @@
         "background-color": "white"
       }
     },
+    {
+      "id": "raster",
+      "type": "raster",
+      "source": "satellite",
+      "paint": {
+        "raster-fade-duration": 0
+      }
+    },
     {
       "id": "line",
       "type": "symbol",