Leaflet: uma breve introdução

      Comentários fechados em Leaflet: uma breve introdução

leaflet.PNG

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: ‘&copy; ‘ + 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.