Open Leaflet Popup at bottom of marker

6
votes

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.

4
javascriptleafletmapbox

4 Answers

4
votes

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.

3
votes

alright so I've been struggling to figure this out myself but I had figured out setting the position to relative will make the popup appear below the marker, 

.leaflet-popup {
    position: relative;
    text-align: center;
}

You might also want to rotate the tip of the popup. 

.leaflet-popup-tip-container {
width: 40px;
height: 20px;
position: relative;
left: 50%;
top: -117px;
margin-left: -20px;
overflow: hidden;
pointer-events: none;
transform: rotate(180deg);
}
2
votes

There is no option for that ...

However, if your purpose is to display visible popups without moving the map, you can have a look at this Leaflet plugin: http://erictheise.github.io/rrose/

It will open the popup south from the marker if the marker is too north ...

1
votes

you can change the anchor, but built-in code determines where the popup is shown based on the visible window of the map.

what you could do is hook into the click of the marker and draw your own popup with custom code...