{"id":8067,"date":"2019-04-02T12:43:40","date_gmt":"2019-04-02T15:43:40","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=8067"},"modified":"2020-08-04T18:57:50","modified_gmt":"2020-08-04T21:57:50","slug":"introducao-ao-leaflet-coordenadas-parte-7","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2019\/04\/02\/introducao-ao-leaflet-coordenadas-parte-7\/","title":{"rendered":"Introdu\u00e7\u00e3o ao Leaflet \u2013 Coordenadas"},"content":{"rendered":"

Neste post, faremos algumas coisas:<\/p>\n

– Limpar a exibi\u00e7\u00e3o da precis\u00e3o de coordenadas em nossos pop-ups
\n – Adicionar as coordenadas atuais ao mapa enquanto o mouse se move<\/p>\n

1. Exibi\u00e7\u00e3o de precis\u00e3o das coordenadas<\/strong><\/p>\n

O mapa atual exibe a latitude e longitude com sete casas decimais. Isso \u00e9 mais do que precisamos ver ao exibir informa\u00e7\u00f5es sobre locais:<\/p>\n

\"\"<\/center><\/p>\n

Consertar isso \u00e9 f\u00e1cil usando a fun\u00e7\u00e3o JavaScript toFixed<\/em>. Aqui est\u00e1 um trecho de c\u00f3digo da camada de trilhas:<\/p>\n

\r\n  onEachFeature: function( feature, layer){\r\n      var townName = feature.properties.feature_na;\r\n      var elevation = feature.properties.elev_in_m;\r\n      var lat = feature.properties.prim_lat_d.toFixed(3);\r\n      var lon = feature.properties.prim_lon_1.toFixed(3);\r\n<\/pre>\n
\"\"<\/p>\n
Observe que adicionamos toFixed(3)<\/em> aos valores de latitude e longitude. Isso nos d\u00e1 uma exibi\u00e7\u00e3o melhor, sem alterar os dados em si. Se voc\u00ea for observador, voc\u00ea deve ter notado que n\u00f3s j\u00e1 fizemos isso para a camada placer em nosso \u00faltimo post (parte 6), n\u00f3s apenas n\u00e3o sinalizamos isso.<\/p>\n
2. Exibindo coordenadas no mapa<\/strong><\/p>\n
\u00c0s vezes \u00e9 bom saber onde voc\u00ea est\u00e1 no mundo. Para fazer isso, adicionaremos uma exibi\u00e7\u00e3o das coordenadas do mapa que s\u00e3o atualizadas conforme movemos o mouse.<\/p>\n
Para fazer isso, precisamos criar um div que seja filho do nosso div mapDIV. Tamb\u00e9m precisamos estiliz\u00e1-lo para configurar sua localiza\u00e7\u00e3o:<\/p>\n
\r\nvar coordDIV = document.createElement('div');\r\ncoordDIV.id = 'mapCoordDIV';\r\ncoordDIV.style.position = 'absolute';\r\ncoordDIV.style.bottom = '0';\r\ncoordDIV.style.left = '0';\r\ncoordDIV.style.zIndex = '900';\r\n\r\ndocument.getElementById('mapDIV').appendChild(coordDIV);\r\n<\/pre>\n
Isso configura nosso local de exibi\u00e7\u00e3o no canto inferior esquerdo do mapa. O zIndex <\/em>de 900 garante que seja exibido em cima de todo o resto.<\/p>\n
Em seguida, precisamos configurar o evento para fazer a captura e exibi\u00e7\u00e3o real das coordenadas \u00e0 medida que o mouse se move.<\/p>\n
\r\n\/\/ Setup the event to capture and display mouse movements\r\n  map.on('mousemove', function(e){\r\n      var lat = e.latlng.lat.toFixed(3);\r\n      var lon = e.latlng.lng.toFixed(3);\r\n      document.getElementById('mapCoordDIV').innerHTML = lat + ' , ' + lon;\r\n       });\r\n<\/pre>\n
\"\"<\/p>\n
Voc\u00ea pode ter notado um problema. A exibi\u00e7\u00e3o de coordenadas ocupa o mesmo lugar que a barra de escalas. Isso ocorre porque, por padr\u00e3o, o controle da barra de escala ocupa o canto inferior esquerdo do mapa. Vamos mover a tela de coordenadas ajustando as posi\u00e7\u00f5es:<\/p>\n
\r\ncoordDIV.style.bottom = '1px';\r\ncoordDIV.style.left = '150px';\r\n<\/pre>\n
\"\"<\/p>\n
Com isso o coordDIV <\/em>sobe 1 pixel e se desloca 150px \u00e0 direita, e assim n\u00e3o est\u00e1 mais atingindo a barra de escala, mas a fonte n\u00e3o est\u00e1 totalmente leg\u00edvel, e podemos fazer alguns ajustes adicionando algumas configura\u00e7\u00f5es de estilo no coordDIV<\/em>:<\/p>\n
\r\ncoordDIV.style.color = '#404040';\r\ncoordDIV.style.fontFamily = 'Georgia';\r\ncoordDIV.style.fontSize = '10pt';\r\ncoordDIV.style.backgroundColor = '#fff';\r\n<\/pre>\n
O comando acima faz uma s\u00e9rie de coisas:<\/p>\n
– Define a cor da fonte para um tom de cinza para que n\u00e3o seja t\u00e3o intrusivo
\n– Altera a fonte para a Ge\u00f3rgia (apenas por divers\u00e3o)
\n– Define o tamanho da fonte para 10 pt
\n– Altera a cor de fundo do div para branco para que apare\u00e7a melhor no mapa<\/p>\n
3. O C\u00f3digo<\/strong><\/p>\n
O c\u00f3digo completo pode ser baixado aqui<\/a>.<\/p>\n
4. YouTube<\/strong><\/p>\n
Se voc\u00ea quiser, pode ver o processo detalhado acima no YouTube:<\/p>\n

\n