Leaflet.js: Open all popup bubbles on page load

Question

I'm trying to work out from the Leaflet.js docs how it would be possible to open more than one popup upon showing the page. For instance, if one had three markers (each representing a building), each one would have their popup opened immediately.

http://leaflet.cloudmade.com/reference.html#popup

cryptically says:

"Use Map#openPopup to open popups while making sure that only one popup is open at one time (recommended for usability), or use Map#addLayer to open as many as you want."

but

http://leaflet.cloudmade.com/reference.html#map-addlayer

gives no hints about how this might be achievable.

Can anyone clarify if this is possible, and give any hints on how to do it?

Answer 1

You must add the popups as Layer. Try with this example code:

var popupLocation1 = new L.LatLng(51.5, -0.09);
var popupLocation2 = new L.LatLng(51.51, -0.08);

var popupContent1 = '<p>Hello world!<br />This is a nice popup.</p>',
popup1 = new L.Popup();

popup1.setLatLng(popupLocation1);
popup1.setContent(popupContent1);

var popupContent2 = '<p>Hello world!<br />This is a nice popup.</p>',
popup2 = new L.Popup();

popup2.setLatLng(popupLocation2);
popup2.setContent(popupContent2);

map.addLayer(popup1).addLayer(popup2);

Answer 2

L.Map = L.Map.extend({
    openPopup: function(popup) {
        // this.closePopup(); 
        this._popup = popup;
        return this.addLayer(popup).fire('popupopen', {
            popup: this._popup
        });
    }
});

example: http://jsfiddle.net/paulovieira/yVLJf/

found it here: https://groups.google.com/forum/#!msg/leaflet-js/qXVBcD3juL4/4pZXHTv1baIJ

Answer 3

marker.addTo(myMap).bindPopup('Hello popup', {autoClose:false}).openPopup();

use autoClose option

Answer 4

triky solution is remove popup link from map object on open:

map.on('popupopen', function (e) {
    delete map._popup;
});

Answer 5

In the latest version, there is an autoClose option.

To have both marker and popup open at same time, without adding layers explicitly :

var popup1 = new L.Popup({'autoClose':false});
popup1.setLatLng([53.55375, 9.96871]);
popup1.setContent('First popup');

var popup2 = new L.Popup({'autoClose':false});
popup2.setLatLng([53.552046, 9.9132]);
popup2.setContent('Second popup');

L.marker([53.55375, 9.96871]).addTo(myMap)
    .bindPopup(popup1).openPopup();

L.marker([53.552046, 9.9132]).addTo(myMap)
    .bindPopup(popup2).openPopup();