Mapas com React usando Leaflet

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:

Sempre queremos entregar a melhor experiência para nossa audiência.

Para uma melhor experiência com a leitura, você precisa entender o básico de:

• Como fazer requisições à API;
• React & TypeScript
• CSS
• NodeJS, Yarn ou Npm configurados e Create React App (CRA)

🔰 Iniciando o Projeto - CRA

Para criar um projeto React com TypeScript, execute o comando com Yarn:

yarn create react-app blog-react-maps-leaflet --template typescript

Ou com Npx (npm)

npx create-react-app blog-react-maps-leaflet --template typescript

Agora é só acessar o projeto para começar a codar:

cd blog-react-maps-Leaflet && code .

🌍  Instalando e configurando as bibliotecas

Para trabalhar com mapas instalamos as libs:

yarn add leaflet react-leaflet

A lib react-select vai auxiliar com autocomplete no input de endereço, e o uuid vai gerar um ID:

yarn add react-select uuid

Instalando as tipagens das libs:

yarn add -D @types/react-leaflet @types/react-leaflet @types/react-select

📂 Configurando a variável de ambiente

Sempre que formos trabalhar com APIs de mapas vamos precisar de um Token de acesso com o provedor. Mais uma vez estaremos usando o Mapbox.

É bem simples de criar a conta e pegar o access_token.

Crie um arquivo .env e adicione uma variável:

REACT_APP_ACCESS_TOKEN_MAP_BOX=SEU_ACCESS_TOKEN_MAP_BOX_AQUI

No arquivo .gitignore adicione o .env para não ser enviado ao Github.

No projeto criado com create-react-app é obrigatório a variável começar com REACT_APP_

⚠️  Essa variável vai ficar protegida apenas no código, porém fica visível nas requisições, um usuário avançado consegue acessá-la no console/network do navegador.