Changer la position du popup sur le marqueur Leaflet?

Je veux ouvrir une fenêtre contextuelle au bas de mon icône de marqueur dans Leaflet.

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

Je reçois donc une fenêtre contextuelle au-dessus de mon marqueur.

Je veux obtenir un popup en bas comme:

Vous pouvez spécifier les décalages à l'aide des popupAnchoroptions, mais pas là où vous vous y attendez. Tout d'abord, vous devez spécifier une icône comme celle-ci:

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

Vous pouvez ensuite utiliser cette icône dans vos options de marqueur:

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

Votre popup s'ouvre maintenant à 30 px au-dessus de votre marqueur. Ce n'est pas exactement ce que vous avez demandé car vous devez également placer le petit triangle fléché sur le dessus de votre fenêtre contextuelle, mais je pense que cela vaut la peine d'être mentionné.

Il n'y a pas de solution de foliole native.

Une autre façon consiste à utiliser https://github.com/erictheise/rrose

Belle démo:

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

Je sais que c'est une vieille question, mais vous n'avez pas besoin de faire le détour @Robert décrit dans sa réponse.

Comme Popuphérité de DivOverlay, vous pouvez définir l'option de décalage directement lors de l'initialisation de Popup:

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

Lisez les documents: https://leafletjs.com/reference-1.5.0.html#popup

Cela semble possible uniquement en CSS. Ci-dessous, je remplace (avec !important) seulement trois éléments CSS et j'ajoute un :beforepseudo-élément. Je suis essentiellement en train d'aligner la fenêtre contextuelle avec le haut au lieu du bas , où cela 55px dépend simplement de votre marqueur choisi et de vos goûts personnels.

Je déplace ensuite la "pointe" de la fenêtre contextuelle de bas en haut top:0pxet découvre qu'elle n'est pas faite à l'aide de l'astuce "normale" (c'est-à-dire: positionnez d'abord sur le bord de la bulle un pseudo-élément de taille 0x0 avec une bordure transparente épaisse, puis colorez cette couleur frontière opposée de l'élément de l'endroit où vous voulez pointer; dans notre cas, la bordure inférieure). Au lieu de cela, il semble être fait à partir d'un rectangle tourné à partir de quelque part en haut à gauche (peut-être: parce qu'il force le navigateur à utiliser le GPU et accélère donc tout?) Et je ne comprends pas assez bien le point (pardonnez le jeu de mots) ( ma pointe est au bon endroit mais invisible); donc je supprime juste l'ombre de la boîte qui est maintenant au mauvais endroit et laisse le tout tel quel --- quiconque comprend la "vieille astuce" s'il vous plaît ajustez cela.

Donc, au lieu de cela, je fais ma propre astuce, avec le processus "normal" (si vous n'êtes pas sûr, changez les quatre couleurs de bordure ci-dessous, au lieu de 3x transparent et 1x blanc --- par exemple 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;
}

Comme le démontre ce JSFiddle , aucun problème avec différentes tailles de popup (largeur différente, hauteur de texte différente) si vous essayez les deux marqueurs.

Dans l'ensemble, cela semble robuste contre les mises à jour dans Leaflet car les éléments que je remplace ne semblent pas susceptibles de changer.