Adding geojson to Mapbox GL JS

Question

Seem to be having problems adding a geojson featurecollection to Mapbox GL JS.

What is the most efficient way to accomplish this? I've looked through the examples given on their site but they involve only singular objects.

Edit: I've managed to display the geojson using the following code

map.on('style.load', function() {
map.addSource("tom", {
 "type": "geojson",
 "data": mappingStructure
});
map.addLayer({
 'id': 'foobar1',
 'type': 'line',
 'source': 'tom',
 'interactive': true
});

• BritishSteel: Is it a GeoJSON in a JavaScript file or is it an actual .geojson file?
• Zev: I have both to be honest. It's about 2mb worth of geojson. Wouldn't it be easier/neater to work with the file rather?
• Alex Leith: Is this still an issue? I can provide an answer, but you asked the question two years ago!\
• PolyGeo: @AlexLeith If its easy for you to answer I think you should so that the next person/people experiencing the same problem get an instant answer without needing to re-ask the same question.
• Zev: @AlexLeith If I recall correctly, the documentation at the time of posting was a little light and thus had to figure it out myself. I posted the answer in my edit in the above which worked.

Answer 1

MapBox GL JS has quite extensive documentation, and there's an example for adding a GeoJSON Polygon on there.

In your example, I think what was probably missing is the style information. This code should work:

map.on('load', function () {
 map.addSource("tom", {
 type: "geojson",
 data: mappingStructure
 })
 map.addLayer({
 'id': 'example',
 'type': 'fill',
 'source': "tom",
 'layout': {},
 'paint': {
 'fill-color': '#088',
 'fill-opacity': 0.8
 }
 });
});

• Zev: Unfortunately GL JS didn't have extensive documentation at the time, at least not pertaining to rendering. My answer in the above solved my issue.

Answer 2

Perhaps this might be stating the obvious,but have you tried adding the geojson file as a vectorized file in https://www.mapbox.com/studio/tilesets/ ? This method (vector tile format) is easy and rather fast.

This might serve best as background static layer that you can upload and store ex) https://www.mapbox.com/mapbox-gl-js/example/vector-source/.

When you are saying 'easier' , do you mean faster or file size?