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 © <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: '© <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 © <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: '© <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)