Usando Leaflet.js em um projeto React

Os mapas estão por toda parte. Talvez você tenha notado que quase todos os sites hoje em dia têm algum tipo de aplicativo de mapeamento incluído em algum lugar. Alguns sites mostram locais de negócios perto de você , alguns mostram o alcance do trabalho comunitário de um grupo e muito mais . Como desenvolvedor, ser capaz de criar mapas do zero é um grande conjunto de habilidades para se ter. Existem inúmeras empresas que se especializam no desenvolvimento de software GIS e procuram desenvolvedores qualificados . Ter um ou dois aplicativos de mapeamento em seu portfólio irá definitivamente diferenciá-lo dos desenvolvedores que enviam portfólios que consistem em listas de tarefas e calculadoras.

Leaflet.js é uma das bibliotecas Javascript de código aberto mais populares para a construção desses aplicativos de mapeamento interativos. Dos documentos:

O folheto foi projetado com simplicidade , desempenho e usabilidade em mente. Ele funciona de forma eficiente em todas as principais plataformas de desktop e móveis, pode ser estendido com vários plug-ins , tem uma API bonita, fácil de usar e bem documentada e um código-fonte simples e legível para o qual é uma alegria contribuir .

Agora, digamos que você tenha um site baseado no React ( confira este iniciador que configurei para você no Stack Blitz ) e deseja adicionar um mapa de folheto para mostrar suas habilidades de mapeamento. Na verdade, existe uma ligação do React para o Folheto, React-Leaflet . O problema é que não fará nenhum bem se você não entender como o Folheto funciona. Dos documentos do React-Leaflet:

O React Leaflet fornece ligações entre o React e o Leaflet. Não substitui o Folheto , mas o aproveita para abstrair as camadas do Folheto como componentes do React. Como tal, ele pode se comportar de maneira diferente de como outros componentes do React funcionam.

Então, vamos examinar como construir um componente de mapa de folheto dentro de um aplicativo React!

Começando

Podemos começar copiando e colando os links Leaflet.csse Leaflet.jsCDN no cabeçalho de nosso index.htmlarquivo no publicdiretório:

No srcdiretório, podemos criar um novo arquivo chamado Map.jsx. Estaremos usando um componente funcional para utilizar ganchos React, então vamos criar nosso componente e colocar nossas importações no topo do arquivo. Nesse caso, estaremos importando Reacte useEffectde Reacte Lde Leaflet:

Então, vá para a demonstração dos Provedores de Folhetos e escolha um bloco de mapa. Para esta demonstração, o mapa será centralizado nos Estados Unidos, então usaremos a primeira opção, o OpenStreetMap.Mapnikbloco, mas fique à vontade para usar o que você quiser. Também podemos seguir em frente e passar um pouco de estilo para a div do mapa. Em Map.jsx:

Para criar a instância do nosso mapa do folheto, vamos usar o useEffectgancho do React . Queremos apenas criar uma instância do mapa Leaflet quando o componente for montado pela primeira vez, portanto, forneceremos à useEffectfunção um array de dependências vazio. Também queremos passar um conjunto de parâmetros para a instância do mapa, que são descritos AQUI na documentação do Folheto. Observe que estamos definindo a zoomControlpropriedade falsecomo, pois iremos adicionar um zoomControlmanualmente em breve :

Agora, uma vez que importamos Map.jsxem nosso Appcomponente, devemos ter um mapa de folheto muito básico exibido em nossa tela:

Acessando a instância do mapa com Refs

Agora que criamos a instância do nosso mapa, vamos querer poder acessar esse mapa para adicionar camadas, controles e usar plug-ins de terceiros do folheto . É aqui que os sempre úteis React Refs entram. Embora refs sejam geralmente usados ​​para acessar elementos DOM, você também pode usá-los como um contêiner genérico, pois a currentpropriedade é mutável e pode conter qualquer valor, por exemplo, nossa instância de mapa. Atribuiremos o refà instância do mapa no mesmo useEffectgancho em que o criamos. Devemos também criar um refpara a instância do bloco:

Adicionando controles

Depois de atribuir os refs, podemos adicionar alguns controles básicos à instância do mapa, então vamos adicionar a zoomControle a layerControl. Para o layerControl, precisamos passar um baseLayersobjeto para o controle. O baseLayersobjeto consistirá em quaisquer blocos de mapa que você deseja que os usuários possam alternar, como alternar entre um mapa claro e um mapa escuro, por exemplo. O overlaysobjetivo é adicionar e remover camadas de sobreposição como marcadores e pop-ups de e para o mapa, mas vamos nos preocupar com isso mais tarde. Dos documentos:

Os parâmetros baseLayerse overlayssão literais de objeto com nomes de camada como chaves e Layerobjetos como valores:

{
"<someName1>": layer1,
"<someName2>": layer2
}

Os nomes das camadas podem conter HTML, o que permite adicionar um estilo adicional aos itens:

{"<img src='my-layer-icon' /> <span class='my-layer-item'>My Layer</span>": myLayer}

Quanto ao zoomControl, existem algumas opções que você pode passar, mas para nossos propósitos, vamos apenas passar a positionpropriedade herdada de Control. Também vamos configurar uma segunda useEffectfunção, que terá mapRefna matriz de dependência. Dessa forma, mantemos nossa lógica de criação para o mapa e os controles separados:

Ouvintes de eventos de mapas

Também podemos adicionar ouvintes de evento de mapa à instância de mapa. Para simplificar, vamos adicionar um zoomstartouvinte de eventos que registra "Zoom Started"no console. Em uma nova useEffectfunção:

Adicionando camadas de interface do usuário

Se você não tem nenhum dado para exibir e está satisfeito com um mapa vazio, então está tudo pronto! Parabéns, aproveite seu aplicativo de mapas! Para o resto de nós, no entanto, estamos criando nosso aplicativo de mapas para exibir dados geográficos. Digamos que temos uma lista de dados de cidades e queremos usar o Folheto Circlepara mostrar essas cidades. Cole a seguinte lista de cidades em um novo arquivo,, data.jsno srcdiretório:

Em seguida, importação city_dataem App.jsxe passá-lo para o nosso Mapcomponente através adereços:

Agora, precisamos criar o layerGroupao qual adicionaremos nossos Circlemarcadores de cidade. Vamos configurar um ref para o e layerGroup, em seguida, adicioná-lo layerGroupà instância do mapa. Veja como isso vai ficar:

Para adicionar os Circlemarcadores ao layerGroupque criamos, podemos usar .forEach()on city_datapara criar um Circlepara cada cidade. e adicione-os à instância do mapa. Em um novo useEffectgancho:

Agora devemos ter alguns círculos decorando nosso mapa antes vazio:

Agora temos nossos círculos, mas como podemos fazer com que os usuários possam alternar os círculos com o layerControlque configuramos? Usamos outro é ref,claro! Vamos configurar um ref para o layerControlpara que possamos usar seu addOverlaymétodo para adicionar nosso novolayerGroup:

Os usuários agora devem ser capazes de ativar e desativar os círculos na tela por meio do layerControl.

Embrulhar

Agora, temos um aplicativo de mapa de Folheto básico, mas funcional. Você pode ver como a codificação dessa forma pode se tornar repetitiva rapidamente, com nosso uso de múltiplos useEffecte useRefganchos. É aqui que React-Leafletentra, pois cuida de grande parte da lógica encontrada em nossos useEffectganchos nos bastidores. Nosso código também se parecerá muito mais com um componente React típico, em oposição a um único Mapdiv com um monte de useEffectganchos lidando com a criação de camadas. Você descobrirá que ainda usaremos muito o useRefgancho, já que o Leaflet está fazendo a renderização do DOM e precisaremos acessar esses elementos do Leaflet no DOM. Mas, isso é para a próxima lição.

Neste ponto, nosso componente deve ter a seguinte aparência:

Recomendo que você leia a documentação do Folheto e experimente alguns dos plug-ins de terceiros . Você descobrirá que há várias funcionalidades interessantes que podem ser adicionadas ao seu mapa. Obrigado pela leitura e verifique o próximo artigo onde criaremos um aplicativo de mapeamento com o link React-Leaflet!

Demonstração de trabalho no Stack Blitz