Use Bing Maps tiles with Leaflet

Question

I'm trying to integrate Bing Maps tiles into Leaflet. All of the plugins I've found to do this have been no help though since they have no info on their usage. I could write a script in PHP to recieve the X, Y and Z coordinates from Leaflet (just set the script as the tile server URL), but I'd need a way to convert them to a Quadkey. An answer for either would be acceptable. I do have a Bing Maps API key if that helps.

Answer 1

GitHub user shramov's leaflet-plugins repository (linked to in the gist shared in Nicolas' answer) includes an example using a Bing tile layer, and has been fairly well maintained as far as I can tell. You'll need to include the Bing.js file along with the Leaflet JS and CSS:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="Bing.js"></script> 

<div id="map"></div>

<script type='text/javascript'>
    var map = new L.Map('map', {center: new L.LatLng(67.6755, 33.936), zoom: 10 });
    var bing = new L.BingLayer(YOUR_BING_API_KEY);
    map.addLayer(bing);
</script>

You'll notice that the Bing tile layer defaults to Aerial imagery. If you open the Bing.js file, you'll see on Line 4 that the type property is set to 'Aerial'. This can be changed to 'Road' or 'AerialWithLabels' for the corresponding Tile imagery.