Estoy experimentando un comportamiento extraño al mostrar el mapa del folleto en mi página. Normalmente, el mapa se representa como se esperaba y funciona bien. Sin embargo, quiero mostrar el mapa solo cuando ocurre un error en los formularios que detecto en javascript. Entonces, si configuro el padre <div id="map"> para display: none; y mostrarlo más tarde según sea necesario, los mosaicos no están cargados (o solo se cargan parcialmente y no continúan) y el mapa está extrañamente "dislocado" (no centrado como se define en js).
Mi opinión es que tal vez el navegador no represente los elementos dentro de una display: none; ¿padre?
Intenté ocultar el mapa con la función $(document).ready(...) pero no hizo ninguna diferencia. El mismo comportamiento se repite tan pronto como oculto y muestro el mapa. Probé esto en Firefox 44.0 y Chromium 48.0 y el comportamiento es consistente.
Cualquier consejo sería útil. ¿Es este comportamiento general para elementos cargados remotamente (ajax)?
Ahora conozco la solución y una solución alternativa (vea las respuestas a continuación), pero todavía no estoy seguro de si este es un comportamiento global para los elementos cargados de forma remota. Gracias por cualquier explicación.
Consulte la respuesta aceptada para obtener una explicación.
Lo que sucede es que su instancia L.Map no puede calcular correctamente sus dimensiones debido a la regla display:none CSS. Si no obtiene las dimensiones adecuadas, no sabe cuántos mosaicos cargar y cómo colocarlos, simplemente no carga ninguno. XHR no tiene nada que ver con eso. El mapa no sabe qué XHR, ese es el problema.
Después de cambiar de display:none a display:block llame al método invalidateSize en su instancia de L.Map . Obligará al mapa a (re)renderizarse:
Comprueba si el tamaño del contenedor del mapa cambió y actualiza el mapa si es así; llámelo después de haber cambiado el tamaño del mapa dinámicamente, también animando la panorámica de forma predeterminada. Si options.pan es falso, no se producirá la panorámica. Si options.debounceMoveend es verdadero, retrasará el evento moveend para que no suceda con frecuencia, incluso si el método se llama muchas veces seguidas.
Otra solución es usar la opacity: 0; o height: 0px; en lugar de display: none;
La solución parece estar en ocultar el mapa solo después de que la página se haya cargado así:
$( window ).load(function () { $('#map').hide(); }); De esta manera, el mapa se oculta solo después de que se haya renderizado por completo. Mostrándolo después de esto con $('#map').show(); muestra un mapa con mosaicos cargados que esperaría sin problemas.