š IntroduĆ§Ć£o
Neste post vamos desenvolver uma pĆ”gina web para demonstrar, na prĆ”tica, a integraĆ§Ć£o de Mapas em uma aplicaĆ§Ć£o com React usandoĀ Leaflet.
Alguns pontos que vamos abordar:
- GeolocalizaĆ§Ć£o;
- Consumo de API;
- Input com Autocomplete usando React-Select;
- IntegraĆ§Ć£o com Mapas;
- EstilizaĆ§Ć£o do Mapa e Marcadores.
LeafletĀ Ć© uma biblioteca JavaScript open-source para trabalhar com Mapas em aplicaƧƵes web e mobile. Pode ser simplesmente integrada a um site usando apenas HTML, CSS e JavaScript.
Podemos tambĆ©m integrar a Leaflet ao React com a bibliotecaĀ React Leaflet, que tem suporte ao TypeScript sendo bastante simples de utilizar. Ambas serĆ£o utilizadas em nossa aplicaĆ§Ć£o de demonstraĆ§Ć£o.
Somando todas essas tecnologias e conceitos, no final deste post vamos ter desenvolvido o app Entregas. Vai ser assim:
Fluxo da aplicaĆ§Ć£o Entregas - Clique em HD para melhorar a qualidade do Gif.
Conforme podemos observar na animaĆ§Ć£o acima, quando o usuĆ”rio digita o endereƧo, sugestƵes de locais semelhantes comeƧam a aparecer no autocomplete. Quando algum endereƧo Ć© selecionado, o pin aparece centralizado no mapa, mostrando a localidade escolhida.
Quando o usuĆ”rio envia o formulĆ”rio, o pin š Ć© atualizado para um Ćcone de pacote š¦. Para acessar os dados da entrega basta clicar no Ćcone ā esse Ć© o fluxo completo :)