#map { height: 100vh; }<\/code><\/pre>\n\n\n\nMais attention, ce style peut cacher la barre du haut (header)<\/strong> sur mobile. Voici une meilleure approche :<\/p>\n\n\n\n
 Solution recommand\u00e9e :<\/strong><\/p>\n\n\n\n\n\nhtml, body {\n  margin: 0;\n  padding: 0;\n  height: 100%;\n}\n\n#map {\n  position: absolute;\n  top: 70px; \/* Hauteur de ton header *\/\n  bottom: 0;\n  left: 0;\n  right: 0;\n}<\/code><\/pre>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\nIl faudra ajuste le top selon la hauteur r\u00e9elle du header.<\/p>\n\n\n\n
\n\n\n\n<\/span>2. Rendre le header responsive<\/strong><\/span><\/h2>\n\n\n\nAjoutez dans le CSS :<\/p>\n\n\n\n
header {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n  position: absolute;\n  z-index: 1000;\n  top: 10px;\n  left: 50%;\n  transform: translateX(-50%);\n  background: rgba(255, 255, 255, 0.9);\n  padding: 10px 20px;\n  border-radius: 8px;\n  box-shadow: 0 2px 6px rgba(0,0,0,0.2);\n  max-width: 90%;\n}\n\n.logo {\n  height: 40px; \/* Ajustable selon ta pr\u00e9f\u00e9rence *\/\n  max-width: 100%;\n}\n\n.title-group {\n  display: flex;\n  flex-direction: column;\n}\n<\/code><\/pre>\n\n\n\n
\n\n\n\n<\/span>3. Emp\u00eacher la carte de se masquer derri\u00e8re le header<\/strong><\/span><\/h2>\n\n\n\nAssurez-vous que le header est absolu<\/strong> et au-dessus de la carte<\/strong>, comme par exemple (z-index: 1000), et que la carte commence juste en dessous du header<\/strong>.<\/p>\n\n\n\n
Si vous pr\u00e9f\u00e8rez un header fixe au-dessus<\/strong> et que la carte prend le reste de l\u2019espace :<\/p>\n\n\n\n
body, html {\n  margin: 0;\n  padding: 0;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\nheader {\n  flex: 0 0 auto;\n}\n#map {\n  flex: 1 1 auto;\n}<\/code><\/pre>\n\n\n\n
\n\n\n\n<\/span>4. Assurez-vous que la carte redimensionne bien<\/strong><\/span><\/h2>\n\n\n\nAjoutez dans le script Leaflet :<\/p>\n\n\n\n
window.addEventListener('resize', function () {\n  map.invalidateSize();\n});<\/code><\/pre>\n\n\n\n<\/span>La mini-carte<\/span><\/h1>\n\n\n\nUn probl\u00e8me fr\u00e9quent est que la MiniMap de Leaflet peut devenir g\u00eanante sur les petits \u00e9crans. Voici trois solutions compl\u00e9mentaires<\/strong> que vous pouvez mettre en place.<\/p>\n\n\n\n
<\/span>Solution 1 : Cacher la MiniMap sur les petits \u00e9crans (CSS media query)<\/strong><\/span><\/h2>\n\n\n\nAjoutez ce bloc CSS<\/strong> dans le <style> :<\/p>\n\n\n\n
@media screen and (max-width: 600px) {\n  .leaflet-control-minimap {\n    display: none !important;\n  }\n}<\/code><\/pre>\n\n\n\nCela masque compl\u00e8tement la MiniMap<\/strong> si la largeur de l\u2019\u00e9cran est inf\u00e9rieure \u00e0 600 pixels (vous pouvez ajuster ce seuil).<\/p>\n\n\n\n
\n\n\n\n<\/span>Solution 2 : Forcer la MiniMap \u00e0 se replier automatiquement sur mobile<\/strong><\/span><\/h2>\n\n\n\nModifiez les options dans le code JS :<\/p>\n\n\n\n
const miniMap = new L.Control.MiniMap(baseLayerMini, {\n  toggleDisplay: true,\n  minimized: window.innerWidth < 600  \/\/ r\u00e9duite par d\u00e9faut si petit \u00e9cran\n}).addTo(map);<\/code><\/pre>\n\n\n\nCela la rend minimis\u00e9e par d\u00e9faut sur mobile<\/strong>, mais l\u2019utilisateur peut l\u2019ouvrir.<\/p>\n\n\n\n
\n\n\n\n<\/span>Solution 3 : R\u00e9duire sa taille sur petit \u00e9cran<\/strong><\/span><\/h2>\n\n\n\nSi vous pr\u00e9f\u00e8rez la laisser visible mais plus petite<\/strong>, ajoutez ceci dans le CSS :<\/p>\n\n\n\n
@media screen and (max-width: 600px) {\n  .leaflet-control-minimap {\n    width: 100px !important;\n    height: 100px !important;\n  }\n  .leaflet-control-minimap .leaflet-container {\n    width: 100px !important;\n    height: 100px !important;\n  }\n}<\/code><\/pre>\n\n\n\n
\n\n\n\n<\/span>Recommandation<\/strong><\/span><\/h2>\n\n\n\nPour une exp\u00e9rience utilisateur fluide<\/strong>, la solution 1 (masquer)<\/strong> ou 2 (replier automatiquement<\/strong>) est souvent pr\u00e9f\u00e9rable sur mobile, car les \u00e9crans sont trop petits pour afficher deux cartes efficacement.<\/p>\n\n\n\n
<\/span>R\u00e9sultat final<\/span><\/h1>\n\n\n\nSi le rendu sur PC reste inchang\u00e9, avec ces modifications le rendu sur mobile est le suivant:<\/p>\n\n\n\n
<\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"A l’issue du cours d’introduction Leaflet, le mini-projet de fin ressemblait \u00e0 la carte suivante: Avec une carte affichant des donn\u00e9es geojson, une mini-carte et un titre. Cette capture d’\u00e9cran a \u00e9t\u00e9 r\u00e9alis\u00e9e sur un PC…<\/p>\n","protected":false},"author":1,"featured_media":13899,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sfsi_plus_gutenberg_text_before_share":"","sfsi_plus_gutenberg_show_text_before_share":"","sfsi_plus_gutenberg_icon_type":"","sfsi_plus_gutenberg_icon_alignemt":"","sfsi_plus_gutenburg_max_per_row":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[2929],"tags":[412,3190,3188,3152,374],"class_list":["post-13897","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webmapping","tag-leaflet","tag-mobile-fr","tag-pc","tag-responsive","tag-tablette"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t