CODEWITHSUNDEEP
phpjavascriptleafletbing-maps
Eva Lauren Kelly
Eva Lauren Kelly

Reputation: 413

Use Bing Maps tiles with Leaflet

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.

Upvotes: 6

Views: 17196

Answers (2)

crowjonah
crowjonah

Reputation: 2878

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.

Upvotes: 5

Nicolas Boonaert
Nicolas Boonaert

Reputation: 2952

I don't think that you need to use a php module to do this since you can directly generate the quadkey from X/Y/Zoom in Leaflet and integrate Bing Maps tiles into your client application. To convert your X/Y/zoom into a quadkey using JavaScript, it could be done like this: 

function TileXYToQuadKey(tileX, tileY, levelOfDetail) {
    var quadKey = '';
    for (var i = levelOfDetail; i > 0; i--) {
        var digit = '0';
        var mask = 1 << (i - 1);
        if ((tileX & mask) != 0) {
            digit++;
        }
        if ((tileY & mask) != 0) {
            digit++; digit++;
        }
        quadKey += digit;
    } //for i return quadKey; 
}

Here is a possible implementation of Bing layer into leaflet: https://gist.github.com/1221998

Here you will find interesting information regarding the tile scheme that Bing is using: http://msdn.microsoft.com/en-us/library/bb259689.aspx

Please keep in mind that this use is not something that should be done without any consideration regarding licensing. You should integrate it using the Imagery Service's information like used with the leaflet plugin (so you can track your usage and have a supported way to access to Bing tile URIs), for more information on imagery service, here is the MSDN documentation: http://msdn.microsoft.com/en-us/library/ff701716.aspx

Upvotes: 2

Related Questions