leafletjs marker bindpopup() with options

Question

The leaflet documention shows you can add a popup to a marker with

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

or create a standalone popup with

var popup = L.popup()
    .setLatLng([51.5, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(map);

Is there no way to set popup options and bind it to a marker? I want to be able to set my own maxwidth for popups and have them open/close when you click a marker.

score 18 · Accepted Answer · answered May 27 '14 at 02:32

18

Are you sure that you're reading the Leaflet reference documentation? It specifies that you can bind a popup with options by creating it and calling .bindPopup with it. For instance,

var popup = L.popup()
    .setContent("I am a standalone popup.");

marker.bindPopup(popup).openPopup();

answered May 27 '14 at 02:32

tmcw

11,536
3
36
45

1

Ok, then that means, that you always have to create the popup first and then bind it to the marker. :-( – erik Sep 06 '15 at 18:34
6

Well, this one-liner is possible: `var mark1=L.marker([51.5, -0.09]).bindPopup(L.popup({maxWidth:500}).setContent("I am a standalone popup.")).addTo(map);` – erik Sep 11 '15 at 15:18
2

And to set a fixed width for your popups, add to your styles: `.leaflet-popup-content { width:500px; }` – erik Sep 11 '15 at 16:07

score 10 · Answer 2 · edited Mar 24 '19 at 17:34

10

You can pass an object of popup options as the second argument of bindPopup, like this:

marker.bindPopup("<strong>Hello world!</strong><br />I am a popup.", {maxWidth: 500});

I've tested this in Leaflet 1.4, and it also seems be available in earlier versions of bindPopup.

edited Mar 24 '19 at 17:34

marc_s

732,580
175
1,330
1,459

answered Mar 09 '19 at 11:28

Richard Garside

87,839
11
80
93

1

I'd say this is what the OP (and I) was looking for. – betakilo Dec 27 '20 at 19:35
1

bravo Richard, great find – alex351 Jun 08 '21 at 22:44

score 6 · Answer 3 · answered May 27 '14 at 09:26

6

For maxWidth you should do this:

var popup = L.popup({
    maxWidth:400
});
marker.bindPopup(popup).openPopup();

answered May 27 '14 at 09:26

Marko Letic

2,460
2
28
34

leafletjs marker bindpopup() with options

3 Answers3