Neste post, faremos algumas coisas:

– Limpar a exibição da precisão de coordenadas em nossos pop-ups
– Adicionar as coordenadas atuais ao mapa enquanto o mouse se move

1. Exibição de precisão das coordenadas

O mapa atual exibe a latitude e longitude com sete casas decimais. Isso é mais do que precisamos ver ao exibir informações sobre locais:

Consertar isso é fácil usando a função JavaScript toFixed. Aqui está um trecho de código da camada de trilhas:

  onEachFeature: function( feature, layer){
      var townName = feature.properties.feature_na;
      var elevation = feature.properties.elev_in_m;
      var lat = feature.properties.prim_lat_d.toFixed(3);
      var lon = feature.properties.prim_lon_1.toFixed(3);

Observe que adicionamos toFixed(3) aos valores de latitude e longitude. Isso nos dá uma exibição melhor, sem alterar os dados em si. Se você for observador, você deve ter notado que nós já fizemos isso para a camada placer em nosso último post (parte 6), nós apenas não sinalizamos isso.

2. Exibindo coordenadas no mapa

Às vezes é bom saber onde você está no mundo. Para fazer isso, adicionaremos uma exibição das coordenadas do mapa que são atualizadas conforme movemos o mouse.

Para fazer isso, precisamos criar um div que seja filho do nosso div mapDIV. Também precisamos estilizá-lo para configurar sua localização:

var coordDIV = document.createElement('div');
coordDIV.id = 'mapCoordDIV';
coordDIV.style.position = 'absolute';
coordDIV.style.bottom = '0';
coordDIV.style.left = '0';
coordDIV.style.zIndex = '900';

document.getElementById('mapDIV').appendChild(coordDIV);

Isso configura nosso local de exibição no canto inferior esquerdo do mapa. O zIndex de 900 garante que seja exibido em cima de todo o resto.

Em seguida, precisamos configurar o evento para fazer a captura e exibição real das coordenadas à medida que o mouse se move.

// Setup the event to capture and display mouse movements
  map.on('mousemove', function(e){
      var lat = e.latlng.lat.toFixed(3);
      var lon = e.latlng.lng.toFixed(3);
      document.getElementById('mapCoordDIV').innerHTML = lat + ' , ' + lon;
       });

Você pode ter notado um problema. A exibição de coordenadas ocupa o mesmo lugar que a barra de escalas. Isso ocorre porque, por padrão, o controle da barra de escala ocupa o canto inferior esquerdo do mapa. Vamos mover a tela de coordenadas ajustando as posições:

coordDIV.style.bottom = '1px';
coordDIV.style.left = '150px';

Com isso o coordDIV sobe 1 pixel e se desloca 150px à direita, e assim não está mais atingindo a barra de escala, mas a fonte não está totalmente legível, e podemos fazer alguns ajustes adicionando algumas configurações de estilo no coordDIV:

coordDIV.style.color = '#404040';
coordDIV.style.fontFamily = 'Georgia';
coordDIV.style.fontSize = '10pt';
coordDIV.style.backgroundColor = '#fff';

O comando acima faz uma série de coisas:

– Define a cor da fonte para um tom de cinza para que não seja tão intrusivo
– Altera a fonte para a Geórgia (apenas por diversão)
– Define o tamanho da fonte para 10 pt
– Altera a cor de fundo do div para branco para que apareça melhor no mapa

3. O Código

O código completo pode ser baixado aqui.

4. YouTube

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