React + mapbox-gl : 팝업을 포함 하시겠습니까?

Question

React에서 mapbox-gl을 사용하고 있는데 mapbox-gl이 정상적으로 작동하는 동안 mapbox-gl의 Popups를 통합하는 방법을 파악하는 데 문제가 있습니다. 나는 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

알아 냈어.