Mapbox GL - 複雑なポップアップの一般的なスタイルを設定する方法

Question

マップボックスGLマップには多数のマーカーがあります。ホバーでは、複雑なポップアップが表示されるはずです。私の問題は - 私はこの複雑なコードを各マーカーの説明にコピーしたくない。理想的には、「レイアウト」セクションでスタイルを設定し、パラメータのみを呼び出したいと思います。私は既にこの方法をアイコンマーカーと共に使用しています。問題はそれは私はレイアウトセクションのパラメータの名前はポップアップのテキストに影響を与える - 誰かが私を助けることができるか分からないのですか？より良く理解するために、私は私のコードの一部を添付 - パラメータの使用法は、レイアウトセクション

map.addLayer({ 
       "id": "places", 
       "type": "symbol", 
       "source": { 
        "type": "geojson", 
        "data": { 
         "type": "FeatureCollection", 
         "features": [{ 
          "type": "Feature", 
          "properties": { 
           "description": "<div class=\"mapbox_popisok\"><div class=\"trek_caption_header\"><strong><em>From Omalo to the Diklo fortress</em><br><br>Duration: </strong>4 hours<br><strong>Difficulty: </strong>Easy<br>blabla</div><div class=\"mapbox_wrapper\"></div><img class=\"obraztek\" src=\"OmaloDiklo_pr.jpg \" /></div>", 
           "icon": "yellow" 
          }, 
          "geometry": { 
           "type": "Point", 
           "coordinates": [45.702117, 42.395926] 
          } 
         }, { 
          "type": "Feature", 
          "properties": { 
           "description": "<div class=\"mapbox_popisok\"><div class=\"trek_caption_header\"><strong><em>From Omalo to the Diklo fortress</em><br><br>Duration: </strong>4 hours<br><strong>Difficulty: </strong>Easy<br>blabla</div><div class=\"mapbox_wrapper\"></div><img class=\"obraztek\" src=\"OmaloDiklo_pr.jpg \" /></div>", 
           "icon": "yellow" 
          }, 
          "geometry": { 
           "type": "Point", 
           "coordinates": [45.634342, 42.36961] 
          } 
         }] 
        } 
       }, 
       "layout": { 
        "icon-image": "marker-{icon}", 
        "icon-allow-overlap": true, 
        "icon-size": 0.3, 
        "icon-offset": [0, -8],       
       } 

Answer 1

解決済み。レイアウトには特別なプロパティはありませんでしたが、手動で文字列を生成してSetHtml関数に渡すことは可能でした。このようなもの...

map.on('mousemove', function (e) { 
     var features = map.queryRenderedFeatures(e.point, { layers: ['places'] }); 
     // Change the cursor style as a UI indicator. 
     map.getCanvas().style.cursor = (features.length) ? 'pointer' : ''; 

     if (!features.length) { 
      popup.remove(); 
      return; 
     } 

     var feature = features[0]; 
     var popupHtml = '<div class=\"mapbox_popisok\"><div class=\"trek_caption_header\"><strong><em>' + feature.properties.trekname + '</em><br><br>Duration: </strong>' + feature.properties.duration + '<br><strong>Difficulty: </strong>' + feature.properties.difficulty + '<br>' + feature.properties.description + '</div><div class=\"mapbox_wrapper\"></div><img class=\"obraztek\" src=\"../../Images/Thumbnails/Treks/nahlad/' + feature.properties.imagepath + ' \" /></div>'; 
     // Populate the popup and set its coordinates 
     // based on the feature found. 
     popup.setLngLat(feature.geometry.coordinates) 
      .setHTML(popupHtml) 
      .addTo(map);    
    }) 

Answer 2

のアイコンイメージのために見ることができますがtext-fieldを探しています。 Hereは、使用中のtext-fieldの例です。