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ê

Utilizando a API JavaScript ArcGIS com React.js Oi pessoal neste breve tutorial que eu preparei para vocês vamos aprender como criar um boilerplate simples para utilizar a API …
Conheça um novo recurso do ArcGIS Pro chamado Attribute Rules Sabemos que inovar não é fácil. É necessário muita dedicação, criatividade, foco e pesquisa. Esta …