Cleanup and example updates

examples/canvas-tiles.html

@@ -3,7 +3,11 @@ template: example.html
 title: Canvas tiles example
 shortdesc: Renders tiles with coordinates for debugging.
 docs: >
-  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. 
+  The black grid tiles are generated on the client with an HTML5 canvas. The
+  displayed tile coordinates are OpenLayers tile coordinates. These increase
+  from bottom to top, but standard XYZ tiling scheme coordinates increase from
+  top to bottom. To calculate the `y` for a standard XYZ tile coordinate, use
+  `-y - 1`. 
 tags: "layers, openstreetmap, canvas"
 ---
 <div class="row-fluid">

examples/xyz-esri-4326-512.js

@@ -29,7 +29,7 @@ var map = new ol.Map({
         tileUrlFunction: function(tileCoord) {
           return urlTemplate.replace('{z}', (tileCoord[0] - 1).toString())
                             .replace('{x}', tileCoord[1].toString())
-                            .replace('{y}', tileCoord[2].toString());
+                            .replace('{y}', (-tileCoord[2] - 1).toString());
         },
         wrapX: true
       })

src/ol/tilegrid/wmtstilegrid.js

@@ -115,7 +115,6 @@ ol.tilegrid.WMTS.createFromCapabilitiesMatrixSet =
             metersPerUnit;
         var tileWidth = elt[tileWidthPropName];
         var tileHeight = elt[tileHeightPropName];
-        var matrixHeight = elt['MatrixHeight'];
         if (switchOriginXY) {
           origins.push([elt[topLeftCornerPropName][1],
             elt[topLeftCornerPropName][0]]);
@@ -126,7 +125,7 @@ ol.tilegrid.WMTS.createFromCapabilitiesMatrixSet =
         tileSizes.push(tileWidth == tileHeight ?
             tileWidth : [tileWidth, tileHeight]);
         // top-left origin, so height is negative
-        sizes.push([elt['MatrixWidth'], -matrixHeight]);
+        sizes.push([elt['MatrixWidth'], -elt['MatrixHeight']]);
       });
 
   return new ol.tilegrid.WMTS({