Open Leaflet Popup at bottom of marker

javascript, leaflet, mapbox

Solution

You have to provide the marker a customized Icon. You can use the same image, but you have to tweak the popupAnchor property to do that. See for reference http://leafletjs.com/reference.html#icon and http://leafletjs.com/examples/custom-icons.html

In your case you'll have to do (considering the default icon is 25 x 41 px, iconAnchor could be 12 x 40)

var yourIcon = L.icon({ popupAnchor: [0,0] });
var marker= L.marker([item.Lat, item.Long],{icon: yourIcon})

And the popup will open exactly at the same place of the position where the icon is anchored.

Problem

I have placed several markers on my map and added popups to them. The following code is executed in a loop and works fine: ``` L.marker([ item.Lat, item.Long ]).bindPopup(item.count + ' projects').addTo(map); ``` The markers are shown and popups open when you click them. However, the popup opens always on the top side of the marker. Is there a way to open in at the bottom (or on any side) of the marker? The popup-options in the Leaflet documentation do not seem to provide an option to do so.

Original source