Mapbox-gl-native: Bing maps

[kjeremy]

Is it possible to use Bing Maps with this Mapbox SDK? I added support to the original Mapbox Android SDK before this new project and I was hoping to try out the new SDK.

[danswick]

Hi @kjeremy - you can view external raster tiles in the Mapbox SDK by adding them to your Style JSON as a source. To use your new style JSON, place it in your assets folder per this example.

"simple-tiles":{  
  "type":"raster",
  "tiles":[  
    "http://tile.openweathermap.org/map/precipitation/{z}/{x}/{y}.png"
  ],
  "tileSize":256
}

[kjeremy]

@danswick Does that handle the bing API key?

[danswick]

@kjeremy I believe you'll need to add your Bing API key to the end of your tile URL: &key=YOUR_BING_MAPS_KEY.

[ambientlight]

@danswick
But Bing Maps uses quad keys instead of /z/x/y,
Is there a way how to the following transformation might be used in the styleURL?

_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('');
}

[tmpsantos]

@ambientlight try this http://example.com/{quadkey}.png

[ambientlight]

Amazing, thanks.

[friedbunny]

FYI: the {quadkey} token was added very recently in https://github.com/mapbox/mapbox-gl-native/pull/5628 and won’t yet be available in an official SDK release.

[strech345]

Is there a reason why quadkey is not official?
I use it also and would be happy if it will have a official status.

[friedbunny]

@strech345 I was using “official” to mean “available in a release that we’ve packaged” and not “you have to build it yourself”. This issue is a year old and quadkey should be available in the current release.

[strech345]

yes it's included but i don't find it in the documentation
all other parameters are definded here
https://www.mapbox.com/mapbox-gl-js/style-spec/#sources

[friedbunny]

That is true — adding documentation is tracked in https://github.com/mapbox/mapbox-gl-js/issues/4137.

[rcstanciu]

Are there any updates regarding adding {quadkey} support to the official SDK (especially for react-native-mapbox-gl) ?

[kkaefer]

There aren't; {quadkey} is supported as of https://github.com/mapbox/mapbox-gl-native/pull/5628

[nafis042]

can anyone please give me an example code sample where bing satellite map is shown using Mapbox SDK. I want to add this using raster layer. can't find any example.

[tannerjt]

Here is an example from @kepta - https://github.com/kepta/idly/wiki/examples#using-bing-satellite-map - adding to mapbox-gl-js. It works with built in {quadkey}.