0

I have a number of tile sources which utilise Bing Maps' Quadkey system in an old Silverlight application and I would like to use them in a new Openlayers 3 map.

I have found several examples of functions which will convert these sources for Leaflet.js but the syntax is somewhat different for OL3 and reading through the API docs indicates that there is an ol.Tile.coord class but if I understand correctly this is an experimental feature and might require a custom build from the source code.

Can anyone provide an example of this type of conversion or indeed does anyone know if the latest (3.8.2) version of OL3 supports the quadkey method?

This is the Leaflet example:

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

And this is the exisiting Silverlight code:

public override Uri GetUri(int x, int y, int zoomLevel, bool getPrintLink)
        {
            Uri uri = null;
            if (this.Covers(x, y, zoomLevel))
            {
                QuadKey qk = new QuadKey(x, y, zoomLevel);
                if (getPrintLink)
                {
                    uri = new Uri(this.CurrentHostURL + "/tiles/NL/" + zoomLevel.ToString() + "/" + qk.Key + ".ipic", UriKind.RelativeOrAbsolute);
                }
                else
                {
                    uri = new Uri("http://tileserver.satmap.com/NL/" + zoomLevel.ToString() + "/" + qk.Key + ".ipic", UriKind.RelativeOrAbsolute);
                }
            }
            return uri;
        }
1

I asked the question a little differently in another post and my question was answered completely although I'm still unable to access the url in question. For anyone else that may need to know I'm posting the link here and marking this question as answered.

Further to this, the code in the answer is below:

// quadkey function
var 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('');
};

var quadKeyLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
    maxZoom: 19,
    tileUrlFunction: function (tileCoord, pixelRatio, projection) {
        var z = tileCoord[0];
        var x = tileCoord[1];
        var y = -tileCoord[2] - 1;
        return "//example.com/r" + quadkey(x, y, z);
    }
})
});
  • Good question, although cross posting is discouraged at Stack Exchange (meta.stackexchange.com/q/64068). Furthermore, link only answers are discouraged (meta.stackexchange.com/q/8231). – Aaron Oct 30 '15 at 11:48
  • Apologies Aaron, I've amended my answer to incorporate the code in the other post. It wasn't my intention to cross-post although my first post earned a tumbleweed badge I think so I tried to ask another, clearer question. I was new to the forum at the time and a little unfamiliar with the etiquette. In this instance I was just trying to close an unanswered question and prevent anyone else responding. – dvmac01 Oct 30 '15 at 11:58
0

Bing Maps is already available in Open Layers 3. Take a look at this example: http://openlayers.org/en/master/examples/bing-maps.html

You can find the source code for the Bing Maps class in Open Layers 3 here: https://github.com/openlayers/ol3/blob/master/src/ol/source/bingmapssource.js

  • Thanks rbrunditt. Long story short, I have to access a series of tiles that have been cut as Bing and need to be accessed via Quadkey. I've come to realise that what I need to know is either how a getTileUrlFunction could be used to do this or how I could extend the ol.source.Bingmaps to pass in another url? – dvmac01 Oct 27 '15 at 15:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.