[GIS] Adding geojson to Mapbox GL JS

geojsonmapbox-gl-js

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

Best Answer

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