Connecting markers with a line

Construct a line by adding latLng objects from each marker.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Connecting markers with a line</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.1.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.1.0/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>

<script>
L.mapbox.accessToken = '<your access token here>';
var map = L.mapbox.map('map', 'mapbox.dc-markers');

// Wait until the marker layer is loaded in order to build a list of possible
// types. If you are doing this with another featureLayer, you should change
// map.featureLayer to the variable you have assigned to your featureLayer.
map.featureLayer.on('ready', function() {
  // Create a new line with no segments yet and add it to the map.
  var polyline = L.polyline([]).addTo(map);
  // For each point in the map.featureLayer, grab its latitude and longitude
  // values and add them to the line.
  map.featureLayer.eachLayer(function(l) {
    polyline.addLatLng(l.getLatLng());
  });
});
</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