Solución:
Creo que lo que está sucediendo es que, cuando se crea el mapa, el ancho / alto del contenedor para su elemento ‘map-canvas’ aún no se ha ajustado al ancho / alto del diálogo modal. Esto hace que el tamaño del mapa sea incorrecto (más pequeño) de lo que debería ser.
Puedes arreglar esto llamando map.invalidateSize(). Esto funcionará para reajustar los límites de ancho / alto del contenedor de L.Map.
Puede llamar a esto automáticamente conectándose al evento donde se muestra el modal de Bootstrap.
$('#myModal').on('show.bs.modal', function(){
setTimeout(function() {
map.invalidateSize();
}, 10);
});
Inserte este código en su JavaScript. Cuando se muestra el modal, el mapa invalidará su tamaño. El tiempo de espera se debe a que puede haber algún tiempo de animación / transición para que el modal se muestre y se agregue al DOM.
Probablemente debería evitar usar setTimeout con un retraso elegido al azar. Una mejor manera de usar el evento ‘shown.bs.modal’ en lugar de ‘show.bs.modal’:
modal.on('shown.bs.modal', function(){
setTimeout(function() {
map.invalidateSize();
}, 1);
})
O use aplazamiento de subrayado:
modal.on('shown.bs.modal', function(){
_.defer(map.invalidateSize.bind(map));
})
Yo uso esta solución:
.modal {
visibility: hidden;
display: block;
}
.modal[aria-hidden='false'] {
visibility: visible;
display: block;
}