Opt

Conhecendo o React Leaflet

 

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

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:

Não foi fornecido texto alternativo para esta imagem

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):

Não foi fornecido texto alternativo para esta imagem

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

Não foi fornecido texto alternativo para esta imagem

Exemplo de Marcador e Popup

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

Não foi fornecido texto alternativo para esta imagem

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

Não foi fornecido texto alternativo para esta imagem

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/

Não foi fornecido texto alternativo para esta imagem

Há 11 anos a OPT GIS vem desenvolvendo soluções de inteligência geográfica e transformação digital. 

Quer conhecer nossas soluções?

Visite a pagina: www.optgis.com.br

Escrito por

Diego Rodrigues 

Função: Analista Desenvolvedor
https://www.linkedin.com/in/Diego Rodrigues/

Sugestões para você

OSRM – Open Source Routing Machine Você provavelmente já deve ter utilizado serviços que mostram a rota entre dois ou mais pontos como Google Maps, …
Utilizando a OpenAI para auxiliar na execução de serviços OpenAI é uma organização sem fins lucrativos que visa promover a ciência da computação, especialmente no …