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:

https://www.google.com/maps/@?api=1&map_action=map¢er=61.1158333,-146.2663889&zoom=10&basemap=satellite

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: