CODEWITHSUNDEEP
javascriptleafletmapbox
Twalsh
Twalsh

Reputation: 86

Could not load TileJSON error

I have recently been developing a web map project for work using mapbox.js. I have recently deployed it to our internal test site. Upon doing this the base map no longer loads from Mapbox and leaves a white background with just my custom layers active. I am receiving the following error in the console.

XMLHttpRequest cannot load http://a.tiles.mapbox.com/v4/mapbox.streets-basic.json?access_token=pk.myaccestokenhere. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://mytest.site' is therefore not allowed access.

I tried setting the crossOrigin option for the tileLayer to 'true' but I still receive the same error. Here is the code snippet of the layers that fail to load. I need some insight on how to resolve this issue.

    //Base layers object that contains all mapbox base layers.
    var baseLayers = {
        'Dark': L.mapbox.tileLayer('mapbox.dark', {crossOrigin: true}),
        'Light': L.mapbox.tileLayer('mapbox.light', { crossOrigin: true }),
        'High-contrast': L.mapbox.tileLayer('mapbox.high-contrast', { crossOrigin: true }),
        'Streets': L.mapbox.tileLayer('mapbox.streets', { crossOrigin: true }),
        'Streets-basic': L.mapbox.tileLayer('mapbox.streets-basic', { crossOrigin: true }),
        'Satellite & Streets': L.mapbox.tileLayer('mapbox.streets-satellite', { crossOrigin: true }),
        'Outdoors': L.mapbox.tileLayer('mapbox.outdoors', { crossOrigin: true })
    };

baseLayers.Dark.addTo(map, true);
L.control.layers(baseLayers, overlays).addTo(map);

Upvotes: 1

Views: 1240

Answers (1)

Twalsh
Twalsh

Reputation: 86

Turns out our network admin has a web blocker at our main office that was stripping my headers off the request. We put an exception in for it and it works correctly now.

Upvotes: 1

Related Questions