Come posso personalizzare l'aspetto del popup?

Question

Sto cercando di personalizzare una mappa creata usando il volantino e vorrei personalizzare il Popup (L.popup).

L'unico metodo che posso pensare è quello di costruire uno strato di pop-up personalizzato con il mio nuovo dialogo e riposizionare questo ogni volta che l'utente interagisce con un pennarello, in questo modo il popup rimane allineato quando l'utente trascina la mappa.

Qualcuno è a conoscenza di alternative o modi esistenti per farlo?

Grazie

Answer 1

È necessario personalizzare l'aspetto grafico utilizzando css. I seguenti selettori sono probabilmente interessante:

.leaflet-popup-content-wrapper { 
} 

.leaflet-popup-content-wrapper .leaflet-popup-content { 
} 

.leaflet-popup-tip-container { 
} 

A seconda del browser, è possibile utilizzare strumenti come Firebug per Firefox o la costruzione di strumenti di sviluppo di Chrome/Safari (tasto destro del mouse in qualsiasi punto della pagina e cliccare Inspect elemento, o utilizzare shortcuts), per ispezionare il popup e trovare ulteriori selettori di CSS che è possibile modificare.

Per estendere la sua funzionalità, è necessario iniziare guardando lo popup source code. Guarda le fonti di altri componenti di Leaflet finché non hai un'idea di cosa sta succedendo. Estendere la classe Popup nel modo seguente, e quindi modificare quello che vuoi:

L.CustomPopup = L.Popup.extend({ 
    // You changes here 
}); 

Answer 2

C'è un esempio sopra a mapbox che utilizza leaflet.js. L'esempio mostra come usare custom tooltip in leaflet.

<style> 
/* 
* These CSS rules affect the tooltips within maps with the custom-popup 
* class. See the full CSS for all customizable options: 
* https://github.com/mapbox/mapbox.js/blob/001754177f3985c0e6b4a26e3c869b0c66162c99/theme/style.css#L321-L366 
*/ 
.custom-popup .leaflet-popup-content-wrapper { 
    background:#2c3e50; 
    color:#fff; 
    font-size:16px; 
    line-height:24px; 
    } 
.custom-popup .leaflet-popup-content-wrapper a { 
    color:rgba(255,255,255,0.5); 
    } 
.custom-popup .leaflet-popup-tip-container { 
    width:30px; 
    height:15px; 
    } 
.custom-popup .leaflet-popup-tip { 
    border-left:15px solid transparent; 
    border-right:15px solid transparent; 
    border-top:15px solid #2c3e50; 
    } 
</style> 

<div class='custom-popup' id='map'></div> 

Answer 3

Un altro modo di personalizzare pop-up è di creare la classe CSS personalizzata per popup come:

<style> 
/* css to customize Leaflet default styles */ 
.popupCustom .leaflet-popup-tip, 
.popupCustom .leaflet-popup-content-wrapper { 
    background: #e0e0e0; 
    color: #234c5e; 
} 
</style> 

e poi nel mappare div è possibile impostare il popup marcatore personalizzato con il metodo bindPopup e passando un customOptions oggetto in cui si menziona il css class name:

// create popup contents 
var customPopup = "<b>My office</b><br/><img src='http://netdna.webdesignerdepot.com/uploads/2014/05/workspace_06_previo.jpg' alt='maptime logo gif' width='150px'/>"; 

// specify popup options 
var customOptions = 
    { 
    'maxWidth': '400', 
    'width': '200', 
    'className' : 'popupCustom' 
    } 


var marker = L.marker([lat, lng], {icon: myIcon}).addTo(map); 

// bind the custom popup 
marker.bindPopup(customPopup,customOptions); 

speranza che aiuta.