¿Cambiar la posición emergente en el marcador de folleto?

13

Quiero abrir una ventana emergente en la parte inferior del icono de mi marcador en el folleto.

mi código:

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

Entonces aparece una ventana emergente en la parte superior de mi marcador.

Quiero obtener una ventana emergente en la parte inferior como:

ingrese la descripción de la imagen aquí

Gerd
fuente
Echa un vistazo a este Q / A, stackoverflow.com/questions/27144334/…
artwork21
en su enlace no hay solución de trabajo. Tal vez el comentario sea cierto: "lo que podría hacer es enganchar el clic del marcador y dibujar su propia ventana emergente con código personalizado" ¿No hay una forma simple de ventana emergente inferior?
Gerd
1
La situación actual es la misma que en el enlace de comentarios de artwork21, con respecto a su pregunta para la ventana emergente debajo del marcador. Consulte la respuesta de FranceImage ( stackoverflow.com/a/27144900/5108796 ) con el complemento propuesto. Puede usar ese complemento u obtener inspiración de él para crear su propia ventana emergente personalizada.
ghybs
¿No podemos hacerlo en el posicionamiento CSS de la ventana emergente? Debido a que, de forma predeterminada, hace referencia desde la parte inferior, si cambiamos a la parte superior, ¿será correcto [hasta un desplazamiento fijo] independientemente de las fuentes / tamaños de fuente / alturas de línea elegidas y el número de líneas de texto? Probablemente estoy pasando por alto algo.
user3445853

Respuestas:

4

Puede especificar los desplazamientos utilizando las popupAnchoropciones, pero no donde lo esperaría. Primero, debe especificar un icono como este:

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

Luego puede usar este icono en sus opciones de marcador:

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

Ahora su ventana emergente se abre 30 px por encima de su marcador. Esto no es exactamente lo que pediste, ya que también debes colocar el pequeño triángulo de flecha en la parte superior de tu ventana emergente, pero creo que aún vale la pena mencionarlo.

Alex
fuente
El mismo problema que con la respuesta más reciente [29 de agosto de 2019] de @Johannes: este desplazamiento es incorrecto tan rápido como hay una segunda o más líneas de texto en la ventana emergente; o cambios en CSS (tamaño de fuente, fuente, altura de línea, relleno, margen, tamaño emergente, ...). Por lo tanto, la respuesta original "no hay solución nativa" se mantiene.
user3445853
2

Sé que esta es una vieja pregunta, pero no es necesario tomar el desvío @Robert descrito en su respuesta.

Como Popupse hereda de DivOverlay, puede establecer la opción de desplazamiento directamente al inicializar Popup:

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

Lea los documentos: https://leafletjs.com/reference-1.5.0.html#popup

Johannes
fuente
El problema con este enfoque es que tiene números mágicos para el desplazamiento: si el tamaño de fuente o la fuente o incluso la altura de la línea cambian, el desplazamiento es incorrecto. Más problemático, si algunas ventanas emergentes contienen una segunda (o tercera, línea) de texto, ahora tienen una altura de línea completa (o dos, etc.) demasiado alta, y probablemente se superponen completamente al marcador y su vecindario. Probablemente necesite medir la altura del texto dentro de la ventana emergente y cambiar el desplazamiento dinámicamente y moverlo usando JS durante / después del renderizado; o tener CSS muy fijo y calcularlo durante su mapa de folleto antes de agregar el marcador.
user3445853
1

Esto parece ser posible solo en CSS. A continuación, anulo (con !important) solo tres elementos CSS y agrego un :beforepseudo-elemento. Básicamente, primero estoy alineando la ventana emergente con la parte superior en lugar de la inferior , donde 55px solo depende del marcador elegido y el gusto personal.

Luego muevo la "punta" de la ventana emergente de manera similar desde abajo hacia abajo top:0px, y descubro que no está hecha con el truco "normal" (es decir: primero coloca en el borde de la burbuja un pseudo-elemento de tamaño 0x0 con un borde transparente grueso, luego colorea ese borde opuesto del elemento de donde desea apuntar; en nuestro caso, el borde inferior). En cambio, parece estar hecho de un rectángulo girado desde algún lugar en la parte superior izquierda (tal vez: ¿porque obliga al navegador a usar la GPU y, por lo tanto, acelera todo?) Y no entiendo el punto (perdón por el juego de palabras) lo suficientemente bien ( mi punta está en el lugar correcto pero invisible); así que simplemente elimino la sombra de la caja que ahora está en el lugar equivocado y la dejo como está --- cualquiera que entienda el "viejo consejo" por favor, ajústelo.

Entonces, en cambio, hago mi propio consejo, con el proceso "normal" (si no está seguro, cambie los cuatro colores de borde a continuación, en lugar de 3x transparente y 1x blanco --- por ejemplo 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;
}

Como lo demuestra este JSFiddle , no hay problema con diferentes tamaños de ventanas emergentes (ancho diferente, altura de texto diferente) si prueba ambos marcadores.

En general, esto parece robusto frente a las actualizaciones en el folleto, ya que los elementos que estoy anulando no parecen cambiar.

usuario3445853
fuente