Construindo mapas interativos com Leaflet

Neste post vou mostrar uma poderosa biblioteca javascript que permite criar mapas ricos e poderosos: Leaflet.

O Leaflet permite manipularmos mapas interativos em projetos web e mobile de maneira simples, com alta performance e usabilidade, juntando em apenas uma biblioteca todas as ferramentas necessárias para criarmos aplicações geo espaciais incríveis.

Como funciona

Por se tratar de uma biblioteca javascript, tudo que precisamos fazer é baixar os arquivos e anexar em nosso projeto. Vale ressaltar que, caso você não queira baixar o código da biblioteca, pode-se utilizar o próprio repositório online do plugin, conforme mostrarei abaixo.

Toda sintaxe é bem fácil de ser compreendida e o site oficial fornece uma vasta documentação sobre o Leaflet (em inglês), abordando desde os primeiros passos até implementações mais complexas.

Em um exemplo bem simples, para carregar um mapa com Leaflet em nosso projeto basta inserirmos o seguinte código:

<!DOCTYPE html>
<html>
<head>
     <title>Exemplo Simples de Mapa com Leaflet</title>
     <meta charset="utf-8" />

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <!-- Incluindo bibloteca Leaflet no projeto -->
     <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
     <script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
</head>
<body>

     <div id="map" style="width: 600px; height: 400px"></div>

     <script>

                // Instanciando Leaflet e definindo o elemento HTML que o mapa irá ser renderizado...
		var map = L.map('map').setView([51.505, -0.09], 13);
                
                // Carregando a camada da fonte de dados (MAPBOX) no mapa (ruas, terrenos, etc.)...
		L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ', {
			maxZoom: 18,
			attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
				'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
				'Imagery © <a href="http://mapbox.com">Mapbox</a>',
			id: 'mapbox.streets'
		}).addTo(map);

                // Inserindo um marcador (PIN) em uma determinada posição no mapa...
		L.marker([51.5, -0.09]).addTo(map)
			.bindPopup("<b>Hello world!</b>
I am a popup.").openPopup();

                // Carregando um círculo no mapa...
		L.circle([51.508, -0.11], 500, {
			color: 'red',
			fillColor: '#f03',
			fillOpacity: 0.5
		}).addTo(map).bindPopup("I am a circle.");

                // Carregando um polígono no mapa...
		L.polygon([
			[51.509, -0.08],
			[51.503, -0.06],
			[51.51, -0.047]
		]).addTo(map).bindPopup("I am a polygon.");

                // Capturando clique no mapa e abrindo PopUp com LatLng do ponto clicado...
		var popup = L.popup();
		function onMapClick(e) {
			popup
				.setLatLng(e.latlng)
				.setContent("You clicked the map at " + e.latlng.toString())
				.openOn(map);
		}
		map.on('click', onMapClick);

     </script>
</body>
</html>

Veja este exemplo em funcionamento clicando aqui.

Com isso, temos um mapa disponível na tela de nosso sistema, com possibilidades ilimitadas de implementações de recursos, podendo oferecer uma experiência realmente diferenciada para nosso usuário.

Confira neste link como dar os primeiros passos e começar a utilizar o Leaflet.

Fontes de dados (mapas)

Existem diversos serviços de mapas disponíveis atualmente, nos quais permitem pra nós desenvolvedores carregarmos dados de mapas em nossas aplicações. Como exemplo, temos o Google Maps API e o Mapbox API, que permitem criar mapas com base em suas respectivas fontes de dados geo espaciais.

Um recurso interessante no Leaflet é poder usar as diversas fontes de dados de mapas diferentes através de uma mesma sintaxe. Por exemplo, se quisermos inserir mapas em nosso sistema web baseado no Google maps API teremos que estudar toda a documentação específica para o serviço da Google (veja aqui). Caso sentirmos a necessidade de utilizarmos outra fonte de dados, como o Mapbox, teremos estudar toda a documentação específica deste serviço (disponível aqui) e refazer todo nosso código.

Logo, quando utilizamos Leaflet em nosso projeto, temos liberdade pra escolher a fonte de mapas que melhor se adapta a nossa necessidade, mantendo a mesma sintaxe e os mesmos comandos seja qual for o serviço de mapas que escolhermos. Bacana, né?!

Extensões

Além disso, através de extensões desenvolvidas pela comunidade podemos dar ainda mais poder aos mapas gerados com Leaflet. Veja algumas extensões interessantes que temos nessa biblioteca:

  • Fullscreen: inclui um botão na área do mapa que quando clicado o exibe em “tela cheia”.
  • Draw: inclui um conjunto de ferramentas no mapa que permite o usuário desenhar de forma livre no mapa;
  • Print/Export: permite exportar e imprimir a imagem do mapa naquele momento;
  • Measurement: habilita ferramentas para o usuário poder realizar medições a partir de interações com o mapa.

Essas são só algumas das extensões úteis. Vale a pena conhecer as diversas extensões disponíveis para Leaflet, disponíveis neste link: http://leafletjs.com/plugins.html.

Conclusão

Em minha opinião, após ter trabalhado em diversos projetos (de todos os portes) que exigiam manipulação de mapas, o Leaflet sempre se mostrou a melhor opção para este fim, agilizando diversas rotinas de trabalhos e garantindo recursos de mapa incríveis e eficientes.

Para conhecer mais sobre o Leaflet acesse http://leafletjs.com/

Written by Diego Cavalca

Graduado em Análise e Desenvolvimento de Sistemas pela UNILINS em 2012, atualmente Mestrando em Ciência da Computação na Universidade Federal de São Carlos (UFSCar).

  • Emerson Amaral

    Show de bola como sempre Diego. Qdo vai voltar fazer vídeos de apps escrevendo em banco de dados online?
    Forte abraço!

  • Fabio Eduardo Silva

    muito legal Diego excelente trabalho estou cursando analise e desenvolvimento e aprendo bastante com vc