Changing popup position on Leaflet marker?

Question

I want open a popup on bottom of my marker icon in Leaflet.

my code:

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

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(mymap);

var lati = 51.51;
var longi = -0.09;

var popupLocation1 = new L.LatLng(lati, longi);
var popupContent1 = 'This is a nice popup';

popup1 = new L.Popup();
popup1.setLatLng(popupLocation1);
popup1.setContent(popupContent1);

var m1 = L.marker([ lati, longi ]).addTo(mymap);

m1.bindPopup(popup1);

m1.openPopup();

So I get a popup on top of my marker.

I want get a popup on bottom like:

Answer 1

You can specify the offsets by using the popupAnchor options, but not where you would expect it. First, you need to specify an icon like this:

var myIcon = L.divIcon({ popupAnchor: [0, -30] });

You can then use this icon in your marker options:

var marker = L.marker(location, {
                 icon: myIcon
             }).bindPopup(function (marker) {...}); //Shortened

Now your popup opens up 30 px above your marker. This is not exactly what you asked for as you also need to place the little arrowish triangle on the top of your popup, but I think it's still worth mentioning.

Answer 2

I know that this is an old question, but you do not need to take the detour @Robert described in his reply.

As Popup is inheriting from DivOverlay, you can set the offset option directly when initializing the Popup:

    var popup = L.popup({
        offset: [0, -30]
    })
      .setLatLng(location)
      .setContent("Test Text")
      .openOn(mapId);

Read the docs: https://leafletjs.com/reference-1.5.0.html#popup

Answer 3

There is no native leaflet solution.

One other way is use https://github.com/erictheise/rrose

Nice Demo:

http://jsfiddle.net/asleepwalker/6m81vtad/

Answer 4

This seems to be possible just in CSS. Below I'm overriding (with !important) just three CSS elements, and adding one :before pseudo-element. I'm essentially first lining up the popup with the top instead of bottom, where 55px just depends on your chosen marker, and personal taste.

I then move the popup's "tip" similarly from bottom to top:0px, and discover it's not made using the "normal" trick (that is: first position on the bubble's edge a 0x0-sized pseudo-element with a thick transparent border, then colour that element's opposite border of where you want to point; in our case, the bottom-border). Instead it seems to be made from a rectangle rotated in from somewhere top-left (maybe: because it forces the browser to use the GPU and hence accelerates everything?) and I don't get the point (pardon the pun) well enough (my tip is in the right place but invisible); so I just remove the box-shadow that's now in the wrong place and leave it all as-is --- anyone who understands the "old tip" please adjust that.

So instead I make my own tip, with the "normal" process (if you're unsure, change the four border colours below, instead of 3x transparent and 1x white --- e.g. border-bottom-color: blue; border-left-color: green; border-top-color: yellow' border-right-color: red).

#map {
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   z-index: 0;
}
.leaflet-popup {top: 55px !important;}
/* Here I move the "tip" to the right location, but didn't succeed in making it visible. So I just remove the box-shadow and leave it: */
.leaflet-popup-tip-container {
   top: 0px !important;
}
.leaflet-popup-tip {
   box-shadow: none !important;
}
.leaflet-popup:before 
    {
    content: "";
    position: absolute;
    border: 13px solid transparent;
    border-bottom-color: white;
    bottom: 0px;
    margin-left: -13px;
}

As this JSFiddle demonstrates, no problem with different popup-sizes (different width, different textheight) if you try both markers.

All in all this seems robust against updates in Leaflet as the items I'm overriding don't seem likely to change.