Opt GIS

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ê

Criando Web Maps com ArcGIS API for Python Essa semana apresentei um Talks para os colegas da OPT GIS onde mostrei as capacidades da ArcGIS API for Python na …
UC_NEWS_#1: ArcGIS Image for ArcGIS Online O ArcGIS Image for ArcGIS Online permite aos usuários armazenar, gerenciar, visualizar e compartilhar seu conteúdo de imagens como …