¿Cómo personalizaría la apariencia de la ventana emergente del folleto?

Question

Estoy buscando personalizar un mapa creado con el folleto y me gustaría personalizar el Popup (L.popup).

El único método que puedo pensar es construir una capa emergente personalizada con mi nuevo diálogo y reposicionar esto cada vez que el usuario interactúa con un marcador, de esta manera la ventana emergente permanece alineada cuando el usuario arrastra el mapa.

¿Alguien está al tanto de alguna alternativa o forma de hacerlo?

Gracias

Answer 1

Usted debe personalizar la apariencia usando CSS. Los siguientes selectores son probablemente interesante:

.leaflet-popup-content-wrapper { 
} 

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

.leaflet-popup-tip-container { 
} 

Dependiendo de su navegador, puede utilizar herramientas como Firebug para Firefox o la acumulación de herramientas para desarrolladores de Chrome/Safari (clic derecho en cualquier lugar de la página y haga clic en Inspeccionar el elemento, o use shortcuts), para inspeccionar la ventana emergente y encontrar selectores CSS adicionales que puede modificar. Para ampliar su funcionalidad, debe comenzar por mirar popup source code. Mira las fuentes de otros componentes de Leaflet hasta que tengas una idea de lo que está pasando. Extender la clase emergente de la siguiente manera, y luego cambiar lo que quiera:

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

Answer 2

Hay un ejemplo más en mapbox que utiliza leaflet.js. El ejemplo muestra cómo usar 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

Otra forma de personalizar emergente es mediante la creación de su clase CSS personalizado para emergente como:

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

y luego en asignar div puede definir el emergente personalizado marcador con el método bindPopup y pasar una CustomOptions objeto donde se menciona la 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); 

espero que ayuda