Nesta postagem, adicionaremos um link ao pop-up que exibirá a visualização de satélite no Google Maps. A API para trabalhar com URLs do Google Maps pode ser encontrada aqui: https://developers.google.com/maps/documentation/urls/guide.
1. Adicionando link na pop-up
Para adicionar um link para marcador no pop-up, modificamos o código JavaScript que cria a camada:
var towns = L.geoJSON(trail_stops,
{pointToLayer: function(feature, latlng){
return L.circleMarker(latlng, {radius: 5, color: '#00008b',
fillOpacity: 0.5});
},
onEachFeature: function( feature, layer){
var townName = feature.properties.name;
var elevation = feature.properties.elev_in_m;
var lat = feature.properties.prim_lat_d;
var lon = feature.properties.prim_lon_1;
var url = 'https://www.google.com/maps/@?api=1&map_action=map¢er=' +
lat + ',' + lon + '&zoom=15&basemap=satellite';
layer.bindPopup('Name: ' +
townName + '' + '
' +
'
Elevation: ' + elevation +
'
Lat/Lon: ' + lat + ' , ' + lon);
layer.on('mouseover', function() {layer.openPopup();});
//layer.on('mouseout', function() {layer.closePopup();});
}
});
As linhas 11 e 12 configuram o URL. Quando construído no loop onEachFeature, um exemplo se parece com isto:
Esta URL fará com que o mapa centralize a visão nas coordenadas dadas com um nível de zoom de 15. O parâmetro basemap=satellite ajusta o mapa a uma visão satélite. Outras opções são roadmap (o padrão) e terrain.
Nas linhas 13 a 14, o link é construído usando a URL base e os dados de coordenadas de nossa camada. A parte Elevation e Lat / Lon definadas para a pop-up permanecem inalteradas.
A linha 18 é comentada para fazer o pop-up ficar visível quando o mouse é movido. Isso nos permite clicar no link. O pop-up permanece até que outro receba o evento mouseover ou você o feche clicando no “x”.
2. Código
Para baixar o código descrito acima, clique aqui.
3. YouTube
Você pode também assistir o que foi apresentado nesse post no YouTube: