Leaflet – Criando mapas interativos em javascript para aplicativos, sites e blogs.

A Leaflet é uma biblioteca JavaScript de código aberto para elaboração de mapas interativos compatíveis com browsers e com dispositivos móveis.

Leaflet é a biblioteca JavaScript de código aberto e hoje líder no uso para mapas interativos compatíveis com dispositivos móveis e a internet. Com apenas cerca de 42 KB, ele tem todos os recursos de mapeamento que a maioria dos desenvolvedores precisa.

O Leaflet foi projetado com simplicidade , desempenho e usabilidade em mente. Ele funciona com eficiência em todas as principais plataformas de desktop e móveis, pode ser estendido com muitos plug-ins , tem uma API bonita, fácil de usar e bem documentada e um código-fonte simples e legível, o que deixa fácil aprender mesmo se você nunca programou na vida.

Muito fácil de começar a usar

Veja este exemplo. Vamos ensinar como fazer a seguir:

O primeiro passo é criar um arquivo texto (txt) em uma pasta em seu computador. Renomeie sua extensão de .txt para .html.

Com isto podemos abrir o arquivo no Chrome ou Edge e também no Bloco de Notas para editar o código (clique com o direito, abrir com>bloco de notas).

Vamos começar o arquivo adicionando o código html padrão de um arquivo web. Depois o link para os códigos css e javascript (js) do leaflet. Veja que não percisamos nem baixar o código do leaflet, apenas referenciamos ele diretamente.

<!DOCTYPE html>
<html lang="en">
<head>
	<base target="_top">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<title>Layers Control Tutorial - Leaflet</title>
	
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14=" crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg=" crossorigin=""></script>

Agora vamos colocar um estilo, ou seja, definir tamanho dos conteiners do mapa e outros.

	<style>
		html, body {
			height: 100%;
			margin: 0;
		}
		.leaflet-container {
			height: 400px;
			width: 600px;
			max-width: 100%;
			max-height: 100%;
		}
	</style>

Agora vamos colocar a div, ou seja, o local onde nosso mapa vai aparecer na página. Chamamos esta div de map.

</head>
<body>

<div id='map'></div>

Agora vamos colocar nosso script para produzir o mapa propriamente dito. Como fazer isto e cada função utilizada está bem documentado no site do leaflet. Basicamente vamos criar um grupo de layer (layergroup) e vamos adicionar alguns marcadores (pontos ou markers) com as coordenadas e o texto do popup que vai aparecer quando clicar.

Vamos chamar um tilelayer que é o mapa base do openstreetmaps que é opensource. Manteremos o código de copyright pois é ilegal remover. Depois em L.map vamos definir o centro do nosso mapa e o nível de zoom, quanto maior o número mais próximo o mapa vai aparecer.

<script>
	var cities = L.layerGroup();

	var mUFSM= L.marker([-29.71949, -53.71435]).bindPopup('Esta é a Universidade de Santa Maria').addTo(cities);
	var mSM = L.marker([-29.69010, -53.80718]).bindPopup('Esta é a cidade de Santa Maria-RS').addTo(cities);
	var mRIA= L.marker([-29.71123, -53.68996]).bindPopup('Este é o aeroport ode Santa Maria (RIA)').addTo(cities);
	var mBOT = L.marker([-29.71883, -53.72904]).bindPopup('Este é o Jardim Botânico de Santa Maria').addTo(cities);

	var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
	var mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
 
	var streets = L.tileLayer(mbUrl, {id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr});

	var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
		maxZoom: 19,
		attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
	});

	var map = L.map('map', {
		center: [-29.70037, -53.76906],
		zoom: 12,
		layers: [osm, cities]
	});

	var baseLayers = {
		'OpenStreetMap': osm,
		'Streets': streets
	};

		
</script>

E por último fechamos nossas tags html

</body>
</html>

Pronto. Nosso primeiro mapa web interativo está pronto !!

Abaixo o código completo. Agora salve o arquivo html que estava editando no bloco de notas. Depois de salvá-lo, abra ele no Chrome ou Edge ou Firefox, seja qual for seu browser. O resultado deverá ser como o mapa do exemplo acima.



<!DOCTYPE html>
<html lang="en">
<head>
	<base target="_top">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<title>Layers Control Tutorial - Leaflet</title>
	
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14=" crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg=" crossorigin=""></script>

	<style>
		html, body {
			height: 100%;
			margin: 0;
		}
		.leaflet-container {
			height: 400px;
			width: 600px;
			max-width: 100%;
			max-height: 100%;
		}
	</style>
</head>
<body>

<div id='map'></div>
<script>
	var cities = L.layerGroup();

	var mUFSM= L.marker([-29.71949, -53.71435]).bindPopup('Esta é a Universidade de Santa Maria').addTo(cities);
	var mSM = L.marker([-29.69010, -53.80718]).bindPopup('Esta é a cidade de Santa Maria-RS').addTo(cities);
	var mRIA= L.marker([-29.71123, -53.68996]).bindPopup('Este é o aeroport ode Santa Maria (RIA)').addTo(cities);
	var mBOT = L.marker([-29.71883, -53.72904]).bindPopup('Este é o Jardim Botânico de Santa Maria').addTo(cities);

	var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
	var mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
 
	var streets = L.tileLayer(mbUrl, {id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr});

	var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
		maxZoom: 19,
		attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
	});

	var map = L.map('map', {
		center: [-29.70037, -53.76906],
		zoom: 12,
		layers: [osm, cities]
	});

	var baseLayers = {
		'OpenStreetMap': osm,
		'Streets': streets
	};
	
</script>

</body>
</html>

Quer mais funções e exemplos? Confira aqui: Tutorials – Leaflet – a JavaScript library for interactive maps (leafletjs.com)

Gostou? Compartilhe

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *