Popup on marker doesn't show correctly.

[FavioT]

Before submitting an issue, please verify the following:

If this is a request for help, please use Stack Overflow and use the ngx-leaflet tag, or review the Getting Help section of the README. We watch the ngx-leaflet tag on Stack Overflow and will respond there. We will no longer be responding to help and 'how-to' requests on GitHub.

If this is a bug, issue, enhancement request, etc. verify the following before submitting your issue:

• [X] Review the README to see if your issue is covered, and pay particular attention to the Getting Help section.
• [X] Tell us what version of Leaflet, Angular, and ngx-leaflet you're using
• [X] Include code that reproduces your issue

---

I'm using :

[email protected] @angular/[email protected] @asymmetrik/[email protected]

Hello everyone,

I'm having trouble displaying correctly a marker popup on the map. the popup is shown covering the marker icon, when the correct thing would be for it to be shown above it, as it happens with the original leaflet library.

I tried it on my Angular project and also i have even trying on the source code of the demo of this repository and exactly the same thing happens.

This is the portion of code that i am testing.

Am I doing something wrong?

[reblace]

Try changing:

const newMarker = marker(...).bindPopup(...);
this.markers.push(newMarker);

to

const newMarker = marker(...);
newMarker.bindPopup(...);
this.markers.push(newMarker);

I would assume what's happening is you're adding the popup to the markers array instead of adding the marker since bindPopup(...) probably returns the popup and not the marker.

[FavioT]

Thanks @reblace for your quickly response, i have changed that portion of code, but it's still happens the same, i am testing this issue directly on the demo of this repo.

here is the code.

addMarker() {
		const newMarker = marker(
			[ 46.879966 + 0.1 * (Math.random() - 0.5), -121.726909 + 0.1 * (Math.random() - 0.5) ],
			{
				icon: icon({
					iconSize: [ 25, 41 ],
					iconAnchor: [ 13, 41 ],
					iconUrl: '2b3e1faf89f94a4835397e7a43b4f77d.png',
					iconRetinaUrl: '680f69f3c2e6b90c1812a813edf67fd7.png',
					shadowUrl: 'a0c6cc1401c107b501efee6477816891.png'
				})
			}
		);

		newMarker.bindPopup("<p>This is my marker!<p>");

		this.markers.push(newMarker);
	}

[loremaps]

Hi @FavioT

Can you please try to add this to the icon:

icon: icon({
   ...
   popupAnchor: [1, -34]
})

I think this is because you use a custom icon. Please check the tutorial here: https://leafletjs.com/examples/custom-icons/

[FavioT]

It works! @loremaps, thank you!

I've been struggling with this for days.