Al final del curso introductorio de Leaflet, el miniproyecto final tenía el aspecto del siguiente mapa:
Con un mapa que muestra datos geojson, un minimapa y un título. Esta captura de pantalla se tomó en un PC y se ve bien.
Pero, ¿qué aspecto tendría en un teléfono móvil?
Aquí está la respuesta:
L¡No se ve tan bien!
Como toda la gestión de la página se realiza localmente, aunque el mapa se suministre a través de un servidor que adapte las páginas a diferentes tamaños de pantalla (móviles, tabletas, ordenadores), sólo se adaptará el marco del mapa y no su contenido.
Por lo tanto, hay que ocuparse de esta adaptación en el código Leaflet de la página.
Para ello, hay que actuar en cuatro ámbitos principales:
1.Asegúrate de que el mapa ocupa toda la pantalla sin desbordarse
mapa { altura: 100vh; }Pero cuidado, este estilo puede ocultar la barra superior (cabecera) en móviles. Aquí tienes un enfoque mejor:
Solución recomendada :
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#map {
position: absolute;
top: 70px; /* Hauteur de ton header */
bottom: 0;
left: 0;
right: 0;
}Será necesario ajustar la parte superior a la altura real del cabecero.
2.Hacer que la cabecera sea responsive
Añadir a la CSS :
header {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
flex-wrap: wrap;
position: absolute;
z-index: 1000;
top: 10px;
left: 50%;
transform: translateX(-50%);
background: rgba(255, 255, 255, 0.9);
padding: 10px 20px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
max-width: 90%;
}
.logo {
height: 40px; /* Ajustable selon ta préférence */
max-width: 100%;
}
.title-group {
display: flex;
flex-direction: column;
}
3.Evitar que el mapa se esconda detrás de la cabecera
Asegúrate de que la cabecera es absoluta y está por encima del mapa, por ejemplo (z-index: 1000), y que el mapa empieza justo debajo de la cabecera.
Si prefieres una cabecera fija arriba y que el mapa ocupe el resto del espacio ::
body, html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
flex-direction: column;
}
header {
flex: 0 0 auto;
}
#map {
flex: 1 1 auto;
}4.Asegúrate de que el mapa cambia de tamaño correctamente
Añadir al script Leaflet :
window.addEventListener('resize', function () {
map.invalidateSize();
});El minimapa
Un problema habitual es que el minimapa de Leaflet puede resultar incómodo en pantallas pequeñas. Aquí tienes tres soluciones complementarias que puedes implementar.
Solución 1: Ocultar el minimapa en pantallas pequeñas (CSS media query)
Añade este bloque CSS al <style> :
@media screen and (max-width: 600px) {
.leaflet-control-minimap {
display: none !important;
}
}Esto oculta el MiniMap completamente si el ancho de la pantalla es inferior a 600 píxeles (puede ajustar este umbral).
Solución 2: Hacer que el minimapa se pliegue automáticamente en los dispositivos móviles
Cambia las opciones en el código JS:
const miniMap = new L.Control.MiniMap(baseLayerMini, {
toggleDisplay: true,
minimized: window.innerWidth < 600 // réduite par défaut si petit écran
}).addTo(map);Esto hace que se minimice por defecto en móviles, pero el usuario puede abrirlo.
Solución 3: Reducir su tamaño en pantallas pequeñas
Si prefieres dejarlo visible pero más pequeño, añade esto al CSS:
@media screen and (max-width: 600px) {
.leaflet-control-minimap {
width: 100px !important;
height: 100px !important;
}
.leaflet-control-minimap .leaflet-container {
width: 100px !important;
height: 100px !important;
}
}Recomendación
Para una experiencia de usuario fluida, la solución 1 (ocultar) o 2 (plegar automáticamente) suele ser preferible en móvil, ya que las pantallas son demasiado pequeñas para mostrar dos mapas de forma eficaz.
Resultado final
Si el renderizado en PC se mantiene sin cambios, con estas modificaciones el renderizado en móvil es el siguiente:
