Mapbox-creation-api-tileLayer-bing-wrapper

Mapbox-creation-api-tileLayer-bing-wrapper.js

// In our project, I had to use a custom wrapper for Mapbox's TileLayer 
// b/c our ASP.NET MVC controller endpoint was originally created to 
// conform to Bing map url template that uses "quadkey".
// I found this StackOverflow thread about a wrapper for Mapbox/Leaflet 
// L.tileLayer to load tiles from Bing-formated urls (with "quadkey") 
// http://stackoverflow.com/questions/17154781/use-bing-quadkey-tiles-instead-of-x-y-z-tiles-in-leafletjs-map
// Read about Bing Map Tile System to understand how to convert the 
// two-dimensional tile XY coordinates into one-dimensional strings called "quadkeys".

var BingLayer = L.TileLayer.extend({
    getTileUrl: function (tilePoint) {
        this._adjustTilePoint(tilePoint);
        var zoomForUrl = this._getZoomForUrl();
        var tempTileUrl = L.Util.template(this._url, {
            subdomain: this._getSubdomain(tilePoint),
            quadkey: this._quadKey(tilePoint.x, tilePoint.y, zoomForUrl)
        });
        return tempTileUrl;
    },
    _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('');
    }
});

// using the wrapper BingLayer instead of TileLayer. 
var tileLayer = new BingLayer(url, {
   zIndex: 10,
   maxZoom: 20
});