OpenLayers 3: Add the Bing Maps Traffic layer to your map

April 7, 2016, Software Development

The following code shows how to add the Bing Maps Traffic layer to your OpenLayers 3 map.

First, we have to implement the computeQuadKey function which takes the tile coordinates and calculates a quadkey identifier which is required for the Bing API request:

var computeQuadKey = function(x, y, z) {
    var quadKeyDigits = [];
    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 + 2;

        quadKeyDigits.push(digit);
    }
    return quadKeyDigits.join('');
};

With this quadkey computation function and the Bing Traffic tile URL, create a OpenLayers 3 Tile layer:

var quadKeyLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        maxZoom: 19,
        tileUrlFunction(tileCoord, pixelRatio, projection) {
            var z = tileCoord[0];
            var x = tileCoord[1];
            var y = -tileCoord[2] - 1;
            return "http://t0.tiles.virtualearth.net/tiles/t" + computeQuadKey(x, y, z) + ".png";
        }
    })
});

And finally, add the created layer to your map:

map.addLayer(quadKeyLayer);

You should check the Bing AGBs whether you are allowed to use this layer on your website and whether you have to add a source citation.

Tweet about this on TwitterShare on FacebookEmail this to someoneShare on TumblrShare on LinkedIn

Tags: , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax