ruby-on-rails-4 - マップボックスGL JSにデータのURLを追加する方法

Question

Mapbox js を使用してマップにマーカーを追加する Rails アプリがあります。Mapbox JS と完全に連携します。ただし、Mapbox GL JS で動作させる方法がわかりません。これが私のコントローラーインデックスアクションです:

def index
   @locations = Location.all

   @geojson = Array.new

   @locations.each do |location|
     @geojson << {
       type: 'Feature',
       geometry: {
         type: 'Point',
         coordinates: [location.longitude, location.latitude]
       },
       properties: {
         title: location.name,
         description: [location.elevation, location.locatable_type ],
         :'marker-color' => "#3ca0d3",
         :'marker-symbol' => "rocket",
         :'marker-size' => 'medium'
       }
     }
  end

  respond_to do |format|
    format.html
    format.json { render json: @geojson }   
  end

end

私の見解では、このスクリプトを使用して、Mapbox JS でマップ上のポイントを取得します。

  L.mapbox.accessToken = 'pk.mylongaccesskeygoeshere';

  var map = L.mapbox.map('map', 'mapbox.streets')
  .setView([13.770391, -88.866245], 8);
  map.scrollWheelZoom.disable();    

  var featureLayer = L.mapbox.featureLayer()
  .loadURL('/maps/index.json')
  .addTo(map);

私の質問は: Mapbox GL JS でこれを達成するにはどうすればよいですか? ページに地図を表示するために使用するコードを次に示します。

   mapboxgl.accessToken = 'pk.mylongaccesskeygoeshere';

   var map = new mapboxgl.Map({
   container: 'map', // container id
   style: 'mapbox://styles/mapbox/outdoors-v9', //stylesheet location
   center: [-88.866245, 13.770391], // starting position
   zoom: 7.2 // starting zoom
   });

Mapbox GL JSのドキュメントにあるように、「データ」のURLを渡すためにさまざまな方法を試しました。たとえば、私は試しました

 mapboxgl.accessToken = 'pk.mylongaccesskeygoeshere';

  var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/outdoors-v9', //stylesheet location
    center: [-88.866245, 13.770391], // starting position
    zoom: 7.2 // starting zoom
  });

  var url = '/maps/index.json';
    var source = new mapboxgl.GeoJSONSource({
    data: url
  });

  map.on('load', function () {
    map.addSource('location', source);
    map.addLayer({
        "id": "location",
        "type": "symbol",
        "source": "location",
        "layout": {
          "icon-image": "rocket-15",
        }
    });
  });

コンソールに次のエラーが表示されます。

map.js:929 Error: Input data is not a valid GeoJSON
object.util.extend.onError        @ map.js:929
Evented.fire                      @ evented.js:90
util.extend._forwardSourceEvent   @ map.js:943
Evented.fire                      @ evented.js:90
util.inherit._forwardSourceEvent  @ style.js:680
Evented.fire                      @ evented.js:90
(anonymous function)              @ geojson_source.js:162
Actor.receive                     @ actor.js:31

maps/index.json に移動すると、ページ上の json の出力は次のようになります。

[
  {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [
        -89.12312324,
        13.686886
      ]
    },
    "properties": {
      "title": "Random Location",
      "description": [
        "700.0",
        "Individual"
      ],
      "marker-color": "#3ca0d3",
      "marker-symbol": "rocket",
      "marker-size": "medium"
    }
  },
  {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [
        -88.231293812398,
        13.087893
      ]
    },
    "properties": {
      "title": "Some Place",
      "description": [
        "50.0",
        "Organization"
      ],
      "marker-color": "#3ca0d3",
      "marker-symbol": "rocket",
      "marker-size": "medium"
    }
  },
  {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [
        -89.224564,
        13.700985
      ]
    },
    "properties": {
      "title": "San Salvador",
      "description": [
        "550.0",
        "Individual"
      ],
      "marker-color": "#3ca0d3",
      "marker-symbol": "rocket",
      "marker-size": "medium"
    }
  },
  {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [
        -89.0,
        13.0
      ]
    },
    "properties": {
      "title": "Set Location Test",
      "description": [
        "100.0",
        "Individual"
      ],
      "marker-color": "#3ca0d3",
      "marker-symbol": "rocket",
      "marker-size": "medium"
    }
  }
]