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)
        if ((y & mask) != 0)
            digit = digit + 2;

    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 "" + computeQuadKey(x, y, z) + ".png";

And finally, add the created layer to your map:


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.

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](

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

Here is some inline `code`.

For more help see

This site uses Akismet to reduce spam. Learn how your comment data is processed.