Mapbox GL JSのマーカーを選択してスタイルを設定する適切な方法は何ですか？

Question

ポイントを持つMapboxマップを使って作業しています。私はマーカー記号を追加する正しい手順を知りたいです。ここに私にGeoJSONは次のとおりです。

"type": "FeatureCollection", 
    "features": [ 
    { 
     "type": "Feature", 
     "geometry": { 
     "type": "Point", 
     "coordinates": [ 
      -89.12312324, 
      13.686886 
     ] 
     }, 
     "properties": { 
     "title": "Random Location", 
     "description": "Individual" 
     } 
    } 
] 

ここMapboxのドキュメントからの例です：

map.addLayer({ 
     "id": "airport", 
     "source": "airports", 
     "source-layer": "ne_10m_airports", 
     "type": "symbol", 
     "layout": { 
      "icon-image": "airport-15", 
      "icon-padding": 0 
     }, 
     "filter": ["in", "abbrev", ""] 
    }); 

私はこの

"layout": { 
       "icon-image": "marker-11", 
       "icon-allow-overlap": true, 
      } 

を使用すると、私は少し茶色のドットの代わりに、古典的なマーカーを取得します。

mapboxgl.accessToken = 'pk.mylongAkey'; 

    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: 6 // 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": "map", 
      "type": "symbol", 
      "source": "location", 
      "source-layer": 'location', 
      "layout": { 
       "icon-image": "marker-11", 
       "icon-allow-overlap": true, 
      } 
     }); 
    }); 

    map.on('click', function (e) { 
     var features = map.queryRenderedFeatures(e.point, { layers: ['map'] }); 

     if (!features.length) { 
      return; 
     } 

     var feature = features[0]; 

     // Populate the popup and set its coordinates 
     // based on the feature found. 
     var popup = new mapboxgl.Popup() 
      .setLngLat(feature.geometry.coordinates) 
      .setHTML(feature.properties.title) 
     .addTo(map); 
    }); 

    // Use the same approach as above to indicate that the symbols are clickable 
    // by changing the cursor style to 'pointer'. 
    map.on('mousemove', function (e) { 
     var features = map.queryRenderedFeatures(e.point, { layers: ['map'] }); 
     map.getCanvas().style.cursor = (features.length) ? 'pointer' : ''; 
    }); 

私は何かが足りない？私は

<script src='https://api.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.js'></script> 
<link href='https://api.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.css' rel='stylesheet' /> 

を使用していると私は私の全体のスクリプトは次のようになります

style: 'mapbox://styles/mapbox/outdoors-v9', //stylesheet location 

を使用しています また、ポップアップはポイントの上にポップアップしないので、アイコンの上にポップアップします。この小さな茶色の点ではわかりませんが、ロケットではポップアップがロケットの中央にあります。ありがとう！ここで

は、私はポイントを持っているMapboxマップで働いているスクリーンショット

Answer 1

です。私はマーカー記号を追加する正しい手順を知りたいです。 ...

またはこのようなレイアウトを使用することをお勧めし：それは同じようにGeoJSONでそれを行う方が良いです

...

にGeoJSONでスタイル情報を埋め込みます（前者）はsimplestyleという仕様であり、GL JSではサポートされていません。レイアウトの使用（後者）は、GL JSのフィーチャをスタイルする唯一の方法です。

---

私の代わりに、古典的なマーカーの少し茶色のドットを取得します。

このスクリーンショットを提供してください。

Answer 2

マップボックススタジオエディタでは、実際にアイコンライブラリに "marker-11"というアイコンがあることを確認する必要があります。そうでない場合は、参照しているものがわからず、デフォルトのドットになります。

それ以外の場合は、他のすべてが正常に表示されます。