Javascript – Leaflet maps: How to stop all the popups from closing when one is opened

gisjavascriptjqueryleaflet

Ok, so I have a huge mapping project using leaflet and I've got the following overrides:

//set defaults for popups
L.Popup.options = {
    autoClose: false,
    closeButon: false
     };

According to the documentation, this should prevent the popups from closing when I open one. Why are all the popups still closing when I click the map?

Best Answer

I am not sure how you tested this, but if you created a single instance of a Popup and then added the same one on your map then it only changed the position of it, not creating a new one on the map. You will need to create 3 different popups for 3 different markers in order to keep them opened.

Here is the example of the code that does what you want (leaflet version 1.0.0-rc3):

var map = new L.Map('map').setView([51.505, -0.09], 13);

var newpopup = L.popup({
  closeOnClick: false,
  autoClose: false
}).setContent("popup 1");
var newpopup2 = L.popup({
  closeOnClick: false,
  autoClose: false
}).setContent("popup2");
var newpopup3 = L.popup({
  closeOnClick: false,
  autoClose: false
}).setContent("popup3");

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18
}).addTo(map);

L.marker([51.49, -0.09]).addTo(map).bindPopup(newpopup);

L.marker([51.51, -0.091]).addTo(map).bindPopup(newpopup2);

L.marker([51.51, -0.12]).addTo(map).bindPopup(newpopup3);

And a jsFiddle that demonstrates this:

enter image description here

Related Topic