Close All Popups with Leaflet.js

Question

I'm working on a map using Leaflet.js that uses a number of markers (eventually there will be ~40 markers). Each marker has a related popup with details. The default behaviour of Leaflet.js seems to be to automatically open at least one marker's popup (the last listed marker, I believe).

I'd like all the popups to be closed on the initial loading of the map page so users have to click the markers to open the popups. Does anyone know how to do this? I have a prototype here:

http://dev.monographic.org/maps/prototype-10.html

Thank you.

Answer 1

There is a clean method from your map object to close all open popups

map.closePopup();

Answer 2

I managed to solve my problem by this piece of code:

$(".leaflet-popup-close-button")[0].click();

Hope it helps someone in future.

Answer 3

Just remove your calls to .openPopup().

Instead of

L.marker([57.70887, 11.97456]).addTo(map).bindPopup("<b>Ideal Festival</b><br />2004").openPopup();

Use

L.marker([57.70887, 11.97456]).addTo(map).bindPopup("<b>Ideal Festival</b><br />2004");

The click behavior will still be there (when users click on those markers, the popups will still appear), but the popups won't be visible when the page loads.

Answer 4

$(".leaflet-popup-close-button").click()

try this after your map load completes.

Answer 5

  map.closePopup(); 

did not work for me as and closed the most recent popup not all.

Generalization of what user2304819 suggested:

  var ButtonremoveNotidfications = L.easyButton({
                id: 'ButtonremoveNotidfications',
                states: [{
                    stateName: 'Show',
                    icon: '<strong>Clear notifications</strong>',
                    title: 'Show',
                    onClick: function (btn) { //Below is the closing module
                        var aa = $(".leaflet-popup-close-button").length
                        if (aa > 0) {
                            for (var i = 0; i < aa; i++) {
                                $(".leaflet-popup-close-button")[i].click();
                            }
                        }
                    }
                }]
            });
            ButtonremoveNotidfications.button.style.width = widthbuttonstyle;
            ButtonremoveNotidfications.button.style.height = heightbuttonstyle;
            ButtonremoveNotidfications.button.style.color = 'blue';
            ButtonremoveNotidfications.addTo(map);

Answer 6

popup.removeFrom(map)

Is what worked for me.