CODEWITHSUNDEEP
javascriptdictionarypopup
Fehler
Fehler

Reputation: 401

Close All Popups with Leaflet.js

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?

Upvotes: 40

Views: 45609

Answers (8)

Manoj H L
Manoj H L

Reputation: 843

@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

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

enter image description here

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

Upvotes: 0

Mohsen Sichani
Mohsen Sichani

Reputation: 1076

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

Upvotes: 4

JPCM
JPCM

Reputation: 1

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

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

Upvotes: 0

Kyle Pennell
Kyle Pennell

Reputation: 6097

popup.removeFrom(map)

Is what worked for me.

Upvotes: 0

Florian Boudot
Florian Boudot

Reputation: 1055

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

map.closePopup();

Upvotes: 80

sAm
sAm

Reputation: 673

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

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

Hope it helps someone in future.

Upvotes: 19

sfletche
sfletche

Reputation: 49714

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.

Upvotes: 5

Venkatesh Nadar
Venkatesh Nadar

Reputation: 142

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

try this after your map load completes.

Upvotes: 1

Related Questions