map { height: 100vh; }<\/code><\/pre>\n\n\n\nBut beware, this style may hide the header on mobile. Here’s a better approach:<\/p>\n\n\n\n
Recommended solution :<\/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\nThe top will need to be adjusted to the actual header height.<\/p>\n\n\n\n
\n\n\n\n<\/span>2.Make the header responsive<\/span><\/h2>\n\n\n\nAdd to 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.Prevent the map from hiding behind the header<\/span><\/h2>\n\n\n\nMake sure the header is absolute and above the map, for example (z-index: 1000), and that the map starts just below the header.<\/p>\n\n\n\n
If you prefer a fixed header above and the map takes up the rest of the space :<\/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.Make sure the map resizes properly<\/span><\/h2>\n\n\n\nAdd to the Leaflet script :<\/p>\n\n\n\n
window.addEventListener('resize', function () {\n  map.invalidateSize();\n});<\/code><\/pre>\n\n\n\n<\/span>The mini-map<\/span><\/h1>\n\n\n\nA common problem is that Leaflet’s MiniMap can become awkward on small screens. Here are three complementary solutions you can implement.<\/p>\n\n\n\n
<\/span>Solution 1: Hide the MiniMap on small screens (CSS media query)<\/span><\/h2>\n\n\n\nAdd this CSS block to the <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\nThis completely hides the MiniMap if the screen width is less than 600 pixels (you can adjust this threshold).<\/p>\n\n\n\n
\n\n\n\n<\/span>Solution 2: Force MiniMap to fold automatically on mobile devices<\/span><\/h2>\n\n\n\nModify the options in the JS code:<\/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\nThis makes it minimized by default on mobile, but the user can open it.<\/p>\n\n\n\n
\n\n\n\n<\/span>Solution 3: Reduce its size on small screens<\/span><\/h2>\n\n\n\nIf you prefer to leave it visible but smaller, add this in the 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>Recommendation<\/span><\/h2>\n\n\n\nFor a smooth user experience, solution 1 (hide) or 2 (automatically fold) is often preferable on mobile, as screens are too small to display two cards effectively.<\/p>\n\n\n\n
<\/span>Final result<\/span><\/h1>\n\n\n\nIf the rendering on PC remains unchanged, with these modifications the rendering on mobile is as follows:<\/p>\n\n\n\n
<\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"At the end of the Leaflet introductory course, the final mini-project looked like the following map: With a map displaying geojson data, a mini-map and a title. This screenshot was taken on a PC and looks…<\/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":[3015],"tags":[2945,3192],"class_list":["post-13916","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webmapping-en","tag-leaflet-en","tag-responsive-en"],"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