lxbarth/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-hash/v0.2.1/leaflet-hash.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v1.4.0/turf.min.js'></script>
<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 = 'pk.eyJ1IjoibHhiYXJ0aCIsImEiOiJFVXdYcUlvIn0.bbaHTEWlnAwGgyVwJngMdQ';
var map = L.mapbox.map('map', 'examples.map-i86nkdio')
    .setView([19.624, -74.921], 8)
    .addControl(L.mapbox.geocoderControl('mapbox.places', {autocomplete: true}));
var hash = L.hash(map);

var line = {
  "type": "Feature",
  "properties": {
    "stroke": "#000"
  },
  "geometry": {
    "type": "LineString",
    "coordinates": [
      [-76.091308, 18.427501],
      [-76.695556, 18.729501],
      [-76.552734, 19.40443],
      [-74.61914, 19.134789],
      [-73.652343, 20.07657],
      [-73.157958, 20.210656]
    ]
  }
};

var curved = turf.bezier(line);
curved.properties = {
    stroke: "red"
};
var result = {
    'type': 'FeatureCollection',
    'features': [line, curved]
};

var featureLayer = L.mapbox.featureLayer(result).addTo(map);

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>A simple map</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' rel='stylesheet' />
	<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-hash/v0.2.1/leaflet-hash.js'></script>
	<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v1.4.0/turf.min.js'></script>
	<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 = 'pk.eyJ1IjoibHhiYXJ0aCIsImEiOiJFVXdYcUlvIn0.bbaHTEWlnAwGgyVwJngMdQ';
	var map = L.mapbox.map('map', 'examples.map-i86nkdio')
	.setView([19.624, -74.921], 8)
	.addControl(L.mapbox.geocoderControl('mapbox.places', {autocomplete: true}));
	var hash = L.hash(map);

	var line = {
	"type": "Feature",
	"properties": {
	"stroke": "#000"
	},
	"geometry": {
	"type": "LineString",
	"coordinates": [
	[-76.091308, 18.427501],
	[-76.695556, 18.729501],
	[-76.552734, 19.40443],
	[-74.61914, 19.134789],
	[-73.652343, 20.07657],
	[-73.157958, 20.210656]
	]
	}
	};

	var curved = turf.bezier(line);
	curved.properties = {
	stroke: "red"
	};
	var result = {
	'type': 'FeatureCollection',
	'features': [line, curved]
	};

	var featureLayer = L.mapbox.featureLayer(result).addTo(map);

	</script>
	</body>
	</html>