Hoje vamos usar o Turf.js para calcular a distância entre dois pontos ao longo da trilha. O Turf.js é classificado como “Análise geoespacial avançada para navegadores e Node.js.” A distância calculada é uma distância em linha reta em vez de quilômetros de trilha reais.

1. Incluindo o Turf.js

Para calcular a distância, precisamos incluir o Turf.js em nosso projeto. Em vez de instalá-lo localmente, basta adicionar essa linha ao cabeçalho do seu HTML:

  <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>

O Turf.js vem como um único arquivo JavaScript e é bem grande. Se você planeja usá-lo regularmente, considere fazer uma compilação personalizada que contenha apenas os recursos necessários. Você pode encontrar informações sobre como fazer isso no site do Turf.js.

2. Configurando o HTML

Precisamos adicionar dois dropdowns (selecionados): uma para o local “de” e outra para o local “para”. Também criamos um botão “calcular” e um div para conter o resultado:

Calculate distance from: 
    <select id='fromBox'>
    </select>
to: 
    <select id='toBox'>
    </select>
    <input type="button" id="calculate" value="Calculate">
    <div id="distanceResult"></div>

3. Calculando e exibindo a distância

Primeiro, configuramos os dois campos dropdown com a lista de marcos (markers). Para calcular a distância, obtemos as informaçõe “De” e “Para” e passamos as coordenadas como objetos turf.point para a função de distância do Turf.js.

  fromBox = document.getElementById('fromBox');
  toBox = document.getElementById('toBox');
  var featuremap = {};
  for (var i = 0; i < trail_stops['features'].length ; i++){
      feature = trail_stops['features'][i];
      //console.log(feature['properties']['name']);
      featuremap[feature['properties']['name']] = feature['properties'];
      var fromopt = document.createElement('option');
      fromopt.value = feature['properties']['name'];
      fromopt.innerHTML = feature['properties']['name'];
      fromBox.appendChild(fromopt);
      var toopt = document.createElement('option');
      toopt.value = feature['properties']['name'];
      toopt.innerHTML = feature['properties']['name'];
      toBox.appendChild(toopt);
  }

  document.getElementById('calculate').onclick = calculateDistance;

  function calculateDistance(){
      from = fromBox.value;
      to = toBox.value;
      fromobj = featuremap[from];
      toobj = featuremap[to];
      var fromPt = turf.point([fromobj['prim_lon_1'], fromobj['prim_lat_d']]);
      var toPt = turf.point([toobj['prim_lon_1'], toobj['prim_lat_d']]);
      var distance = turf.distance(fromPt, toPt, {units: 'kilometers'});
      console.log(distance)
      var distanceMiles = distance * 0.6214 
      
      document.getElementById('distanceResult').innerHTML = 'Distance is: ' + distance.toFixed(2) +
          ' kilometers (' + distanceMiles.toFixed(2) + ' miles)';
  }

Agora vou explicar o passo a passo do código acima:

  • As linhas 1 a 16 preenchem os campos dropdown usando os dados do arquivo GeoJSON trail_stops.
  • A linha 18 configura o botão calcular para chamar a função calculateDistance (linhas 20 a 33).
  • Nas linhas 21-26, obtemos os marcadores "de"/"para" e usando o featuremap, obtemos a latitude e a longitude para criar dois objetos turf.point. O aviso turf.point é criado especificando a longtiude (valor x) primeiro.
  • A linha 27 calcula a distância e a linha 28 registra-a no console.
  • A linha 29 converte de quilômetros em milhas.
  • As linhas 31 a 32 definem o texto para a div distanceResult.
  • Por último calcula a distância e nos retorna o resultado em quilômetros e milhas, conforme a imagem abaixo:



4. O Código

Para obter o código completo, clique aqui.

5. YouTube

Se você quiser, pode ver esse conteúdo no YouTube: