Mapbox GL JS cannot load GeoJson from path

Question

I'm writing the app in Ruby on Rails and I have the application set to serve GeoJson from a specific path. What I would like to do have Mapbox grab the GeoJson from the specified path, and add it to the map. Here is my javascript code to create the map

$(document).on 'turbolinks:load', ->
  map = new (mapboxgl.Map)(
    container: 'map'
    style: 'mapbox://styles/mapbox/streets-v9'
    zoom: 6
  )
  map.on 'load', ->
    map.addSource 'shapes',
      type: 'geojson'
      data: '/regions.json'

When I navigate to /regions.json I get the following response.

{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {},
        "geometry": {
            "coordinates": [
                [
                    [8.66990129597281, 50.1242808292475],
                    [8.6629978834745, 50.1232734203388],
                    [8.66073109130571, 50.1231247844397],
                    [8.65846429911693, 50.1231743297949],
                    [8.65887644316587, 50.1218035561855],
                    [8.65993256224607, 50.1193096384939],
                    [8.65980376723581, 50.1190949242805],
                    [8.66297212445633, 50.1181699904754],
                    [8.66451766457959, 50.1175093125293],
                    [8.6669905287728, 50.1165843480906],
                    [8.66910276691314, 50.1158080248614],
                    [8.67085437906084, 50.1154611529673],
                    [8.67098317407113, 50.1174597613236],
                    [8.67077710204663, 50.1200363564073],
                    [8.67015888599337, 50.1224806902187],
                    [8.66979825998064, 50.1237358401687],
                    [8.66990129597281, 50.1242808292475]
                ]
            ],
            "type": "Polygon"
        }
    }, {
        "type": "Feature",
        "properties": {},
        "geometry": {
            "coordinates": [
                [
                    [8.69901780003497, 50.1216735191773],
                    [8.69820854586041, 50.1210834384206],
                    [8.69762143988481, 50.1207476995652],
                    [8.69625681516334, 50.1199134291953],
                    [8.6948921904667, 50.1181736234834],
                    [8.69597119603273, 50.1173698322427],
                    [8.69612987332479, 50.1173291335912],
                    [8.69676458249296, 50.1181736234834],
                    [8.69744689485361, 50.1188553092786],
                    [8.69879565183601, 50.1200558666313],
                    [8.70008093788664, 50.121042742926],
                    [8.69901780003497, 50.1216735191773]
                ]
            ],
            "type": "Polygon"
        }
    }, {
        "type": "Feature",
        "properties": {},
        "geometry": {
            "coordinates": [
                [
                    [8.67778012178596, 50.105440710563],
                    [8.67960973428302, 50.103294069223],
                    [8.67505801538456, 50.1017054926895],
                    [8.67414320915341, 50.1013763215998],
                    [8.66892211982668, 50.0993583102266],
                    [8.66816350002185, 50.1000882390455],
                    [8.6691229309412, 50.1009755885121],
                    [8.67238053367137, 50.1029076635563],
                    [8.67427708321821, 50.1039953159691],
                    [8.67778012178596, 50.105440710563]
                ]
            ],
            "type": "Polygon"
        }
    }]
}

The map loads just fine, but there are no shapes. The frustrating part is that there are no errors in the browser, and that the GeoJson checks out on geojson.io.

What am I doing wrong here?

Answer 1

Ok so it turns out what I actually wanted to do was create a layer and assign the remote GeoJson file as the source:

map.addLayer
  id: 'territory-map'
  type: 'fill'
  source:
    type: 'geojson'
    data: '/regions.json'

I was able to find an example of this process here