Mapbox-gl-js: Programatically close popup

[diegomura]

Is there any way of programatically close a popup?
I couldn't find any way of doing this on the documentation.

[mollymerp]

Yes, you can use Popup#remove

[diegomura]

But that would actually remove completely the popup of the map isn't it?
If I want to open it again I should call addTo(map) again?

[mollymerp]

@diegomura you're correct, we don't have a method for hiding popups with css (ex visibility:none) . the pattern of using Popup#addTo(map) and Popup#remove() is what I would suggest!

[diegomura]

Great @mollymerp. Thanks for your help!

[whatAboutJohn]

What if you don't have access to the popup created, say it was created through an evented click using map.fire('click'), is there an alternative way of closing the popup?

[chriszrc]

remove works to totally remove the popup, just like add works to add the popups, but to trigger a popup, you have to setup something to "open" the popup, and the equivalent call would be a "close" method. You can "close" the popup without removing the functionality entirely by clicking the popup "x" button, seems like we should be able to do this programmatically. And it looks like we can, except the method is marked as private:

https://github.com/mapbox/mapbox-gl-js/blob/3bc06915821f2a6e380fbb1715f05b504e62fa71/src/ui/popup.js#L323-L325

Even so, it's not technically hidden, so you can do:

let popup = new mapboxgl.Popup();
....
popup._onClickClose()

[ryanhamley]

@chriszrc you can also just call the public method popup.remove() directly. we can't really think of a compelling case to essentially duplicate the remove functionality with a close method so this is the way that we recommend "closing" popups. if anyone has a good use case for a separate close method (say remove is somehow not performant enough), let us know.