Use Bing Quadkey tiles instead of x/y/z tiles in leafletjs map
You can create a simple "BingLayer" by extending the L.TileLayer class. Then you just have to override the getTileUrl method to use the new template you prefer (i.e. for bing maps). See the linked fiddle for an example:
http://jsfiddle.net/nkmbx/
var BingLayer = L.TileLayer.extend({
getTileUrl: function (tilePoint) {
this._adjustTilePoint(tilePoint);
return L.Util.template(this._url, {
s: this._getSubdomain(tilePoint),
q: this._quadKey(tilePoint.x, tilePoint.y, this._getZoomForUrl())
});
},
_quadKey: function (x, y, z) {
var quadKey = [];
for (var i = z; i > 0; i--) {
var digit = '0';
var mask = 1 << (i - 1);
if ((x & mask) != 0) {
digit++;
}
if ((y & mask) != 0) {
digit++;
digit++;
}
quadKey.push(digit);
}
return quadKey.join('');
}
});
For leaflet=>1 above answer of @user2494854 doesnt work. Here is updated version of his answer that worked for me:
var BingLayer = L.TileLayer.extend({
getTileUrl: function(coords) {
var quadkey = this.toQuadKey(coords.x, coords.y, coords.z)
var url = L.Util.template(this._url, {
q: quadkey,
s: this._getSubdomain(coords)
})
if (typeof this.options.style === 'string') {
url += '&st=' + this.options.style
}
return url
},
toQuadKey: function(x, y, z) {
var index = ''
for (var i = z; i > 0; i--) {
var b = 0
var mask = 1 << (i - 1)
if ((x & mask) !== 0) b++
if ((y & mask) !== 0) b += 2
index += b.toString()
}
return index
}
})