React + mapbox-gl：ポップアップを含める？

Question

私はReactでmapbox-glを使用していますが、mapbox-glが正常に動作していますが、mapbox-glのPopupをどのように統合するかがわかりません。私はlet Popupの機能を持っていますが、実装方法はわかりません。

renderMap() { 
    if (this.props.bird.location) { 
     let birdLocation = this.props.bird.location; 
     let map = new mapboxgl.Map({ 
      container: 'mapbox-container', 
      style: config.mapbox.style, 
      center: birdLocation, 
      zoom: 13, 
      interactive: false, 
      preserveDrawingBuffer: true 
     }); 
     let popup = new mapboxgl.Popup({ 
      setLngLat: [-96, 37.8], 
      setHTML: '<h1>Hello World!</h1>', 
      addTo: map 
     }); 

     map.on('load', function() { 
      map.addSource("points", { 
       "type": "geojson", 
       "data": { 
        "type": "FeatureCollection", 
        "features": [{ 
         "type": "Feature", 
         "geometry": { 
          "type": "Point", 
          "coordinates": birdLocation 
         }, 
         "properties": { 
          "icon": "dark-map-pin" 
         } 
        }] 
       } 
      }); 

      map.addLayer({ 
       "id": "points", 
       "type": "symbol", 
       "source": "points", 
       "layout": { 
        "icon-image": "{icon}" 
       } 
      }); 
     }); 
    } 
}, 

Answer 1