React-mapbox-gl: How to close a popup

[edap]

Is there any documentation about how to close a popup element?

[alex3165]

You just need to unmount the Popup component, it behave like a normal react component

[MikeKerrBBC]

I have something like this

<Map
          className={styles.mapbox}
          center={[distributionLng, distributionLat]}
          style="mapbox://styles/mapbox/light-v9"
        >
          <Layer
            type="symbol"
            id="marker"
            layout={{ "icon-image": "harbor-15" }}
          >
            <Feature
              coordinates={[-87.622554, 41.882534]}
              onClick={() => {
                showPopup = true;
                console.log("on feature click", showPopup);
              }}
            />
          </Layer>
          <ZoomControl position="bottomLeft" />

          {showPopup &&
            <Popup
              coordinates={[-87.622554, 41.882534]}
              offset={{
                "bottom-left": [12, -38],
                bottom: [0, -38],
                "bottom-right": [-12, -38]
              }}
              anchor="top-left"
              onClick={() => {
                showPopup = false;
                console.log("on Popup click", showPopup);
              }}
            >
              <h1>Popup</h1>
            </Popup>}
       </Map>

I want to be able to toggle the tooltip on each feature.
I feel there should be more documentation on this process...

[MikeKerrBBC]

@alex3165 Do I need to trigger a re-render of the map? I can see my boolean showPopup going from false to true but the Popup never renders.

[Wykks]

You just need to put your boolean into the state of your component, with setState, like you would do with anything else in react, nothing specific to react-mapbox-gl here.

[MikeKerrBBC]

Well, @Wykks this might become unmanageable in the future with a lot of points. Let me stepback... what is the recommended way to make Popups for each of your feature the open up onClick?

in the original MapBox documentation you do something like this inClick

  <Feature
              coordinates={[-87.622554, 41.882534]}
              onClick={() => {
             new Popup()
                  .setLngLat([-87.622554, 41.882534])
                  .setHTML(
                    `<h1>Popup</h1>
                              Hello Friend
                              </Popup>`
                  )
                  .addTo(Map);
              }}
            />

What is the react-mapbox-gl way?

I want to do this basically
https://www.mapbox.com/mapbox-gl-js/example/popup-on-click/

[Wykks]

@MikeKerrBBC something like this https://www.webpackbin.com/bins/-KqwVeENaV7MY4Xy4_vB

[MikeKerrBBC]

Yes, thank you!

[tamycova]

@Wykks @MikeKerrBBC the link is broken :( can you please share the idea again?

[Wykks]

@tamycova You can access the solution here: https://webpackbin-prod.firebaseapp.com/bins/-KqwVeENaV7MY4Xy4_vB