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
});

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
        }
    });
});

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?