{"pageProps":{"post":{"__typename":"postagens","slug":"mapas-com-react-usando-leaflet","titulo":"Mapas com React usando Leaflet","conteudo":"<h3 id=\"-introdu-o\">👋 Introdu&ccedil;&atilde;o</h3>\n<p>Neste post vamos desenvolver uma p&aacute;gina web para demonstrar, na pr&aacute;tica, a integra&ccedil;&atilde;o de Mapas em uma aplica&ccedil;&atilde;o com React usando&nbsp;<a href=\"https://react-leaflet.js.org/\">Leaflet</a>.</p>\n<p>Alguns pontos que vamos abordar:</p>\n<ul>\n<li>Geolocaliza&ccedil;&atilde;o;</li>\n<li>Consumo de API;</li>\n<li>Input com Autocomplete usando React-Select;</li>\n<li>Integra&ccedil;&atilde;o com Mapas;</li>\n<li>Estiliza&ccedil;&atilde;o do Mapa e Marcadores.</li>\n</ul>\n<p><a href=\"https://leafletjs.com/\">Leaflet</a>&nbsp;&eacute; uma biblioteca JavaScript open-source para trabalhar com Mapas em aplica&ccedil;&otilde;es web e mobile. Pode ser simplesmente integrada a um site usando apenas HTML, CSS e JavaScript.</p>\n<p>Podemos tamb&eacute;m integrar a Leaflet ao React com a biblioteca&nbsp;<a href=\"https://react-leaflet.js.org/\">React Leaflet</a>, que tem suporte ao TypeScript sendo bastante simples de utilizar. Ambas ser&atilde;o utilizadas em nossa aplica&ccedil;&atilde;o de demonstra&ccedil;&atilde;o.</p>\n<p><img src=\"https://directus.allcom.dev/assets/a7c85c18-d80e-4375-a987-8b356033c6f8?width=1200&amp;height=630\" alt=\"83\" /></p>\n<p>Conforme podemos observar na anima&ccedil;&atilde;o acima, quando o usu&aacute;rio digita o endere&ccedil;o, sugest&otilde;es de locais semelhantes come&ccedil;am a aparecer no autocomplete. Quando algum endere&ccedil;o &eacute; selecionado, o pin aparece centralizado no mapa, mostrando a localidade escolhida.</p>\n<p>Quando o usu&aacute;rio envia o formul&aacute;rio, o pin 📍 &eacute; atualizado para um &iacute;cone de pacote 📦. Para acessar os dados da entrega basta clicar no &iacute;cone &mdash; esse &eacute; o fluxo completo :)</p>","destaque":false,"data_postagem":"2022-07-27T09:24:00","imagem_capa":{"__typename":"directus_files","id":"c776414e-2a63-49a7-82b7-2e790d2bb787","title":"Blog Thumb Utilizando Mapas No React Com Leaflet 1","url":"https://directus.allcom.dev/assets/c776414e-2a63-49a7-82b7-2e790d2bb787"},"tags":[{"slug":"noticias","nome":"Notícias"},{"slug":"outros","nome":"Outros"},{"slug":"suporte","nome":"Suporte"}],"autor":{"__typename":"autores","slug":"flavio-santos","nome":"Flávio Santos","avatar":{"__typename":"directus_files","id":"1c1819c3-0a88-44b8-81a5-1d98a12b8137","title":"Sr Barriga","url":"https://directus.allcom.dev/assets/1c1819c3-0a88-44b8-81a5-1d98a12b8137"}}},"morePosts":[{"__typename":"postagens","slug":"boas-praticas-para-devs-em-inicio-de-carreira","titulo":"Boas práticas para devs em início de carreira","imagem_capa":{"__typename":"directus_files","id":"7605de23-e3ab-4ae0-8f84-1818fed24d3b","title":"Boas Praticas Para Devs Em Inicio De Carreira","url":"https://directus.allcom.dev/assets/7605de23-e3ab-4ae0-8f84-1818fed24d3b"},"autor":{"__typename":"autores","slug":"pedro-arruda","nome":"Pedro Arruda","avatar":{"__typename":"directus_files","id":"c49b1fa7-b69e-42de-ba56-aebcd7c47209","title":"Avatar 2","url":"https://directus.allcom.dev/assets/c49b1fa7-b69e-42de-ba56-aebcd7c47209"}}},{"__typename":"postagens","slug":"como-registrar-um-dominio-na-internet","titulo":"Como registrar um domínio na internet?","imagem_capa":{"__typename":"directus_files","id":"290574f6-481a-4cd3-b19f-018829a1ff9c","title":"2731426113058","url":"https://directus.allcom.dev/assets/290574f6-481a-4cd3-b19f-018829a1ff9c"},"autor":{"__typename":"autores","slug":"pedro-arruda","nome":"Pedro Arruda","avatar":{"__typename":"directus_files","id":"c49b1fa7-b69e-42de-ba56-aebcd7c47209","title":"Avatar 2","url":"https://directus.allcom.dev/assets/c49b1fa7-b69e-42de-ba56-aebcd7c47209"}}},{"__typename":"postagens","slug":"comunidade-guia-pratico-de-como-contribuir-para-o-ecossistema-de-tecnologia","titulo":"Comunidade: guia prático de como contribuir para o ecossistema de tecnologia","imagem_capa":{"__typename":"directus_files","id":"a46b4e44-71fd-4452-be14-a346a94a9166","title":"Blog Rocketseat Guia Pratico De Como Contribuir Em Comunidade","url":"https://directus.allcom.dev/assets/a46b4e44-71fd-4452-be14-a346a94a9166"},"autor":{"__typename":"autores","slug":"flavio-santos","nome":"Flávio Santos","avatar":{"__typename":"directus_files","id":"1c1819c3-0a88-44b8-81a5-1d98a12b8137","title":"Sr Barriga","url":"https://directus.allcom.dev/assets/1c1819c3-0a88-44b8-81a5-1d98a12b8137"}}},{"__typename":"postagens","slug":"cristais-sao-encontrados-em-meteorito-que-caiu-na-terra-ha-50-mil-anos","titulo":"Cristais são encontrados em meteorito que caiu na Terra há 50 mil anos","imagem_capa":{"__typename":"directus_files","id":"81aca91e-3f08-4913-898b-c0b4d54d9ea8","title":"Cristais Meteorito Eua 1000x450","url":"https://directus.allcom.dev/assets/81aca91e-3f08-4913-898b-c0b4d54d9ea8"},"autor":{"__typename":"autores","slug":"pedro-arruda","nome":"Pedro Arruda","avatar":{"__typename":"directus_files","id":"c49b1fa7-b69e-42de-ba56-aebcd7c47209","title":"Avatar 2","url":"https://directus.allcom.dev/assets/c49b1fa7-b69e-42de-ba56-aebcd7c47209"}}}]},"__N_SSG":true}