Search code examples
javascriptmapbox-glmapbox-gl-js

How to close all popups programmatically in mapbox gl?


So, I know that we have Marker.togglePopup() in Mapbox GL API. But can we close all popups programmatically?


Solution

  • Here is an example: https://jsfiddle.net/kmandov/eozdazdr/
    Click the buttons at the top right to open/close the popup.

    Given you have a popup and a marker:

    var popup = new mapboxgl.Popup({offset:[0, -30]})
        .setText('Construction on the Washington Monument began in 1848.');
    
    new mapboxgl.Marker(el, {offset:[-25, -25]})
        .setLngLat(monument)
        .setPopup(popup)
        .addTo(map);
    

    You can close the popup by calling:

    popup.remove();
    

    or you can open it by calling:

    popup.addTo(map);
    

    As you can see in the Marker source, togglePopup uses these two methods internally:

    togglePopup() {
        var popup = this._popup;
    
        if (!popup) return;
        else if (popup.isOpen()) popup.remove();
        else popup.addTo(this._map);
    }