Mapbox-gl-js: Can't overlay custom raster tiles

[chapani]

Hi there,

I'd like to overlay custom raster tiles on a mapbox gl map. I'm using this sample as a base: https://www.mapbox.com/mapbox-gl-js/example/toggle-layers/

One of my tiles: http://bm.concept3ddev.com/assets/771/mrg_8_11/16/17937/38168.png

Here is my full html file: http://bm.concept3ddev.com/exp/mapbox/index.html

Here is the javascript:

mapboxgl.accessToken = 'pk.eyJ1IjoibXVyYWRiIiwiYSI6IjE0MjY1MzQ4YzQwM2U2ZTcyMDQ3M2Y4ZWI5ZWI4Zjk2In0.0InWFzzsqctqGjn-MhJ7DA';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    zoom: 16,
    center:[-81.464416980743,28.426429818183],
});

map.on('load', function () {
    map.addSource('aaa', {
        type: 'raster',
        tiles: ['http://bm.concept3ddev.com/assets/771/mrg_8_11/{z}/{x}/{y}.png'],
        tileSize: 256
    });
    map.addLayer({
        'id': 'bbb',
        'type': 'raster',
        'source': 'aaa',
        'layout': {
            'visibility': 'visible'
        }
    });
});

I can't seem to find what I'm doing wrong.

Thanks!

[swratten]

The jsFiddle wont work with your tileset as you're being blocked by CORS. If you check the javascript console you'll see a message "No 'Access-Control-Allow-Origin' header is present on the requested resource."

[chapani]

thanks @swratten! I modified the problem description.

[jfirebaugh]

Are there supposed to be working tiles at the initial zoom level and center of http://bm.concept3ddev.com/exp/mapbox/index.html? All I see are blank tiles, e.g. http://bm.concept3ddev.com/assets/771/mrg_8_11/17/35878/54732.png.

[chapani]

thanks @jfirebaugh

yes, this one should be there: http://bm.concept3ddev.com/assets/771/mrg_8_11/16/17937/38168.png

But I can see z, x, y values don't match. Does MapBox GL use a different calculation for z, x and y?

[jfirebaugh]

It uses standard XYZ tile coordinates by default. It looks like your tiles may be in TMS coordinates (flipped Y). Try adding scheme: 'tms' in the map.addSource call.

[chapani]

Thanks @jfirebaugh! That was it!