{"id":8118,"date":"2019-04-09T07:30:14","date_gmt":"2019-04-09T10:30:14","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=8118"},"modified":"2020-09-04T17:05:27","modified_gmt":"2020-09-04T20:05:27","slug":"introducao-ao-leaflet-adicionando-link-parte-10","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2019\/04\/09\/introducao-ao-leaflet-adicionando-link-parte-10\/","title":{"rendered":"Introdu\u00e7\u00e3o ao Leaflet \u2013 Adicionando link"},"content":{"rendered":"

Nesta postagem, adicionaremos um link ao pop-up que exibir\u00e1 a visualiza\u00e7\u00e3o de sat\u00e9lite no Google Maps. A API para trabalhar com URLs do Google Maps pode ser encontrada aqui: https:\/\/developers.google.com\/maps\/documentation\/urls\/guide<\/a>.<\/p>\n

1. Adicionando link na pop-up<\/strong><\/p>\n

Para adicionar um link para marcador no pop-up, modificamos o c\u00f3digo JavaScript que cria a camada:<\/p>\n

\r\nvar towns = L.geoJSON(trail_stops, \r\n  {pointToLayer: function(feature, latlng){\r\n      return L.circleMarker(latlng, {radius: 5, color: '#00008b',\r\n                                      fillOpacity: 0.5});\r\n  },\r\n  onEachFeature: function( feature, layer){\r\n      var townName = feature.properties.name;\r\n      var elevation = feature.properties.elev_in_m;\r\n      var lat = feature.properties.prim_lat_d;\r\n      var lon = feature.properties.prim_lon_1;\r\n      var url = 'https:\/\/www.google.com\/maps\/@?api=1&map_action=map¢er=' + \r\n                lat + ',' + lon + '&zoom=15&basemap=satellite';\r\n      layer.bindPopup('Name: ' + \r\n                      townName + '<\/a>' + '' +\r\n                      'Elevation: ' + elevation +\r\n                      'Lat\/Lon: ' + lat + ' , ' + lon);\r\n      layer.on('mouseover', function() {layer.openPopup();});\r\n      \/\/layer.on('mouseout', function() {layer.closePopup();});\r\n  }\r\n  });\r\n<\/pre>\n
As linhas 11 e 12 configuram o URL. Quando constru\u00eddo no loop onEachFeature<\/em>, um exemplo se parece com isto:<\/p>\n
Esta URL far\u00e1 com que o mapa centralize a vis\u00e3o nas coordenadas dadas com um n\u00edvel de zoom de 15. O par\u00e2metro basemap=satellite<\/em> ajusta o mapa a uma vis\u00e3o sat\u00e9lite. Outras op\u00e7\u00f5es s\u00e3o roadmap (o padr\u00e3o) e terrain.<\/p>\n
Nas linhas 13 a 14, o link \u00e9 constru\u00eddo 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.<\/p>\n
A linha 18 \u00e9 comentada para fazer o pop-up ficar vis\u00edvel quando o mouse \u00e9 movido. Isso nos permite clicar no link. O pop-up permanece at\u00e9 que outro receba o evento mouseover<\/em> ou voc\u00ea o feche clicando no \u201cx\u201d.<\/p>\n

\n\"\"
\n<\/center><\/p>\n
2. C\u00f3digo<\/strong><\/p>\n
Para baixar o c\u00f3digo descrito acima, clique aqui<\/a>.<\/p>\n
3. YouTube<\/strong><\/p>\n
Voc\u00ea pode tamb\u00e9m assistir o que foi apresentado nesse post no YouTube:<\/p>\n

\n
https:\/\/www.google.com\/maps\/@?api=1&map_action=map\u00a2er=61.1158333,-146.2663889&zoom=10&basemap=satellite<\/a><\/p>\n