Leaflet
| Leaflet | |
|---|---|
 | |
| Desenvolvedor | Volodymyr Agafonkin |
| Lançamento | 13 de maio de 2011 (12 anos) |
| Sistema operacional | JavaScript |
| Licença | BSD |
| Página oficial | leafletjs |
Leaflet é uma biblioteca JavaScript de código aberto usada para construir aplicativos virtuais de mapeamento. Lançado pela primeira vez em 2011,[1] ele suporta a maioria das plataformas móveis e desktop, como HTML5 e CSS3. Entre seus usuários estão FourSquare, Pinterest e Flickr.
O Leaflet permite que desenvolvedores sem experiência em GIS exibam facilmente mapas da web em blocos hospedados em um servidor público, com sobreposições de blocos opcionais. Ele pode carregar dados de recursos de arquivos GeoJSON, estilizá-los e criar camadas interativas, como marcadores com pop-ups quando clicados.
É desenvolvido por Volodymyr Agafonkin, que ingressou no Mapbox em 2013.[2]
Uso[editar | editar código-fonte]
Um uso típico de Leaflet envolve vincular um elemento "mapa" do Leaflet a um elemento HTML, como um div. Camadas e marcadores são então adicionados ao elemento do mapa.
<html>
<head>
<title>Leaflet Map Example</title>
<!-- Link to Leaflet CSS file -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<!-- Link to Leaflet JavaScript file -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<style>
#map {
height: 250px;
width: 400px;
border: 1px solid gray;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// Initialize the map
var map = L.map('map').setView([51.505, -0.09], 13);
// Add the tile layer (you can choose a different map style by changing the URL)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Add a circle overlay with a specific radius and color
var circle = L.circle([51.508, -0.11], {
color: 'red',
radius: 500 // Radius in meters
}).addTo(map);
// Add a marker with a popup
var marker = L.marker([51.5, -0.09]).addTo(map)
.bindPopup('<b>Hello World!</b><br/> I am a popup.');
</script>
</body>
</html>
Neste exemplo de código, a própria biblioteca Leaflet pode ser acessada por meio da variável L.
Características[editar | editar código-fonte]
O Leaflet oferece suporte nativo a camadas do Web Map Service (WMS), camadas GeoJSON, camadas vetoriais e camadas Tile. Muitos outros tipos de camadas são suportados através de plugins.
Como outras bibliotecas de mapas da web, o modelo de exibição básico implementado pelo Leaflet é um mapa base, mais zero ou mais sobreposições translúcidas, com zero ou mais objetos vetoriais exibidos no topo.
Elementos[editar | editar código-fonte]
Os principais tipos de objetos Leaflet são:[3]
- Tipos raster (TileLayer e ImageOverlay)
- Tipos de vetor (Path, Polygon e tipos específicos, como Circle)
- Tipos agrupados (LayerGroup, FeatureGroup e GeoJSON)
- Controles (Zoom, Layers, etc.)
Há também uma variedade de classes utilitárias como interfaces para gerenciamento de projeções, transformações e interação com o DOM.
Suporte para formatos GIS[editar | editar código-fonte]
Leaflet tem suporte básico para vários formatos padrão GIS, com outros suportados em plug-ins.
| Padrão | Apoiar |
|---|---|
| GeoJSON | Bom suporte central por meio da função geoJson[4]
|
| KML, CSV, WKT, TopoJSON, GPX | Compatível com o plugin Leaflet-Omnivore[5] |
| WMS | Suporte principal por meio do TileLayer. Subtipo WMS[6]
|
| WFS | Não suportado, embora existam plug-ins de terceiros.[7] |
| GML | Não suportado.[8] |
[editar | editar código-fonte]
O Leaflet 0.7 é compatível com Chrome, Firefox, Safari 5+, Opera 12+ e IE 7–11.[9]
Exemplos de recursos úteis[editar | editar código-fonte]
O onEachFeature do Leaflet é bastante útil ao lidar, por exemplo, com dados geojson. A função contém dois parâmetros: "feature" e "layer". "recurso" nos permite acessar cada objeto dentro do geojson e "camada" nos permite adicionar pop-ups, dicas de ferramentas etc.
Um exemplo em javascript é fornecido abaixo:
let geoJson = L.geoJSON(geoJsonData, {weight:2,
onEachFeature: getFeature,
style: getStyle
}).addTo(map);
const getFeature= (feature, layer) =>{
if (!feature.properties.name) return
layer.bindTooltip(feature.properties.cityName);
layer.bindPopup(
`
<ul>
<li>Name: ${feature.properties.cityName}</li>
<li>Population: ${feature.properties.population}</li>
</ul>
`
)
Também é possível adicionar a palavra-chave "async" à função getFeature para usar promessas como fetch(). Podemos utilizar propriedades em cada objeto do geojson para criar jsonqueries customizados e obter, por exemplo, informações específicas da cidade e exibi-las usando layer.bindTooltip, layer.bindPopup etc.
Referências
- ↑ Lovelace, Robin. «Testing web map APIs - Google vs OpenLayers vs Leaflet». Consultado em 3 de novembro de 2018. Arquivado do original em 3 de novembro de 2017
- ↑ MacWright, Tom (6 de agosto de 2014). «Leaflet Creator Vladimir Agafonkin Joins MapBox». Consultado em 3 de novembro de 2018
- ↑ «Leaflet API reference». Consultado em 3 de novembro de 2018
- ↑ «Using GeoJSON with Leaflet». Consultado em 3 de novembro de 2018
- ↑ «leaflet-omnivore». 5 de outubro de 2021 – via GitHub
- ↑ «TileLayer.WMS». Consultado em 3 de novembro de 2018
- ↑ «Leaflet with WFS Example». 19 de julho de 2019 – via GitHub
- ↑ «Support for GML». 23 de junho de 2012. Consultado em 3 de novembro de 2018
- ↑ «Features». Consultado em 3 de novembro de 2018