Problems loading data from a geojson file to a mapbox map

Question

I using this code to load data from geojson file to this mapbox map:

var mapTooltips = L.mapbox.map('map-tooltips', 'mapbox.streets')
  .setView([54.00366,-2.547855], 6);

  var featureLayer = L.mapbox.featureLayer()
    .loadURL('https://www.mapbox.com/mapbox.js/assets/data/stations.geojson')
    .addTo(mapTooltips);

The problem:

Using this URL from mapbox as a test, the markers appears on the map perfectly

https://www.mapbox.com/mapbox.js/assets/data/stations.geojson

But When I use the same file but from another server, example:

https://s3.amazonaws.com/web-app-cdata/MapaFel/stations.geojson

The markers doesnt appears, doesnt work.

Using the mapbox link:

Using the S3 link:

I want to mention, the S3 link have full access. In theory can be accessb anyone

Any ideas?

kmandov kmandov · Accepted Answer · 2016-05-26T08:52:42

By default, you are not allowed to load resources(such as geojson files) from external domains. This is referred as making a cross-origin HTTP request.

So, when mapbox-gl tries to load the geojson file(jsfiddle) from your S3 instance, there's an error:

XMLHttpRequest cannot load https://s3.amazonaws.com/web-app-cdata/MapaFel/stations.geojson. No 'Access-Control-Allow-Origin' header is present on the requested resource.

You can load the same geojson from the mapbox servers, because Mapbox have explicitly allowed such cross-origin requests, by specifying a response header: Access-Control-Allow-Origin: *

As explained here:

"The server responds with a Access-Control-Allow-Origin: * which means that the resource can be accessed by any domain in a cross-site manner. "

Problems loading data from a geojson file to a mapbox map

1 Answers