Cathal Coffey Cathal Coffey - 1 year ago 216
CSS Question

Leaflet popup with dynamic content not centered over marker

I am trying to create a leaflet popup with dynamic content, it works but the popup bubble is not aligned with the marker.

Here is a screenshot, its clear that the popup bubble is not centered over the marker.
enter image description here

Here is the code

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

L.tileLayer('https://{s}{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
id: ''

m = L.marker([51.5, -0.09]).addTo(map);
m.bindPopup("<b>Hello world!</b><br />I am a popup<span id='a'></span>", {maxWidth: "none"})


Also here is a minimal jsfiddle example that describes the problem:

How do I fix this?


It looks like leaflet is determining the width of the infobox when it renders it. You're adding text after it's been displayed so leaflet no longer knows its actual size, and thus cannot center it properly.

Try the setPopupContent() method from the documentation in this slightly long-winded example:

m = L.marker([51.5, -0.09]).addTo(map);
m.bindPopup("<b>Hello world!</b><br />I am a popup<span></span>", {maxWidth: "none"})
var a = m.getPopup();
var b = a._content.replace("<span></span>","<span>asdasdasda</span>");