I'm using leaflet
with tiles generated by gMapCatcher.
the file names there is totally different.
For example - zoom level 17 in leaflet is level 0 at gMapCatcher.
I need to change the url template
'http://{s}.somedomain.com/blabla/{z}/{x}/{y}.png'
so I can insert the calculations for the right directories
I tried the naive way to write the calculations within the template but it does not work.
I found an answer:
I downloades the leaflet.js (passed it through http://jsbeautifier.org/)
and changed the code at getTileUrl and added my custom variables :
getTileUrl: function (t) {
return o.Util.template(this._url, o.extend({
s: this._getSubdomain(t),
z: t.z,
x: t.x,
y: t.y,
z0: 17-t.z,
x0: Math.floor(t.x/1024),
x1: Math.floor(t.x%1024),
y0: Math.floor(t.y/1024),
y1: Math.floor(t.y%1024)
}, this.options))
},
and in my script
L.tileLayer('img/tiles/gMapCatcher/{z0}/{x0}/{x1}/{y0}/{y1}.png').addTo(map); //gMapCatcher
L.tileLayer('img/tiles/{z}/{x}/{y}.png').addTo(map);
//other tiles
In leaflet 0.7 change the code to
getTileUrl: function (t) {
return L.Util.template(this._url, L.extend({
s: this._getSubdomain(t),
z: t.z,
x: t.x,
y: t.y,
z0: 17-t.z,
x0: Math.floor(t.x/1024),
x1: Math.floor(t.x%1024),
y0: Math.floor(t.y/1024),
y1: Math.floor(t.y%1024)
}, this.options))
},
otherwise it will give a reference error
And to find the location of gmapcatcher files just go into the settings and find the location
Taking shai givati's answer a step farther, if you don't want to edit the source, this appears to work (although it's not documented as far as I can see):
var map = L.map('map');
var layer = L.tileLayer().addTo(map);
layer.getTileUrl = function(coords)
{
var url = /* whatever logic you'd like to use to come up with a url */;
return url;
};
This has the benefit of working on an individual instance of a tileLayer rather than globally on every layer. Plus, it's more in line with the way other javascript mapping frameworks behave, such as google maps.