Draw debug tiles for source with greatest max zoom

src/render/draw_debug.js

@@ -40,7 +40,7 @@ function drawDebugTile(painter, sourceCache, coord) {
         debugUniformValues(posMatrix, Color.red), id,
         painter.debugBuffer, painter.tileBorderIndexBuffer, painter.debugSegments);
 
-    const vertices = createTextVertices(coord.toString(), 50, 200, 5);
+    const vertices = createTextVerticies(coord.canonical.toString(), 50, 200, 5);
     const debugTextArray = new PosArray();
     const debugTextIndices = new LineIndexArray();
     for (let v = 0; v < vertices.length; v += 2) {

src/render/painter.js

@@ -8,6 +8,8 @@ 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 { filterObject, values } from '../util/util';
+import VertexArrayObject from './vertex_array_object';
 import rasterBoundsAttributes from '../data/raster_bounds_attributes';
 import posAttributes from '../data/pos_attributes';
 import ProgramConfiguration from '../data/program_configuration';
@@ -395,9 +397,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

@@ -39,6 +39,10 @@ export class CanonicalTileID {
             .replace('{quadkey}', quadkey)
             .replace('{bbox-epsg-3857}', bbox);
     }
+
+    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",