Modifica della posizione popup sull'indicatore Leaflet?

Voglio aprire un popup nella parte inferiore della mia icona marcatore in Leaflet.

il mio codice:

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();

Quindi ottengo un popup in cima al mio marker.

Voglio ottenere un popup in basso come:

Puoi specificare gli offset usando le popupAnchoropzioni, ma non dove ti aspetteresti. Innanzitutto, è necessario specificare un'icona come questa:

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

È quindi possibile utilizzare questa icona nelle opzioni dei marker:

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

Ora il tuo popup si apre 30 px sopra il tuo marker. Questo non è esattamente quello che hai chiesto in quanto devi anche posizionare il piccolo triangolo a forma di freccia in cima al tuo popup, ma penso che valga la pena menzionarlo.

Non esiste una soluzione opuscolo nativa.

Un altro modo è utilizzare https://github.com/erictheise/rrose

Bella demo:

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

So che questa è una vecchia domanda, ma non è necessario prendere la deviazione @Robert descritta nella sua risposta.

Come Popuperedita da DivOverlay, è possibile impostare direttamente l'opzione offset quando si inizializza Popup:

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

Leggi i documenti: https://leafletjs.com/reference-1.5.0.html#popup

Questo sembra essere possibile solo nei CSS. Di seguito sovrascrivo (con !important) solo tre elementi CSS e aggiungo uno :beforepseudo-elemento. In sostanza, per prima cosa sto allineando il popup con la parte superiore anziché inferiore , dove 55px dipende solo dal marker scelto e dal gusto personale.

Sposto quindi la "punta" del popup in modo simile dal basso verso top:0px, e scopro che non è stato realizzato usando il trucco "normale" (ovvero: prima posizione sul bordo della bolla uno pseudo-elemento di dimensioni 0x0 con un bordo trasparente spesso, quindi colora quello bordo opposto dell'elemento rispetto al punto in cui si desidera puntare; nel nostro caso, il bordo inferiore). Invece sembra essere fatto da un rettangolo ruotato da qualche parte in alto a sinistra (forse: perché forza il browser a usare la GPU e quindi accelera tutto?) E non capisco abbastanza bene il punto (scusate il gioco di parole) ( il mio consiglio è nel posto giusto ma invisibile); quindi rimuovo solo l'ombra della scatola che ora è nel posto sbagliato e lascio tutto così com'è --- chiunque capisca il "vecchio consiglio", per favore, aggiusta quello.

Quindi invece faccio il mio suggerimento, con il processo "normale" (se non sei sicuro, cambio i quattro colori del bordo in basso, invece di 3x trasparenti e 1x bianco --- ad es 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;
}

Come dimostra questo JSFiddle , nessun problema con diverse dimensioni di popup (diversa larghezza, diversa altezza del testo) se provi entrambi i marcatori.

Tutto sommato, questo sembra robusto rispetto agli aggiornamenti in Leaflet poiché gli elementi che sto sovrascrivendo non sembrano cambiare.