Bergfex Leaflet Layer - leaflet

Question

I have used the first code to display a Bergfex layer in OpenLayers and this works up to high zoom layers whereas I cannot get a Leaflet layer to work above zoom 12.
Does anybody know if this is a limitation or are other elements needed? I have tried it both as a base layer or overlay. Both sets of code are below.
OpenLayers:
bergfex = new OpenLayers.Layer.XYZ("Bergfex Topo Austria",
"http://static7.bergfex.at/images/amap/${z}$folder/${z}_${x}_${y}.png", {
sphericalMercator: true,
buffer: 0,
opacity: 0.5,
isBaseLayer: false,
visibility: false,
attribution: "© 2008, 2013 BEV,<a href='http://www.bergfex.at'>bergfex GmbH</a>",
getURL: function(bounds) {
var path = OpenLayers.Layer.XYZ.prototype.getURL.apply(this, arguments);
var parts = path.split("$folder/");
var z = parseInt(parts[0].substr(-2));
path = path.replace("$folder", z >= 14 ?
"/" + parts[1].substr(3, 2 + z - 14) : "");
return path;
}
});
Leaflet:
bf = L.tileLayer('http://static7.bergfex.at/images/amap/{z}/{z}_{x}_{y}.png', {
maxZoom: 18,
attribution: bergfexAttribution,
detectRetina: true
})

Answer 1

The URL template used in your Leaflet code ('http://static7.bergfex.at/images/amap/{z}/{z}_{x}_{y}.png') has tiles available only above Austria, and from zoom levels 8 to 13 (included). There are no tiles (404 error) from zoom 0 to 7 (included), and zoom 14 and above.
To avoid unnecessary network request, you might be interested in using minZoom and bounds Tile Layer options:
bf = L.tileLayer('http://static7.bergfex.at/images/amap/{z}/{z}_{x}_{y}.png', {
maxZoom: 13,
minZoom: 8,
bounds: [
[45, 10], // I just used arbitrary bounds, you should adjust them.
[50, 15]
],
attribution: bergfexAttribution,
detectRetina: true
});
Now to go beyond zoom level 13, your OpenLayers code changes that URL template dynamically (see the getURL options), so it looks like 'http://static7.bergfex.at/images/amap/{z}/{x2}/{z}_{x}_{y}.png' with x2 being the first 2 digits of x at zoom 14 and the first 3 at zoom 15 (maybe and so on).
You will need to do a similar "URL template dynamic adjustment" for Leaflet. Unfortunately, Leaflet does not expose a similar getURL option as OpenLayers. Nevertheless, you could modify the getTileUrl method of your bf Tile Layer instance so that it does that adjustment (you would have to adapt your OpenLayers code):
var bf2 = L.tileLayer('http://static7.bergfex.at/images/amap/{z}/{x2}/{z}_{x}_{y}.png', {
maxZoom: 18, // Looks like tiles are available only up to 15 included, or the URL template changes again?
minZoom: 14,
bounds: [
[45, 10], // I just used arbitrary bounds, you should adjust them.
[50, 15]
],
attribution: bergfexAttribution,
detectRetina: true
});
bf2.getTileUrl = function (tilePoint) {
var x2 = Math.floor(tilePoint.x / 100);
return L.Util.template(this._url, L.extend({
s: this._getSubdomain(tilePoint),
z: tilePoint.z,
x: tilePoint.x,
y: tilePoint.y,
x2: x2
}, this.options));
};
bf2.addTo(map);
Demo: http://jsfiddle.net/ve2huzxw/217/