Display transformed tile coordinates in ol.source.TileDebug

examples/canvas-tiles.html

@@ -3,8 +3,7 @@ template: example.html
 title: Canvas tiles example
 shortdesc: Renders tiles with coordinates for debugging.
 docs: >
-  <p>The black grid tiles are generated on the client with an HTML5 canvas. Note that the tile coordinates are ol3 normalized tile coordinates (origin bottom left), not
-  OSM tile coordinates (origin top left).</p>
+  The black grid tiles are generated on the client with an HTML5 canvas. In this example, the `ol.source.TileDebug` source uses the tile grid of the `ol.source.OSM` source, so the displayed tile coordinates are the same as those for OSM tile requests. 
 tags: "layers, openstreetmap, canvas"
 ---
 <div class="row-fluid">

examples/canvas-tiles.js

@@ -7,15 +7,16 @@ goog.require('ol.source.OSM');
 goog.require('ol.source.TileDebug');
 
 
+var osmSource = new ol.source.OSM();
 var map = new ol.Map({
   layers: [
     new ol.layer.Tile({
-      source: new ol.source.OSM()
+      source: osmSource
     }),
     new ol.layer.Tile({
       source: new ol.source.TileDebug({
         projection: 'EPSG:3857',
-        tileGrid: ol.tilegrid.createXYZ({maxZoom: 22})
+        tileGrid: osmSource.getTileGrid()
       })
     })
   ],

src/ol/source/tiledebugsource.js

@@ -7,7 +7,6 @@ goog.require('ol.dom');
 goog.require('ol.size');
 goog.require('ol.source.Tile');
 goog.require('ol.tilecoord');
-goog.require('ol.tilegrid.TileGrid');
 
 
 
@@ -15,10 +14,11 @@ goog.require('ol.tilegrid.TileGrid');
  * @constructor
  * @extends {ol.Tile}
  * @param {ol.TileCoord} tileCoord Tile coordinate.
- * @param {ol.tilegrid.TileGrid} tileGrid Tile grid.
+ * @param {ol.Size} tileSize Tile size.
+ * @param {string} text Text.
  * @private
  */
-ol.DebugTile_ = function(tileCoord, tileGrid) {
+ol.DebugTile_ = function(tileCoord, tileSize, text) {
 
   goog.base(this, tileCoord, ol.TileState.LOADED);
 
@@ -26,8 +26,13 @@ ol.DebugTile_ = function(tileCoord, tileGrid) {
    * @private
    * @type {ol.Size}
    */
-  this.tileSize_ = ol.size.toSize(
-      tileGrid.getTileSize(tileCoord[0]));
+  this.tileSize_ = tileSize;
+
+  /**
+   * @private
+   * @type {string}
+   */
+  this.text_ = text;
 
   /**
    * @private
@@ -58,8 +63,7 @@ ol.DebugTile_.prototype.getImage = function(opt_context) {
     context.textAlign = 'center';
     context.textBaseline = 'middle';
     context.font = '24px sans-serif';
-    context.fillText(ol.tilecoord.toString(this.tileCoord),
-        tileSize[0] / 2, tileSize[1] / 2);
+    context.fillText(this.text_, tileSize[0] / 2, tileSize[1] / 2);
 
     this.canvasByContext_[key] = context.canvas;
     return context.canvas;
@@ -102,7 +106,11 @@ ol.source.TileDebug.prototype.getTile = function(z, x, y) {
   if (this.tileCache.containsKey(tileCoordKey)) {
     return /** @type {!ol.DebugTile_} */ (this.tileCache.get(tileCoordKey));
   } else {
-    var tile = new ol.DebugTile_([z, x, y], this.tileGrid);
+    var tileSize = ol.size.toSize(this.tileGrid.getTileSize(z));
+    var tileCoord = [z, x, y];
+    var text = ol.tilecoord.toString(
+        this.getTileCoordForTileUrlFunction(tileCoord));
+    var tile = new ol.DebugTile_(tileCoord, tileSize, text);
     this.tileCache.set(tileCoordKey, tile);
     return tile;
   }