Distance between two markers

Calculate the distance between two points in meters using distanceTo.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Distance between two markers</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
pre.ui-distance {
  position:absolute;
  bottom:10px;
  left:10px;
  padding:5px 10px;
  background:rgba(0,0,0,0.5);
  color:#fff;
  font-size:11px;
  line-height:18px;
  border-radius:3px;
  }
</style>
<div id='map'></div>
<pre id='distance' class='ui-distance'>Click to place a marker</pre>

<script>
L.mapbox.accessToken = '<your access token here>';
var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([38.9, -77], 12);

// Start with a fixed marker.
var fixedMarker = L.marker(new L.LatLng(38.9131775, -77.032544), {
    icon: L.mapbox.marker.icon({
        'marker-color': 'ff8888'
    })
}).bindPopup('Mapbox DC').addTo(map);

// Store the fixedMarker coordinates in a variable.
var fc = fixedMarker.getLatLng();

// Create a featureLayer that will hold a marker and linestring.
var featureLayer = L.mapbox.featureLayer().addTo(map);

// When a user clicks on the map we want to
// create a new L.featureGroup that will contain a
// marker placed where the user selected the map and
// a linestring that draws itself between the fixedMarkers
// coordinates and the newly placed marker.
map.on('click', function(ev) {
    // ev.latlng gives us the coordinates of
    // the spot clicked on the map.
    var c = ev.latlng;

    var geojson = {
      type: 'FeatureCollection',
      features: [
        {
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [c.lng, c.lat]
          },
          "properties": {
            "marker-color": "#ff8888"
          }
        }, {
          "type": "Feature",
          "geometry": {
            "type": "LineString",
            "coordinates": [
              [fc.lng, fc.lat],
              [c.lng, c.lat]
            ]
          },
          "properties": {
            "stroke": "#000",
            "stroke-opacity": 0.5,
            "stroke-width": 4
          }
        }
      ]
    };

    featureLayer.setGeoJSON(geojson);

    // Finally, print the distance between these two points
    // on the screen using distanceTo().
    var container = document.getElementById('distance');
    container.innerHTML = (fc.distanceTo(c)).toFixed(0) + 'm';
});
</script>
to create your own custom map and use it in this example.
Use this example by copying its source into your own HTML page and replacing the Map ID with one of your own from your projects. Having trouble with JavaScript? Try out Codecademy or contact our support team.
Copy example