Mapas com React usando Leaflet

👋 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.

🔰 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.

📍 Configurando a API de Geolocalização.

Para simplificar, não vou criar várias pastas para organizar o projeto, ao invés disso vou manter todos os arquivos dentro de src.

Na pasta src crie um arquivo apiMapBox.ts

const ACCESS_TOKEN_MAP_BOX = `access_token=${process.env.REACT_APP_ACCESS_TOKEN_MAP_BOX}` export const fetchLocalMapBox = (local: string) => fetch( `https://api.mapbox.com/geocoding/v5/mapbox.places/${local}.json?${ACCESS_TOKEN_MAP_BOX}` ) .then(response => response.json()) .then(data => data);

O código acima usa a fetch API do JavaScript para buscar o local que o usuário informar e retorna os dados.

Exemplo:

https://api.mapbox.com/geocoding/v5/mapbox.places/Brasil.json?access_token=MAP_BOX_ACCESS_TOKEN

Resultado:

Para acessar os endpoints do Mapbox, clique aqui.