\n
\n
html, 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\nSer\u00e1 necesario ajustar la parte superior a la altura real del cabecero.<\/p>\n\n\n\n \n\n\n\n
<\/span>2.Hacer que la cabecera sea responsive<\/span><\/h2>\n\n\n\n
A\u00f1adir a la 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.Evitar que el mapa se esconda detr\u00e1s de la cabecera<\/span><\/h2>\n\n\n\nAseg\u00farate de que la cabecera es absoluta y est\u00e1 por encima del mapa, por ejemplo (z-index: 1000), y que el mapa empieza justo debajo de la cabecera.<\/p>\n\n\n\n Si prefieres una cabecera fija arriba y que el mapa ocupe el resto del espacio ::<\/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.Aseg\u00farate de que el mapa cambia de tama\u00f1o correctamente<\/span><\/h2>\n\n\n\nA\u00f1adir al script Leaflet :<\/p>\n\n\n\n window.addEventListener('resize', function () {\n map.invalidateSize();\n});<\/code><\/pre>\n\n\n\n<\/span>El minimapa<\/span><\/h1>\n\n\n\nUn problema habitual es que el minimapa de Leaflet puede resultar inc\u00f3modo en pantallas peque\u00f1as. Aqu\u00ed tienes tres soluciones complementarias que puedes implementar.<\/p>\n\n\n\n <\/span>Soluci\u00f3n 1: Ocultar el minimapa en pantallas peque\u00f1as (CSS media query)<\/span><\/h2>\n\n\n\nA\u00f1ade este bloque CSS al <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\nEsto oculta el MiniMap completamente si el ancho de la pantalla es inferior a 600 p\u00edxeles (puede ajustar este umbral).<\/p>\n\n\n\n \n\n\n\n<\/span>Soluci\u00f3n 2: Hacer que el minimapa se pliegue autom\u00e1ticamente en los dispositivos m\u00f3viles<\/span><\/h2>\n\n\n\nCambia las opciones en el c\u00f3digo 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\nEsto hace que se minimice por defecto en m\u00f3viles, pero el usuario puede abrirlo.<\/p>\n\n\n\n \n\n\n\n<\/span>Soluci\u00f3n 3: Reducir su tama\u00f1o en pantallas peque\u00f1as<\/span><\/h2>\n\n\n\nSi prefieres dejarlo visible pero m\u00e1s peque\u00f1o, a\u00f1ade esto al 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>Recomendaci\u00f3n<\/span><\/h2>\n\n\n\nPara una experiencia de usuario fluida, la soluci\u00f3n 1 (ocultar) o 2 (plegar autom\u00e1ticamente) suele ser preferible en m\u00f3vil, ya que las pantallas son demasiado peque\u00f1as para mostrar dos mapas de forma eficaz.<\/p>\n\n\n\n <\/span>Resultado final<\/span><\/h1>\n\n\n\nSi el renderizado en PC se mantiene sin cambios, con estas modificaciones el renderizado en m\u00f3vil es el siguiente:<\/p>\n\n\n\n <\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"Al final del curso introductorio de Leaflet, el miniproyecto final ten\u00eda el aspecto del siguiente mapa: Con un mapa que muestra datos geojson, un minimapa y un t\u00edtulo. Esta captura de pantalla se tom\u00f3 en un…<\/p>\n","protected":false},"author":1,"featured_media":13899,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"give_campaign_id":0,"_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_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3018],"tags":[2939,3194],"class_list":["post-13917","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webmapping-es","tag-leaflet-es","tag-responsive-es"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.sigterritoires.fr\/wp-content\/uploads\/2025\/05\/carte_leaflet_sur_mobile.jpg?fit=1080%2C2400&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p6XU0A-3Ct","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/13917","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/comments?post=13917"}],"version-history":[{"count":0,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/13917\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/media\/13899"}],"wp:attachment":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/media?parent=13917"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/categories?post=13917"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/tags?post=13917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}