Mapbox-gl-js: better documentation / examples around loading GeoJSON by URL

[jfirebaugh]

"GeoJSON layers are slow" is a common complaint and the best solution is to use a URL for the data option rather than inline GeoJSON. This option is documented in https://www.mapbox.com/mapbox-gl-js/api/#geojsonsource, but we should make examples that demonstrate it and emphasize that it's the preferred way.

[musicformellons]

Do you have an example of a URL reference to a local file?

This does not work:
map.on('style.load', function () {
map.addSource("markers", {
"type": "geojson",
"data": "file:///testjson.json"
});

map.addLayer({
    "id": "markers",
    "type": "circle",
    "source": "markers",
    "paint": {
        "circle-radius": 10,
        "circle-color": "#ff442b",
        "circle-opacity": 0.6
     }
});

});

However when I replace the "file:///testjson.json" with the JSON object it works fine...; so the reference does not work.

[jfirebaugh]

@musicformellons Try with an http:// or https:// URL rather than file://. There are browser security restrictions around file:// that prevent it from being reliable.

[musicformellons]

Probably my lack of experience but I do not get it working with http:// or https:// using a local geojson file. Any guidance with more detail would be very helpful. As I am working in Django should I make a specifice URL for the geojson file in url.py or something?

[bhousel]

Wouldn't you just link to it the same way as any other static asset, like an image or stylesheet?
https://docs.djangoproject.com/en/1.8/howto/static-files/

[musicformellons]

Yes, thanks. I did this (and put the json in the static folder) and now works fine and indeed much faster with large json files:
"data": "{{ STATIC_URL }}geojson/markers.json",

[lucaswoj]

We've had some documentation pushing users towards URLs over literals for a while. Just pushed an example that uses a URL in https://github.com/mapbox/mapbox-gl-js/commit/253584688a3a8f73121214cf62016140548131fd.

[peeinears]

I think the documentation is incorrect. It's missing type: 'geojson', which appears to be required.

Should be:

map.addSource('some id', {
    type: 'geojson',
    data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_ports.geojson'
});

[lucaswoj]

Thanks @peeinears! This mistake must've been introduced as we moved from the GeoJSONSource constructor to the flat object structure. Fixed in 47edb351a5cb35541c38817a0e4353c65bf12cae

[amauriciorr]

I recognize this thread is quite old but I'm having some trouble loading GeoJSON using a url. I've loaded a file onto AWS S3 and distributed it using CloudFront so that it's accessible at d36v8m4hidy252.cloudfront.net/test.json, however I cannot get any coordinates to populate. Can anyone offer me help?

[gautamc1106]

I get a similar issue.I have my geojson file in the same project folder and for some reason it is unable to load it. However if i copy paste the entire geojson file in the source field instead of the static url it works:
map.addLayer({
"id": "points",
"type": "circle",
"source": {
"type": "geojson",
"data": "./collisions1601.geojson"
},
this does not work!

Error Stack:

  | Evented.fire | @ | evented.js:111
-- | -- | -- | --
  | Evented.fire | @ | evented.js:105
  | Evented.fire | @ | evented.js:105
  | (anonymous) | @ | geojson_source.js:134
  | (anonymous) | @ | geojson_source.js:186
  | Actor.receive | @ | actor.js:77

[pathmapper]

@gautamc1106 you could try to un-inline your source, using map.addSource before map.addLayer, see also https://github.com/mapbox/mapbox-gl-js/issues/5728

[gautamc1106]

I tried that too. Does not make a difference

[samsammurphy]

having same issue as @amauriciorr .. I cannot display raw geojson from URL hosted on AWS. The AWS object is public, the bucket has CORS configured to '*' and I am using http-server with cors on:

http-server -p 3000 --cors

a working example would be really helpful in the docs for this (and other similar) use cases.