16

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?

fooquency
  • 1,575
  • 3
  • 16
  • 29

6 Answers6

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

use autoClose option

thinhnk
  • 351
  • 3
  • 12
12

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);
aborruso
  • 4,938
  • 3
  • 23
  • 40
  • Excellent - I really appreciate this example. Am I right in thinking there is no way to have both the icons and the popups there? – fooquency Jan 29 '12 at 23:09
  • Hi fooquency, I do not know. Try to post in the new official leaflet groups: https://groups.google.com/forum/#!forum/leaflet-js – aborruso Jan 31 '12 at 20:32
  • The answer below using Class extension is a much better approach and should be the accepted answer – masterchief May 19 '14 at 21:06
  • @masterchief I disagree, as of now the below extension breaks the togglePopup method due to the change in openPopup implementation. – Ethereal May 30 '14 at 17:11
  • Works great, however I had to change ```L.Popup``` with ```L.popup```. – raratiru May 13 '16 at 22:26
11
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

gies0r
  • 4,723
  • 4
  • 39
  • 50
  • Can you explain what will this snippet of code achieve? It's appreciated if you can explain it. – Ahmad Alfy May 23 '13 at 07:42
  • 1
    i edited my answer. From the creator: "You can "L.Class.Extend" the default L.Map class, defining a new openPopup method. This new method will be a simple copy-paste of the default one, except for the part where the current popup is closed (just comment that line)." – gies0r May 23 '13 at 08:49
  • Again - Thanks for this I am new to Javascript and this has opened up a new avenue of investigation/leaning – Caribou Aug 08 '16 at 09:08
0

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();
Nice Books
  • 1,675
  • 2
  • 17
  • 21
0

This solution work for me:

L.marker([30.4160534, -87.2226216], {icon: icon_url}).bindPopup('Hello World',{autoClose:false}).addTo(map).openPopup();

here is the preview image: https://prnt.sc/NuX9Qs291IQq

Ibrahim
  • 1
  • 3
-1

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

map.on('popupopen', function (e) {
    delete map._popup;
});
IvanM
  • 2,913
  • 2
  • 30
  • 30