\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\nA parte superior precisar\u00e1 ser ajustada para a altura real do cabe\u00e7alho.<\/p>\n\n\n\n \n\n\n\n
<\/span>2.Tornar o cabe\u00e7alho responsivo<\/span><\/h2>\n\n\n\n
<\/ol>\n\n\n\n
Adicione ao 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 o mapa se esconda atr\u00e1s do cabe\u00e7alho<\/span><\/h2>\n\n\n\nCertifique-se de que o cabe\u00e7alho seja absoluto e esteja acima do mapa, por exemplo (z-index: 1000), e que o mapa comece logo abaixo do cabe\u00e7alho.<\/p>\n\n\n\n Se voc\u00ea preferir um cabe\u00e7alho fixo acima e o mapa ocupar o restante do espa\u00e7o:<\/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.Certifique-se de que o mapa seja redimensionado corretamente<\/span><\/h2>\n\n\n\nAdicione ao folheto :<\/p>\n\n\n\n window.addEventListener('resize', function () {\n map.invalidateSize();\n});<\/code><\/pre>\n\n\n\n<\/span>O mini-mapa<\/span><\/h1>\n\n\n\nUm problema comum \u00e9 que o MiniMap do Leaflet pode se tornar estranho em telas pequenas. Aqui est\u00e3o tr\u00eas solu\u00e7\u00f5es complementares que voc\u00ea pode implementar.<\/p>\n\n\n\n <\/span>Solu\u00e7\u00e3o 1: Oculte o MiniMap em telas pequenas (consulta de m\u00eddia CSS)<\/span><\/h2>\n\n\n\nAdicione este bloco CSS ao <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\nIsso oculta o MiniMap completamente se a largura da tela for inferior a 600 pixels (voc\u00ea pode ajustar esse limite).<\/p>\n\n\n\n \n\n\n\n<\/span>Solu\u00e7\u00e3o 2: for\u00e7ar o MiniMap a se dobrar automaticamente em dispositivos m\u00f3veis<\/span><\/h2>\n\n\n\nAltere as op\u00e7\u00f5es no 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\nIsso faz com que ele seja minimizado por padr\u00e3o em dispositivos m\u00f3veis, mas o usu\u00e1rio pode abri-lo.<\/p>\n\n\n\n \n\n\n\n<\/span>Solu\u00e7\u00e3o 3: Reduzir seu tamanho em telas pequenas<\/span><\/h2>\n\n\n\nSe voc\u00ea preferir deix\u00e1-lo vis\u00edvel, mas menor, adicione isso ao 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>Recomenda\u00e7\u00e3o<\/span><\/h2>\n\n\n\nPara uma experi\u00eancia de usu\u00e1rio fluida, a solu\u00e7\u00e3o 1 (ocultar) ou 2 (dobrar automaticamente) geralmente \u00e9 prefer\u00edvel em dispositivos m\u00f3veis, pois as telas s\u00e3o muito pequenas para exibir dois mapas de forma eficaz.<\/p>\n\n\n\n <\/span>Resultado final<\/span><\/h1>\n\n\n\nSe a renderiza\u00e7\u00e3o no PC permanecer inalterada, com essas modifica\u00e7\u00f5es a renderiza\u00e7\u00e3o no celular ser\u00e1 a seguinte:<\/p>\n\n\n\n <\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"No final do curso introdut\u00f3rio 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\u00edtulo. Essa captura de tela foi feita em…<\/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":[3021],"tags":[2937,3196],"class_list":["post-13918","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webmapping-pt","tag-leaflet-pt","tag-responsive-pt"],"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-3Cu","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/13918","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=13918"}],"version-history":[{"count":0,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/13918\/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=13918"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/categories?post=13918"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/tags?post=13918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}