A l’issue du cours d’introduction Leaflet, le mini-projet de fin ressemblait à la carte suivante:
Avec une carte affichant des données geojson, une mini-carte et un titre. Cette capture d’écran a été réalisée sur un PC et semble correcte.
Mais, qu’est-ce que cela donnerait sur un mobile?
La réponse, la voilà:
Le rendu n’apparait pas si convenable!
Comme toute la gestion de la page est réalisée en local, même si la carte est fournie à travers un serveur qui adapte les pages aux différentes tailles d’écran (mobiles, tablettes, ordinateurs), ce n’est que le cadre de la carte qui sera adapté et pas son contenu.
Il faut donc prendre en charge cette adaptation dans le code Leaflet de la page.
Pour cela il faut principalement agir sur quatre aspects:
1. Assurez-vous que la carte occupe tout l’écran sans débordement
#map { height: 100vh; }Mais attention, ce style peut cacher la barre du haut (header) sur mobile. Voici une meilleure approche :
Solution recommandée :
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#map {
position: absolute;
top: 70px; /* Hauteur de ton header */
bottom: 0;
left: 0;
right: 0;
}Il faudra ajuste le top selon la hauteur réelle du header.
2. Rendre le header responsive
Ajoutez dans le 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. Empêcher la carte de se masquer derrière le header
Assurez-vous que le header est absolu et au-dessus de la carte, comme par exemple (z-index: 1000), et que la carte commence juste en dessous du header.
Si vous préfèrez un header fixe au-dessus et que la carte prend le reste de l’espace :
body, html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
flex-direction: column;
}
header {
flex: 0 0 auto;
}
#map {
flex: 1 1 auto;
}4. Assurez-vous que la carte redimensionne bien
Ajoutez dans le script Leaflet :
window.addEventListener('resize', function () {
map.invalidateSize();
});La mini-carte
Un problème fréquent est que la MiniMap de Leaflet peut devenir gênante sur les petits écrans. Voici trois solutions complémentaires que vous pouvez mettre en place.
Solution 1 : Cacher la MiniMap sur les petits écrans (CSS media query)
Ajoutez ce bloc CSS dans le <style> :
@media screen and (max-width: 600px) {
.leaflet-control-minimap {
display: none !important;
}
}Cela masque complètement la MiniMap si la largeur de l’écran est inférieure à 600 pixels (vous pouvez ajuster ce seuil).
Solution 2 : Forcer la MiniMap à se replier automatiquement sur mobile
Modifiez les options dans le code JS :
const miniMap = new L.Control.MiniMap(baseLayerMini, {
toggleDisplay: true,
minimized: window.innerWidth < 600 // réduite par défaut si petit écran
}).addTo(map);Cela la rend minimisée par défaut sur mobile, mais l’utilisateur peut l’ouvrir.
Solution 3 : Réduire sa taille sur petit écran
Si vous préfèrez la laisser visible mais plus petite, ajoutez ceci dans le 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;
}
}Recommandation
Pour une expérience utilisateur fluide, la solution 1 (masquer) ou 2 (replier automatiquement) est souvent préférable sur mobile, car les écrans sont trop petits pour afficher deux cartes efficacement.
Résultat final
Si le rendu sur PC reste inchangé, avec ces modifications le rendu sur mobile est le suivant:
