Ao se pensar em mapas na internet, em muitos casos o primeiro produto que vem a cabeça é o Google Maps, mas outras alternativas existem. Ao se construir uma aplicação web utilizando esta solução, há o risco de vendor lock-in, ou seja, ficar amarrado a um único fornecedor de mapas. A biblioteca de mapas Leaflet.js é uma solução vendor agnostic, ou seja, com a mesma base de código permite trocar entre fornecedores com facilidade. Ele é software livre e tem o código disponibilizado no GitHub.

Logo do projeto

E porque pensar em fornecedores diferentes? Há diversos motivos. Um deles é a flexibilidade. Soluções baseadas em OpenStreetMap, uma base cartográfica colaborativa em licença livre, permitem uma miríade de usos que não são possíveis com o Google Maps, como acesso off-line, mapas vetoriais, personalização de aparência do mapa etc. Outro ponto relevante é o custo, o que fez com que muitas empresas passassem a utilizar provedores de mapas alternativos, por exemplo o Foursquare e o Strava, que passaram a utilizar mapas renderizados pela Mapbox, baseados em dados cartográficos do OpenStreetMap.

Neste texto, apresento a biblioteca Leaflet.js, com um pequeno tutorial de como implementar mapas em um site.

O ponto de partida é criar um arquivo HTML para abrigar o mapa, que pode ser tão simples quanto este:

Neste HTML, temos a referência ao leaflet (JavaScript e CSS), um pequeno CSS para estilizar o mapa criado (neste caso, estamos colocando em tela cheia, ocupando todo o espaço disponível) e temos também a referência a um script.js, aonde faremos a inicialização do mapa. O script pode ser iniciado desta forma:

Primeiro definimos o par de coordenadas iniciais (um array com dois números), neste caso as coordenadas do Rio de Janeiro, e um nível de zoom inicial. Na linha 5 instanciamos o mapa, definimos a visualização inicial com as coordenadas e zoom. Nas linhas 8 a 10, adicionamos uma camada de tiles, as imagens de fundo, neste caso imagens do OpenStreetMap, com a devida atribuição que o projeto requer. Note que as duas chamadas são feitas sobre o objeto global do Leaflet, L, e podem ser encadeadas. Veja este exemplo rodando no Codepen.

Resultado deste primeiro passo. Veja funcionando no Codepen.

O “olá mundo” com Leaflet não pode estar completo sem adicionar um marcador no mapa. Ao script anterior, adicionamos:

Definimos o par de coordenadas e a mensagem a ser exibida ao clicar no marcador (note que ele aceita tags HTML). Finalmente, instanciamos o marcador com as coordenadas, a adicionamos no mapa, definimos um evento de popup com a mensagem, e finalmente abrimos o popup. Veja este exemplo rodando no Codepen.

Naturalmente, os marcadores podem ter a aparência personalizada. Vamos substituir o trecho anterior por:

Aqui definimos um objeto com as propriedades do ícone que queremos para o marcador, especificando o endereço da imagem, o tamanho do ícone (array com largura e altura em pixels), a âncora do ícone (que ponto da imagem representa a “ponta” do marcador) e âncora do popup (aonde a ponta do popup aparece, em relação à âncora do ícone. Veja este exemplo rodando no Codepen.

Por ora podemos terminar este simples tutorial — ou podemos chamar de “Olá mundo” por aqui, mas antes gostaria de destacar que o Leaflet possui uma série de plugins para diversas funcionalidades, permitindo adicionar múltiplas imagens de fundo (imagens de satélite ou mapas de outros provedores, como Bing, Google Maps etc), ler formatos geográficos diversos (GeoJSON, GPX, KML etc), renderizar mapas em formatos diversos (mapas com clusters, mapas de calor, mapas coropléticos etc), explorar outras dimensões (como altitude e tempo) e muitas outras possibilidades.