Neste post vamos “trocar de marcha” e instalar o Leaflet localmente, depois adicionar uma camada de um arquivo GeoPackage.

1. Instalando o Leaflet

Até agora, estamos usando uma versão hospedada no servidor do Leaflet. Em outras palavras, cada vez que carregamos o mapa, é feita uma solicitação para buscar o CSS e o JavaScript do Leaflet.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
  integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
  crossorigin=""/>
  
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
  integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
  crossorigin=""></script>

Existem algumas maneiras de instalar o Leaflet : baixe-o do site ou instale-o npm. Em ambos os casos, você precisará mover os arquivos leaflet.js, leaflet.css e o diretório de images para o local apropriado para o seu site.

Uma vez instalado, o arquivo HTML precisa ser alterado para refletir a localização dos arquivos:

<link rel="stylesheet" href="/stylesheets/leaflet.css" />  
<script src="/js/leaflet.js"></script>

2. Usando o Plugin

Para acessar as camadas do GeoPackage, precisamos usar o plugin leaflet-geopackage. Podemos usá-lo sem instalar como fizemos anteriormente com o Leaflet:

<script src="https://unpkg.com/@ngageoint/leaflet-geopackage@2.0.5/dist/leaflet-geopackage.min.js"></script>

3. Adicionando a camada GeoPackage

O código para adicionar e estilizar a camada é:

	var placer = L.geoPackageFeatureLayer([], {
		  geoPackageUrl: 'code/points.gpkg',
		  layerName: 'points',
		  pointToLayer: function(feature, latlng){
			  return L.circleMarker(latlng, {radius: 5,
											stroke: false,
											fillColor: '#800000',
											fillOpacity: 0.6});
		  },
		  onEachFeature: function( feature, layer){
			  var name = feature.properties.name;			 
			  var lat = feature.properties.prim_lat_d;
			  var lon = feature.properties.prim_lon_1;

			  layer.bindPopup('Name: ' + name +							  
							  '<br/>Lat/Lon: ' + lat + ' , ' + lon);
			  layer.on('mouseover', function() {layer.openPopup();});
			  layer.on('mouseout', function() {layer.closePopup();});
		  }
	  });

A camada é criada especificando a URL (caminho) para o arquivo GeoPackage e fornecendo o nome da camada (points). O restante do código se parece muito com código visto no último post.

Na opção pointToLayer, estilizamos um pouco diferente, removendo o traço (contorno) do círculo e fornecendo uma cor vermelha escura com opacidade de 0,6.

Na opção onEachFeature é semelhante, com exceção dos nomes de campo usados ​​para o pop-up.

A camada pointsé adicionada à lista de superposições, mas inicialmente não é visível. Quando ativado no controle de camada, o mapa se parece com isto:



4. O Código

O código completo pode ser baixado clicando aqui.

5. YouTube

Se você quiser, pode ver o processo detalhado acima no YouTube: