Measuring the distance between points

Spherical distance is the shortest distance between two features on the surface of a sphere. When measuring the distance between two points, the distance between each feature is measured as point-to-point without regard to the distance along a networked path, such as a road network. Point distance analysis can be used to measure the distance between two cities or compare the distances between schools and public parks.

Your Turn

Let's use Mapbox and Turf.js to calculate the distance between two points on map.

Tools we’ll use:

Text Editor (Atom, VSCode, JSFiddle) to write and edit your code.‍
Mapbox account
Turf.js. Turf is the JavaScript library you'll be using today to add analysis to your map.

Step 1. Initialize your map

Open a text editor and create a file called index.html. Set up the document by copying and pasting this template code below into your new HTML file.

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Point Distance</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src='https://unpkg.com/@turf/turf/turf.min.js'></script>
    <script src='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css' rel='stylesheet' />
  </head>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }

    #map-overlay {
      position: absolute;
      top: 0;
      right: 0;
      background: rgba(255, 255, 255, 0.8);
      margin-right: 20px;
      margin-top: 20px;
      padding: 10px 0 0 10px;
      font-family: Arial, sans-serif;
      overflow: auto;
      width: 200px;
      height: 50px;
      border-radius: 3px;
    }

  </style>

  <body>
    <div id='map'></div>
    <div id='map-overlay'>Distance: </div>
    <script>
      mapboxgl.accessToken = 'pk.eyJ1IjoibWpkYW5pZWxzb24iLCJhIjoiY2tkNm4wMTdoMml2bDJzbXlvZGp4YW0xcyJ9.gVoNxvWvLwK2Ev6ukzArsQ';
      var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-89.384, 43.101],
        zoom: 5
      });

      //YOUR TURN: Replace var to = [lng, lat] with the lng/lat for Madison, WI [-89.384, 43.101] 
      //YOUR TURN: Replace var to = [lng, lat] with the lng/lat for Chicago, Il [-87.627, 41.919] 

      var to = [lng, lat] //lng, lat
      var from = [lng, lat] //lng, lat 

      var greenMarker = new mapboxgl.Marker({
          color: 'green'
        })
        .setLngLat(to) // marker position using variable 'to'
        .addTo(map); //add marker to map

      var purpleMarker = new mapboxgl.Marker({
          color: 'purple'
        })
        .setLngLat(from) // marker position using variable 'from'
        .addTo(map); //add marker to map

      var options = {
        units: 'miles'
      }; // units can be degrees, radians, miles, or kilometers, just be sure to change the units in the text box to match. 

      var distance = turf.distance(to, from, options);

      var value = document.getElementById('map-overlay')
      value.innerHTML = "Distance: " + distance.toFixed([2]) + " miles"

    </script>
  </body>

</html>

Save your code and open your HTML document in a browser. Your map should be focused on the Midwest of the United States and have a ‘Distance’ dialog box in the upper right corner.

Step 2. Add latitude, longitude for ‘to’ and ‘from’ points

The turf.distance() function takes three arguments: the longitude and latitude of point A, the longitude and latitude of point B, and the unit of measurement and returns the distance between points A and B.

In your text editor, replace [LNG, LAT] for the ‘to’ variable with the longitude and latitude for Madison, Wisconsin. Next, replace [LNG, LAT] for the ‘from’ variable with the longitude and latitude for Chicago, Illinois.

 var to = [lng, lat] //lng, lat
 var from = [lng, lat] //lng, lat

Save your document and view your changes in the browser.

Step 3. Change the unit of measurement

The turf.distance() function used to calculate the distance between two points can be in degrees, radians, miles, or kilometers. To change the units used to calculate the distance between our two points, navigate to var options = { units: ‘miles’ }; and change the distance unit ‘miles’ for either ‘degrees’, ‘radians’, or ‘kilometers’.

var options = { units: 'miles' };

Next, change the display unit to match the calculated unit of measurement. The final line of code, value.innerHTML = “distance: “ + distance.toFixed([2]) + “miles” changes the results and text displayed in the dialog box on the map. Change ‘miles’ to match the units used to measure the distance between your two points and save your changes.

var value = document.getElementById('map-overlay')
value.innerHTML = "Distance: " + distance.toFixed([2]) + " miles"

Save your edits and open your HTML file in your browser to view your results.

Additional Tutorials

Calculate the distance between two points with turf.length()

Review questions

What is spherical distance?
What is turf.js?
What does turf.distance() measure?

Was this page helpful?