Leaflet é hoje em dia uma das livrarias javascript open source mais importante para a criação de mapas interactivos na net. Actualmente chegamos à versão actualizada 1.2.0 porque a versão anterior tinha alguns problemas con os diferentes plugins de que a livraria ia-se servir para se alargar para funcionalidades mais especificas para fazer webmapping.
Ao olhar para o tutorial oficial eis uma maneira rapida para publicar mapas no web, enquant analizamos o código mão à mão com a publicação de um basemap.
A primeira coisa à fazer é arranjar os links que apontam ao motor da livraria js, aqui se utilisa a versào CDN e os seus CSS. Realmente antes de começar é preciso pôr no código html os seguintes tag.
Lembrem-se. Leaflet encoraja o uso dos lins CDN (Content Dlivery Networks) con inclusão do Subresource Integrity, ou seja uma stringa que permite aos browser de controlar que o conteúdo dos files que se vão carregar para as livrarias nao sejam manipulados.
| <!- Leaflet’s CSS –>
<link rel=“stylesheet” href=“https://unpkg.com/leaflet@1.2.0/dist/leaflet.css” integrity=“sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==” crossorigin=“”/> |
| <!– Make sure you put this AFTER Leaflet’s CSS –>
<script src=“https://unpkg.com/leaflet@1.2.0/dist/leaflet.js” integrity=“sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==” crossorigin=“”></script> |
Na secçao <head> lembramos de inserir a parte do style para o objecto mapa:
| <style type=”text/css”> html, body,#map { height: 100%; width: 100% } </style> |
Este ultimo será declarado no <body> assim como mostrado:
| <div id=”map”></div> |
Ao mesmo tempo sempre no <body> vamos inserir o coração do código onde os commandos javascript vão ser executados para voltarem a chamar as livrarias leaflet.
|
<script>
var map = L.map(‘map’).setView([48.854716, 2.349014 ], 14);
mapLink = ‘<a href=”http://openstreetmap.org”>OpenStreetMap</a>’;
L.tileLayer(
‘http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’, {
attribution: ‘© ‘ + mapLink + ‘ Contributors’,
maxZoom: 18,
}).addTo(map);
</script>
|
Ao analisar simplesmente o script nota-se o uso do metodo setView dentro do qual está possível definir as coordenadas do centro mapa, ao mesmo tempo com tileLayer insertamos o url para extrairmos um simple mapa OpenStreetMap além do zoom que está definido ao valor 18. O objecto map vem posto dentro do metodo addTo que adiciona o layer para que ele se possa visualizar e ser passado no <div> do mapa.
Como resultado final vamos obtener uma bela vista de Paris!
O seguente paso é introducir um marcador. Adicionamos este código aqui em baixo:
| var marker = L.marker([48.854716, 2.349014 ]).addTo(mymap); |
Com resultado:
E se a gente queria introducir um popup também? Fácil !
Utilizamos a função bindPopup, associamos a informaçao que queremos apareça no Popup do marker:
| marker.bindPopup(“<b>Qui c’è Notre Dame de Paris</b>”).openPopup(); |
Claro que para um tutorial basico nao podem faltar polígonos e linhas no mapa. Portanto vamos agregar mais código:
|
var circle = L.circle([48.86096,2.36077], {
color: ‘red’,
fillColor: ‘#f03’,
fillOpacity: 0.5,
radius: 500
}).addTo(map);
var polygon = L.polygon([
[48.85095,2.33506],
[48.84591,2.34232],
[48.84472,2.33852]
]).addTo(map);
var polyline = L.polyline([
[48.86095,2.34506],
[48.85591,2.31232],
]).addTo(map);
|
Va acabar aqui esta panoramica inicial a esta utilissima livraria. As potencialidades dela são tantas e podem ser usadas em diferentes maneiras para o seu WebGIS se tornar o mais versátil e adaptativo possível.