Mudando a posição do pop-up no marcador de folheto?

12

Quero abrir um pop-up na parte inferior do ícone do meu marcador no Leaflet.

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

Então, eu recebo um pop-up em cima do meu marcador.

Quero obter um pop-up na parte inferior como:

insira a descrição da imagem aqui

Gerd
fonte
Confira este Q / A, stackoverflow.com/questions/27144334/...
artwork21
no seu link não há solução. Talvez o comentário seja verdadeiro: "o que você poderia fazer é conectar-se ao clique do marcador e desenhar seu próprio pop-up com código personalizado" Não existe uma maneira simples para pop-up inferior?
Gerd
1
A situação atual é a mesma do link de comentário do artwork21, referente à sua pergunta para pop-up abaixo do marcador. Consulte a resposta da FranceImage ( stackoverflow.com/a/27144900/5108796 ) com o plug-in proposto. Você pode usar esse plugin ou obter inspiração para criar seu próprio pop-up personalizado.
Ghybs # 18/16
Não podemos fazer isso no posicionamento CSS do próprio pop-up? Como, por padrão, está referenciando de baixo para cima, se mudarmos para o topo, estará correto [até um deslocamento fixo] independentemente das fontes / tamanho da fonte / altura da linha escolhida e número de linhas de texto? Provavelmente estou ignorando alguma coisa.
user3445853

Respostas:

2

Você pode especificar as compensações usando as popupAnchoropções, mas não onde você esperaria. Primeiro, você precisa especificar um ícone como este:

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

Você pode usar este ícone nas opções do seu marcador:

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

Agora seu pop-up abre 30 px acima do seu marcador. Isso não é exatamente o que você pediu, pois também precisa colocar o pequeno triângulo de flecha no topo do seu pop-up, mas acho que ainda vale a pena mencionar.

Robert
fonte
O mesmo problema da resposta mais recente [29 de agosto de 2019] de @Johannes: Esse deslocamento está errado tão rápido quanto há uma segunda ou mais linha de texto no pop-up; ou alterações no CSS (tamanho da fonte, fonte, altura da linha, preenchimento, margem, tamanho do pop-up, ...). Portanto, a resposta original "não existe solução nativa" permanece.
user3445853
2

Sei que essa é uma pergunta antiga, mas você não precisa fazer o desvio @Robert descrito em sua resposta.

Como Popupestá herdando DivOverlay, você pode definir a opção de deslocamento diretamente ao inicializar o Popup:

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

Leia os documentos: https://leafletjs.com/reference-1.5.0.html#popup

Johannes
fonte
O problema dessa abordagem é que você tem números mágicos para o deslocamento: se o tamanho da fonte ou a fonte ou mesmo a altura da linha mudar, o deslocamento será ruim. O que é mais problemático: se alguns pop-ups contiverem uma segunda (ou terceira, etc) linha de texto, agora terão uma altura total (ou duas, etc.) muito alta e provavelmente sobreporão completamente o marcador e sua vizinhança. Você provavelmente precisará medir a altura do texto dentro do pop-up, alterar o deslocamento dinamicamente e movê-lo usando JS durante / após a renderização; ou tenha um CSS muito fixo e calcule-o durante o mapa do folheto antes de adicionar o marcador.
user3445853
1

Isso parece ser possível apenas em CSS. Abaixo, estou substituindo (com !important) apenas três elementos CSS e adicionando um :beforepseudo-elemento. Estou essencialmente alinhando o pop-up com a parte superior em vez da inferior , onde 55px depende apenas do marcador escolhido e do gosto pessoal.

Em seguida, movo a "dica" do pop-up da mesma forma de baixo para baixo top:0pxe descobri que ela não foi criada usando o truque "normal" (ou seja: primeira posição na borda da bolha, um pseudoelemento do tamanho 0x0 com uma borda transparente grossa e depois pintei borda oposta do elemento de onde você deseja apontar; no nosso caso, a borda inferior). Em vez disso, parece ser feito de um retângulo girado de algum lugar no canto superior esquerdo (talvez: porque força o navegador a usar a GPU e, portanto, acelera tudo?) E eu não entendi bem (desculpe o trocadilho) o suficiente ( minha dica está no lugar certo, mas invisível); então apenas removo a sombra da caixa que está no lugar errado e deixo tudo como está - quem entende a "dica antiga", ajuste-a.

Então, em vez disso, faço minha própria dica, com o processo "normal" (se não tiver certeza, altere as quatro cores da borda abaixo, em vez de 3x transparente e 1x branco --- por exemplo 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 este JSFiddle demonstra, não há problema com tamanhos de pop-up diferentes (largura diferente, altura de texto diferente) se você tentar os dois marcadores.

Tudo isso parece robusto em relação às atualizações no Leaflet, pois os itens que estou substituindo provavelmente não mudam.

user3445853
fonte