Fix {-y} template calculation for custom (TMS) tile grids

Previously, {-y} only worked for the standard web mercator tile grid. Now
a tile grid with an extent is required (which we get from
ol.tilegrid.createXYZ() anyway), and then the y calculation for TMS style
tile grids works as expected.

src/ol/source/tilejsonsource.js

@@ -75,7 +75,8 @@ ol.source.TileJSON.prototype.handleTileJSONResponse = function(tileJSON) {
   });
   this.tileGrid = tileGrid;
 
-  this.tileUrlFunction = ol.TileUrlFunction.createFromTemplates(tileJSON.tiles);
+  this.tileUrlFunction =
+      ol.TileUrlFunction.createFromTemplates(tileJSON.tiles, tileGrid);
 
   if (tileJSON.attribution !== undefined &&
       goog.isNull(this.getAttributions())) {

src/ol/source/tileutfgridsource.js

@@ -136,7 +136,8 @@ ol.source.TileUTFGrid.prototype.handleTileJSONResponse = function(tileJSON) {
     return;
   }
 
-  this.tileUrlFunction_ = ol.TileUrlFunction.createFromTemplates(grids);
+  this.tileUrlFunction_ =
+      ol.TileUrlFunction.createFromTemplates(grids, tileGrid);
 
   if (tileJSON.attribution !== undefined) {
     var attributionExtent = extent !== undefined ?

src/ol/source/tilevectorsource.js

@@ -342,7 +342,7 @@ ol.source.TileVector.prototype.setTileUrlFunction = function(tileUrlFunction) {
  */
 ol.source.TileVector.prototype.setUrl = function(url) {
   this.setTileUrlFunction(ol.TileUrlFunction.createFromTemplates(
-      ol.TileUrlFunction.expandUrl(url)));
+      ol.TileUrlFunction.expandUrl(url), this.tileGrid_));
 };
 
 
@@ -350,5 +350,6 @@ ol.source.TileVector.prototype.setUrl = function(url) {
  * @param {Array.<string>} urls URLs.
  */
 ol.source.TileVector.prototype.setUrls = function(urls) {
-  this.setTileUrlFunction(ol.TileUrlFunction.createFromTemplates(urls));
+  this.setTileUrlFunction(
+      ol.TileUrlFunction.createFromTemplates(urls, this.tileGrid_));
 };

src/ol/source/xyzsource.js

@@ -87,7 +87,7 @@ ol.source.XYZ.prototype.getUrls = function() {
  */
 ol.source.XYZ.prototype.setUrl = function(url) {
   this.setTileUrlFunction(ol.TileUrlFunction.createFromTemplates(
-      ol.TileUrlFunction.expandUrl(url)));
+      ol.TileUrlFunction.expandUrl(url), this.tileGrid));
   this.urls_ = [url];
 };
 
@@ -97,6 +97,7 @@ ol.source.XYZ.prototype.setUrl = function(url) {
  * @param {Array.<string>} urls URLs.
  */
 ol.source.XYZ.prototype.setUrls = function(urls) {
-  this.setTileUrlFunction(ol.TileUrlFunction.createFromTemplates(urls));
+  this.setTileUrlFunction(
+      ol.TileUrlFunction.createFromTemplates(urls, this.tileGrid));
   this.urls_ = urls;
 };

src/ol/tileurlfunction.js

@@ -33,9 +33,10 @@ ol.TileCoordTransformType;
 
 /**
  * @param {string} template Template.
+ * @param {ol.tilegrid.TileGrid} tileGrid Tile grid.
  * @return {ol.TileUrlFunctionType} Tile URL function.
  */
-ol.TileUrlFunction.createFromTemplate = function(template) {
+ol.TileUrlFunction.createFromTemplate = function(template, tileGrid) {
   var zRegEx = /\{z\}/g;
   var xRegEx = /\{x\}/g;
   var yRegEx = /\{y\}/g;
@@ -52,15 +53,19 @@ ol.TileUrlFunction.createFromTemplate = function(template) {
           return undefined;
         } else {
           return template.replace(zRegEx, tileCoord[0].toString())
-                         .replace(xRegEx, tileCoord[1].toString())
+              .replace(xRegEx, tileCoord[1].toString())
-                         .replace(yRegEx, function() {
+              .replace(yRegEx, function() {
-                           var y = -tileCoord[2] - 1;
+                var y = -tileCoord[2] - 1;
-                           return y.toString();
+                return y.toString();
-                         })
+              })
-                         .replace(dashYRegEx, function() {
+              .replace(dashYRegEx, function() {
-                           var y = (1 << tileCoord[0]) + tileCoord[2];
+                var z = tileCoord[0];
-                           return y.toString();
+                var range = tileGrid.getFullTileRange(z);
-                         });
+                goog.asserts.assert(range,
+                    'The {-y} template requires a tile grid with extent');
+                var y = range.getHeight() + tileCoord[2];
+                return y.toString();
+              });
         }
       });
 };
@@ -68,11 +73,17 @@ ol.TileUrlFunction.createFromTemplate = function(template) {
 
 /**
  * @param {Array.<string>} templates Templates.
+ * @param {ol.tilegrid.TileGrid} tileGrid Tile grid.
  * @return {ol.TileUrlFunctionType} Tile URL function.
  */
-ol.TileUrlFunction.createFromTemplates = function(templates) {
+ol.TileUrlFunction.createFromTemplates = function(templates, tileGrid) {
-  return ol.TileUrlFunction.createFromTileUrlFunctions(
+  var len = templates.length;
-      templates.map(ol.TileUrlFunction.createFromTemplate));
+  var tileUrlFunctions = new Array(len);
+  for (var i = 0; i < len; ++i) {
+    tileUrlFunctions[i] = ol.TileUrlFunction.createFromTemplate(
+        templates[i], tileGrid);
+  }
+  return ol.TileUrlFunction.createFromTileUrlFunctions(tileUrlFunctions);
 };
 
 

test/spec/ol/tileurlfunction.test.js

@@ -28,29 +28,45 @@ describe('ol.TileUrlFunction', function() {
   });
 
   describe('createFromTemplate', function() {
+    var tileGrid = ol.tilegrid.createXYZ();
     it('creates expected URL', function() {
-      var tileUrl = ol.TileUrlFunction.createFromTemplate('{z}/{x}/{y}');
+      var tileUrl = ol.TileUrlFunction.createFromTemplate(
+          '{z}/{x}/{y}', tileGrid);
       expect(tileUrl([3, 2, -2])).to.eql('3/2/1');
       expect(tileUrl(null)).to.be(undefined);
     });
     it('accepts {-y} placeholder', function() {
-      var tileUrl = ol.TileUrlFunction.createFromTemplate('{z}/{x}/{-y}');
+      var tileUrl = ol.TileUrlFunction.createFromTemplate(
+          '{z}/{x}/{-y}', tileGrid);
       expect(tileUrl([3, 2, -3])).to.eql('3/2/5');
     });
+    it('returns correct value for {-y} with custom tile grids', function() {
+      var customTileGrid = new ol.tilegrid.TileGrid({
+        extent: [-180, -90, 180, 90],
+        origin: [-180, -90],
+        resolutions: [360 / 256, 360 / 512, 360 / 1024, 360 / 2048]
+      });
+      var tileUrl = ol.TileUrlFunction.createFromTemplate(
+          '{z}/{x}/{-y}', customTileGrid);
+      expect(tileUrl([3, 2, -3])).to.eql('3/2/1');
+    });
     it('replaces multiple placeholder occurrences', function() {
-      var tileUrl = ol.TileUrlFunction.createFromTemplate('{z}/{z}{x}{y}');
+      var tileUrl = ol.TileUrlFunction.createFromTemplate(
+          '{z}/{z}{x}{y}', tileGrid);
       expect(tileUrl([3, 2, -2])).to.eql('3/321');
     });
   });
 
   describe('createFromTemplates', function() {
+    var tileGrid = ol.tilegrid.createXYZ();
     it('creates expected URL', function() {
       var templates = [
         'http://tile-1/{z}/{x}/{y}',
         'http://tile-2/{z}/{x}/{y}',
         'http://tile-3/{z}/{x}/{y}'
       ];
-      var tileUrlFunction = ol.TileUrlFunction.createFromTemplates(templates);
+      var tileUrlFunction = ol.TileUrlFunction.createFromTemplates(
+          templates, tileGrid);
       var tileCoord = [3, 2, -2];
 
       sinon.stub(ol.tilecoord, 'hash', function() { return 3; });
@@ -68,10 +84,11 @@ describe('ol.TileUrlFunction', function() {
   });
 
   describe('createFromTileUrlFunctions', function() {
+    var tileGrid = ol.tilegrid.createXYZ();
     it('creates expected URL', function() {
       var tileUrl = ol.TileUrlFunction.createFromTileUrlFunctions([
-        ol.TileUrlFunction.createFromTemplate('a'),
+        ol.TileUrlFunction.createFromTemplate('a', tileGrid),
-        ol.TileUrlFunction.createFromTemplate('b')
+        ol.TileUrlFunction.createFromTemplate('b', tileGrid)
       ]);
       var tileUrl1 = tileUrl([1, 0, 0]);
       var tileUrl2 = tileUrl([1, 0, 1]);
@@ -84,3 +101,4 @@ describe('ol.TileUrlFunction', function() {
 
 goog.require('ol.TileCoord');
 goog.require('ol.TileUrlFunction');
+goog.require('ol.tilegrid.TileGrid');