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

Question

Mapbox jsを使用して地図上にマーカーを追加するレールアプリがあります。これはMapbox JSと完全に機能します。しかし、私はそれをMapbox GL JSで動作させる方法を理解できません。 ここに私のコントローラのindexアクションです：

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

私の質問です：私はこれを実現するにはどうすればよい私の見解では

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で地図上のポイントを取得するには、このスクリプトを使用します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を渡すためにさまざまな方法の多くを試してみました。

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 

私はマップに行くとき/ページのJSONの出力は次のようになりますindex.json：

例えば、私は私が私のコンソールでこのエラーを取得する

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

を試してみました

[ 
    { 
    "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" 
    } 
    } 
] 

Answer 1

私はこの問題を解決できました。

問題は、私のコントローラのインデックスアクションが生成していたjsonです。私はMapboxのツールgeojsonヒントhttps://www.mapbox.com/geojsonhint/を使ってjsonをデバッグしました。最後に

[冒頭と]問題

と私は初めに

"type": "FeatureCollection", 
    "features": [ 

がありませんでしたでした：それはことが判明しました。

したがって、コントローラを使用してjsonを生成する代わりに、私はjbuilderを使いました。

この

def index 
    @locations.Location.all 
end 

のように見えるように私のコントローラのindexアクションを変更し、私は拡張子.json.jbuilderとビューを作成し、得られJSONは

{ 
"type": "FeatureCollection", 
    "features": [ 
    { 
     "type": "Feature", 
     "geometry": { 
     "type": "Point", 
     "coordinates": [ 
      -89, 
      13 
     ] 
     }, 
     "properties": { 
     "title": "Random Location" 
     } 
    }, 
    { 
     "type": "Feature", 
     "geometry": { 
     "type": "Point", 
     "coordinates": [ 
      -88, 
      13 
     ] 
     }, 
     "properties": { 
     "title": "Some Place" 
     } 
    }, 
    { 
     "type": "Feature", 
     "geometry": { 
     "type": "Point", 
     "coordinates": [ 
      -89, 
      13 
     ] 
     }, 
     "properties": { 
     "title": "Fantacy Club Bar" 
     } 
    }, 
    { 
     "type": "Feature", 
     "geometry": { 
     "type": "Point", 
     "coordinates": [ 
      -89, 
      13 
     ] 
     }, 
     "properties": { 
     "title": "Set Location Test" 
     } 
    }, 
    { 
     "type": "Feature", 
     "geometry": { 
     "type": "Point", 
     "coordinates": [ 
      -89, 
      14 
     ] 
     }, 
     "properties": { 
     "title": "Some place else" 
     } 
    } 
    ] 
} 

ある

json.type "FeatureCollection" 
json.features @locations do |location| 
    json.type "Feature" 
    json.geometry do 
    json.type "Point" 
    json.coordinates [location.longitude.to_f,location.latitude.to_f] 
    end 
    json.properties do 
    json.title location.name 
    end 
end 

を追加しましたjbuilderコードのto_fに注目してください。それはあなたがフロートを得ることを確認します。重要なことは、データが地図上にあることです。

Answer 2

コンソールに「入力データが有効なGeoJSONではありません」というエラーメッセージが表示されます。あなたの入力データが有効なGeoJSONであるかどうか確認しましたか？

GeoJSONはJSONのサブセットです。 JSONは//コメントをサポートしていません。