Open popup at the bottom of the marker
I have placed some markers on my map and added pop-ups to them. The following code runs in a loop and works fine:
L.marker([
item.Lat,
item.Long
]).bindPopup(item.count + ' projects').addTo(map);
Markers show up and pop up when you click on them. However, the popup always opens on the top of the marker. Is there a way to open the bottom (or either side) of the marker? The popup-options in Leaflet documentation doesn't seem to provide an option to do this.
source to share
You must specify a marker for an individual icon. You can use the same image, but you need to set up the popupAnchor property for that. See link http://leafletjs.com/reference.html#icon and http://leafletjs.com/examples/custom-icons.html
In your case, you'll have to do (given that the default icon is 25 x 41 px, the Anchor icon 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 in the same place where the icon is docked.
source to share
There is no way for this ...
However, if your goal 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 a popup south of the marker if the marker is too north ...
source to share
ok so i have been struggling to figure it out myself, but i figured out setting position relative will cause the popup to appear below the marker, .leaflet-popup { position: relative; text-align: center; }
.leaflet-popup { position: relative; text-align: center; }
You can also rotate 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);
}
source to share