No final do curso introdutório de Leaflet, o miniprojeto final se parecia com o mapa a seguir:
Com um mapa que exibe dados geojson, um mini-mapa e um título. Essa captura de tela foi feita em um PC e parece boa.
Mas como seria em um telefone celular?
Aqui está a resposta:
Não parece tão bom!
Como todo o gerenciamento da página é realizado localmente, mesmo que o mapa seja fornecido por meio de um servidor que adapta as páginas a diferentes tamanhos de tela (celulares, tablets, computadores), apenas o quadro do mapa será adaptado e não o seu conteúdo.
Portanto, essa adaptação deve ser feita no código do Leaflet da página.
Para fazer isso, precisamos agir em quatro áreas principais:
Traduzido com a versão gratuita do tradutor – DeepL.com
1.Certifique-se de que o mapa ocupe toda a tela sem transbordar
map { height: 100vh; }Mas tenha cuidado, pois esse estilo pode ocultar a barra superior (cabeçalho) no celular. Aqui está uma abordagem melhor:
Solução recomendada :
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#map {
position: absolute;
top: 70px; /* Hauteur de ton header */
bottom: 0;
left: 0;
right: 0;
}A parte superior precisará ser ajustada para a altura real do cabeçalho.
2.Tornar o cabeçalho responsivo
Adicione ao 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 o mapa se esconda atrás do cabeçalho
Certifique-se de que o cabeçalho seja absoluto e esteja acima do mapa, por exemplo (z-index: 1000), e que o mapa comece logo abaixo do cabeçalho.
Se você preferir um cabeçalho fixo acima e o mapa ocupar o restante do espaço:
body, html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
flex-direction: column;
}
header {
flex: 0 0 auto;
}
#map {
flex: 1 1 auto;
}4.Certifique-se de que o mapa seja redimensionado corretamente
Adicione ao folheto :
window.addEventListener('resize', function () {
map.invalidateSize();
});O mini-mapa
Um problema comum é que o MiniMap do Leaflet pode se tornar estranho em telas pequenas. Aqui estão três soluções complementares que você pode implementar.
Solução 1: Oculte o MiniMap em telas pequenas (consulta de mídia CSS)
Adicione este bloco CSS ao <style> :
@media screen and (max-width: 600px) {
.leaflet-control-minimap {
display: none !important;
}
}Isso oculta o MiniMap completamente se a largura da tela for inferior a 600 pixels (você pode ajustar esse limite).
Solução 2: forçar o MiniMap a se dobrar automaticamente em dispositivos móveis
Altere as opções no 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);Isso faz com que ele seja minimizado por padrão em dispositivos móveis, mas o usuário pode abri-lo.
Solução 3: Reduzir seu tamanho em telas pequenas
Se você preferir deixá-lo visível, mas menor, adicione isso ao 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;
}
}Recomendação
Para uma experiência de usuário fluida, a solução 1 (ocultar) ou 2 (dobrar automaticamente) geralmente é preferível em dispositivos móveis, pois as telas são muito pequenas para exibir dois mapas de forma eficaz.
Resultado final
Se a renderização no PC permanecer inalterada, com essas modificações a renderização no celular será a seguinte:
