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

    'id': 'foobar1',
    'type': 'line',
    'source': 'tom',
    'interactive': true
  • Is it a GeoJSON in a JavaScript file or is it an actual .geojson file? Feb 24, 2016 at 16:33
  • 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?
    – Zev
    Feb 24, 2016 at 16:50
  • Is this still an issue? I can provide an answer, but you asked the question two years ago!\
    – Alex Leith
    Feb 22, 2018 at 20:38
  • @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.
    – PolyGeo
    Feb 23, 2018 at 3:24
  • 1
    @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.
    – Zev
    Feb 25, 2018 at 8:29

2 Answers 2


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

        'id': 'example',
        'type': 'fill',
        'source': "tom",
        'layout': {},
        'paint': {
            'fill-color': '#088',
            'fill-opacity': 0.8
  • 2
    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.
    – Zev
    Feb 25, 2018 at 8:30

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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.