Leaflet: modifica popup alla dimensione dell'immagine

Question

Sto tentando di includere le immagini nei miei popup, ma la dimensione popup non si adatta alle dimensioni dell'immagine. Ho trovato una soluzione a questo su github:

https://github.com/Leaflet/Leaflet/issues/724

Mentre questa soluzione risolve le dimensioni del popup, il risultato è spostato e il pop-up non si presenta centrato sopra l'icona/indicatore ... Qualsiasi modo di cambiarlo?

.leaflet-popup-content { 
    width:auto !important; 
} 

Anche l'altra soluzione proposta (impostando il maxwidth sul pop-up) non aiuta nel mio caso. La larghezza pop-up continua ad essere la larghezza predefinita di 300px ...

function pop_Fotos(feature, layer) { 
    var popupContent = '<img style="max-height:500px;max-width:500px;" src="..."); 
    layer.bindPopup(popupContent, {maxWidth: 500, closeOnClick: true}); 
} 

Answer 1

Semplicemente specificando maxWidth: "auto" opzione sul popup sembra abbastanza ...

layer.bindPopup(popupContent, { 
    maxWidth: "auto" 
}); 

Demo: http://jsfiddle.net/3v7hd2vx/29/

---

ED IT

Purtroppo, se l'immagine non è ancora caricato nella cache del browser, il pop-up si aprirà subito con dimensioni predefinite, e regolarne le dimensioni ma non la sua posizione una volta che l'immagine è a pieno carico e visualizzati. Di conseguenza, il popup viene spostato e la sua freccia è posizionata male rispetto al marker a cui è associata.

Una soluzione semplice è quella di ascoltare l'evento immagine "load" e di ri-aprire il pop-up in quel momento:

popupContent = document.createElement("img"); 
popupContent.onload = function() { 
    layer.openPopup(); 
}; 
popupContent.src = "path/to/image"; 
layer.bindPopup(popupContent, { 
    maxWidth: "auto" 
}); 

demo Aggiornato: http://jsfiddle.net/3v7hd2vx/32/

---

EDIT 2

Ecco una soluzione più generale: acquisire lodi evento su tutti i popup di Leaflet e li forza a update() ogni volta.

document.querySelector(".leaflet-popup-pane").addEventListener("load", function (event) { 
    var tagName = event.target.tagName, 
     popup = map._popup; // Currently open popup, if any. 

    if (tagName === "IMG" && popup) { 
    popup.update(); 
    } 
}, true); // Capture the load event, because it does not bubble. 

Demo: https://jsfiddle.net/3v7hd2vx/277/

Riferimento: Leaflet issue #5484 (comment)

Answer 2

• C'è una funzione di aggiornamento per i popup (che il doc dice è proprio per questo scopo): http://leafletjs.com/reference.html#popup-update.

• Inoltre, un evento per quando viene aperto un popup: http://leafletjs.com/reference.html#path-popupopen.

• e l'evento passato al gestore di eventi identifica il popup: http://leafletjs.com/reference.html#popup-event-popup

mio pop-up contenuto era un po 'più vario di una semplice immagine, ma la larghezza è stata, ovviamente, ancora condizionato da qualsiasi tempo di caricamento per le immagini nel contenuto (ed era ok una volta che l'immagine era nella cache del browser).

Così, quando mi ha colpito di questo problema, in sintesi quello che ho fatto utilizzando jQuery:

function addpopup(mymarker, mycontent) { 
    var myid = "thismarker"; // or whatever 
    mymarker.bindPopup("<div id='"+myid+"'>" + mycontent + "</div>", 
     {maxWidth: "auto"}); 
    mymap.on("popupopen", function(e){ 
     $("#"+myid+" img").one("load", function(){ e.popup.update(); }); 
    }); 
}