Draw debug tiles for source with greatest max zoom

src/render/draw_debug.js

@@ -33,7 +33,7 @@ function drawDebugTile(painter, sourceCache, coord) {
     painter.debugVAO.bind(gl, program, painter.debugBuffer);
     gl.drawArrays(gl.LINE_STRIP, 0, painter.debugBuffer.length);
 
-    const vertices = createTextVerticies(coord.toString(), 50, 200, 5);
+    const vertices = createTextVerticies(coord.toString(sourceCache.getSource().maxzoom), 50, 200, 5);
     const debugTextArray = new PosArray();
     for (let v = 0; v < vertices.length; v += 2) {
         debugTextArray.emplaceBack(vertices[v], vertices[v + 1]);

src/render/painter.js

@@ -424,9 +424,22 @@ class Painter {
         }
 
         if (this.options.showTileBoundaries) {
-            const sourceCache = this.style.sourceCaches[Object.keys(this.style.sourceCaches)[0]];
-            if (sourceCache) {
-                draw.debug(this, sourceCache, sourceCache.getVisibleCoordinates());
+            //Use source with highest maxzoom
+            let selectedSource;
+            let sourceCache;
+            const layers = util.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_coord.js

@@ -39,8 +39,12 @@ class TileCoord {
         (this: any).posMatrix = null;
     }
 
-    toString() {
-        return `${this.z}/${this.x}/${this.y}`;
+    toString(sourceMaxZoom: number | void) {
+        if (sourceMaxZoom && sourceMaxZoom < this.z) {
+            return `${sourceMaxZoom}/${this.x}/${this.y} => ${this.z}`;
+        } else {
+            return `${this.z}/${this.x}/${this.y}`;
+        }
     }
 
     toCoordinate(sourceMaxZoom: number | void) {

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",