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?

This might help: https://stackoverflow.com/questions/39186001/how-to-close-all-popups — Jo Smo, Aug 27 '16 at 22:31

score 77 · Answer 1 · answered Apr 29 '16 at 14:26

77

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

map.closePopup();

answered Apr 29 '16 at 14:26

Florian Boudot

995
7
9

This closes all popup for you or just one? – Jo Smo Aug 27 '16 at 21:17
1

@JoSmo Just one in my case. – Ziyuan Apr 10 '17 at 15:32
2

I would like to close all popups. ```map.closePopup();``` closes only the last one. See: https://observablehq.com/d/6ce88f5b8e361005 – PBrockmann Nov 28 '19 at 10:58

score 18 · Answer 2 · answered Dec 03 '14 at 15:29

18

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

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

Hope it helps someone in future.

answered Dec 03 '14 at 15:29

sAm

585
2
8
23

I think it's better to check whether the dom object exist first before executing the click(); in case there is no pop up at the time of execution. – Tianhai Mar 18 '15 at 05:33
This is really useful - I have my map set up to allow multiple popups open. When the amount open is greater than 3, I can use this to close the oldest open popup. – Aug 25 '16 at 08:21

sfletche · Answer 3 · 2014-05-13T00:42:20.090

5

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.

edited May 13 '14 at 00:42

answered Apr 24 '14 at 00:56

sfletche

47,248
30
103
119

Mohsen Sichani · Answer 4 · 2022-11-27T17:33:49.213

  map.closePopup();

did not work for me as well and did not close the most recent popup.

So, I used the approach that was mentioned earlier with some modifications. Here is what worked for me.

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);

score 1 · Answer 5 · edited Apr 21 '14 at 15:18

1

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

try this after your map load completes.

edited Apr 21 '14 at 15:18

La-comadreja

5,627
11
36
64

answered Apr 21 '14 at 14:30

Venkatesh Nadar

132
7

score 0 · Answer 6 · answered Sep 22 '20 at 23:37

0

popup.removeFrom(map)

Is what worked for me.

answered Sep 22 '20 at 23:37

Kyle Pennell

5,747
4
52
75

That will not juts close it. It will totally remove it so that it cannot be opened again. That might be what is desired, bu tit might not – Mawg says reinstate Monica Apr 15 '21 at 20:51

score 0 · Answer 7 · answered Oct 06 '22 at 20:45

0

If you haven't created layers for the popups, use:

 map.eachLayer(function (layer) {
      layer.closePopup();
 });

answered Oct 06 '22 at 20:45

JPCM

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 11 '22 at 08:25

score 0 · Answer 8 · answered Feb 18 '23 at 23:03

@florian-boudot's https://stackoverflow.com/a/36940867/2095317 answer is right but there is a cache

If you see the documentation closely, closePopup method works only in 2 cases

It closes the last popup opened using openPopup method
If a popup object is passed as an argument, it closes only that popup

Here is an example

// initiate your popup
let popup = L.popup()
          .setLatLng([lat,lang])
          .setContent("text")

// use the leaflet map object 
map.openPopup(popup);

// close the popup after 5s

// Case 1: closes popup as it was the last popup object opened with map object
setInterval(() => map.closePopup(), 5000);

// Case 2: If you want to be more accurate/specific which popup to close
// and have the popup object in a variable pass the popup object
setInterval(() => map.closePopup(popup), 5000);

Close All Popups with Leaflet.js

8 Answers8