leaflet-playground

HTML

<script src="https://unpkg.com/jquery@latest/dist/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<div class="map"></div>

CSS

.map {
  width: 100%;
  height: 480px;
}

JavaScript

const getData = async (coords) => {
	const response = await fetch(`https://router.project-osrm.org/route/v1/driving/${coords.join(';')}?overview=full&steps=true&geometries=geojson`);
  const data = await response.json();
  return data.routes[0].geometry.coordinates
}

const coords = [[59.84660399,30.29496392], [59.82934196,30.42423701], [59.83567701,30.38064206]];
const map = L.map(document.querySelector('.map'), {
  center: L.latLng(coords[0]),
  zoom: 10,
  layers: [L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')]
});

getData(coords).then(data => {
	L.polyline(data, {color: 'red'}).addTo(map);
})