MapBox GLにGeoJSONレイヤーがロードされないJS

Question

GeoJSONデータのレイヤーをMapBoxベースマップに追加しようとしていますが、動作しません。私はthis oneとthis oneのようなチュートリアルを試してみましたが、うまくいきません。

これは私のコードです：

var map = new mapboxgl.Map({ 
     container: 'themap', 
     center: [-73.9939914, 40.7274072], 
     zoom: 17, 
     style: 'mapbox://styles/mapbox/streets-v9' 
    }); 

    map.on('load', function() { 

    map.addSource('plutodata', { 
    type: 'geojson', 
    url: 'http://url.geojson' 
    }); 
    map.addLayer({ 
    id: 'pluto', 
    type: 'fill', 
    source: 'plutodata', 
    'source-layer': 'plutodata', 
     layout: { 
     visibility: 'visible' 
     }, 
     paint: { 
     'fill-color': 'rgba(61,153,80,0.55)' 
     } 
    }); 
    }); 

マップのロードが、にGeoJSON層は表示されません。私が間違っているアイデアは？

完全なソリューション：以下

tmcwのポストは、この問題を修正するための最初のステップでした。私は.htaccessファイルにCOR対応ヘッダーを追加しました。 2番目のステップは、map.addSourceの下の "url"プロパティが "data"であったはずです。今はすべてが動作します。

Answer 1

Mapbox GL JSがこのサーバーからデータをロードするには、Cross-origin resource sharingとthis URL doesn't support thatを使用する必要があります。他のサーバーがデータを要求できるようにするには、サーバーまたはファイルにenable CORSが必要です。

Answer 2

タイルセットとしてマップボックスにアップロードし、スタイルの1つで新しいレイヤーを作成し、[レイヤーからデータ]タブの下にgeojsonタイルセットを入力することができます。たとえば、新しいレイヤー「mygeojson」を呼び出すと、.jsで呼び出すことができます。たとえば、

map.on('load', function() { map.addLayer({ 'id': 'mygeojson', 'source': 'composite', 'source-layer': 'mygeojson', 'type': 'fill', 'paint': { 'fill-color': '#f00' } }); });