Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Use Bing Maps Ordnance Survey tiles as a Leaflet TileLayer
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('');
}
});
var layer = new BingLayer('http://ak.dynamic.t{s}.tiles.virtualearth.net/comp/ch/{q}?mkt=en-GB&it=G,OS,BX,RL&shading=hill&n=z&og=107&key=Ap0Nw80Jm3CbYCPvzZc6DPF9GTkbWQ-pGysYKbtLYEobQqeVODLRPmnFQOhzDkzq&c4w=1', {
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
attribution: '&copy; <a href="http://bing.com/maps">Bing Maps</a>',
detectRetina: true
});
var map = new L.Map(document.querySelector('#map'), {
layers: [layer],
center: new L.LatLng(51.7617353,-1.2427226),
zoom: 12
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.