Olá pessoal neste breve tutorial vamos aprender como utilizar o React Leaflet em um projeto bem como vamos praticar alguns exemplos para conhecer melhor a biblioteca.

React Leaflet

O React Leaflet é uma biblioteca utilizada para criação de mapas e representação de feições do espaço geográfico. O React tem a responsabilidade de cuidar de atualizações no DOM enquanto o Leaflet a de disponibilizar todas as funcionalidades de interatividade com mapa.

Como Utilizar

Para utilizar o React Leaflet é preciso ter um projeto com todas as dependências de um projeto React. Uma das formas mais simples de fazer isso é através do comando create-react-app apresentado na documentação do React. Escolha uma pasta de sua preferência e no terminal execute o seguinte comando:

npx create-react-app react-leaflet-tutorial

Em seguida é necessário instalar as dependências do React Leaflet com o seguinte comando:

npm install leaflet react-leaflet

Exemplo de Mapa

Para apresentar o mapa é necessário fazer um reset css para ajustar o layout e comportamento padrão do navegador. No arquivo App.css é preciso informar as seguintes propriedades:

Em seguida no arquivo App.js é preciso importar o estilo informado no arquivo App.css e o estilo da biblioteca Leaflet. Também é necessário importar do React Leaflet os componentes MapContainer (tem a responsabilidade de criar uma instância do Leaflet Map e passar a mesma para os componentes filhos utilizando React Context) e TileLayer (tem a responsabilidade de carregar Tile Layers no mapa):

Para finalizar a criação do mapa é preciso retornar os componentes informando as propriedades de interesse:

Exemplo de Marcador e Popup

Para criar um marcador com popup é necessário importar os componentes Marker e Popup:

Em seguida é preciso retornar os componentes informando as propriedades de interesse:

Resultado do Tutorial

Bem pessoal este foi um breve tutorial de como utilizar o React Leaflet em projetos, espero que vocês tenham gostado e se caso tenham interesse em descobrir mais funcionalidades sobre a biblioteca, por favor acessem os seguintes links:

React Leaflet: https://react-leaflet.js.org/

React: https://pt-br.reactjs.org/

Leaflet: https://leafletjs.com/