OL3 - OSRM Route

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/ol3/3.10.1/ol.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ol3/3.10.1/ol.min.css">
<div id="map"></div>
<div id="msg">Click to add a point.</div>

CSS

html,body,#map { width:100%; height:100%; margin:0; }
#map {
    position: absolute;
    z-index: 5;
}
#msg{
    position: absolute;
    z-index: 10;
    left: 50%;
    transform: translate(-50%, 5px);
    background-color: rgba(40,40,40,.8);
    padding: 10px;
    color: #eee;
    width: 350px;
    text-align: center;
}

JavaScript

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM({
    					"url": "https://server.arcgisonline.com/ArcGIS/rest/services/" + "World_Imagery" + "/MapServer/tile/{z}/{y}/{x}",
				})
    ],
    view: new ol.View({
        center: [-5685003.99, -3504484.87],
        zoom: 11
    })
});

var vectorSource = new ol.source.Vector();
var vectorLayer = new ol.layer.Vector({
    source: vectorSource
});
map.addLayer(vectorLayer);

var styles = {
  route: new ol.style.Style({
    stroke: new ol.style.Stroke({
      width: 6, color: [40, 40, 40, 0.8]
    })
  }),
  icon: new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 1],
      src: '//openlayers.org/en/v3.10.0/examples/data/icon.png'
    })
  })
};
var points = [];
var msg_el = document.getElementById('msg');
var url_osrm_nearest = 'http://router.project-osrm.org/nearest?loc=';
var url_osrm_route = 'http://router.project-osrm.org/viaroute?loc=';

map.on('singleclick', function(evt){
    console.info(evt.coordinate);
    msg_el.innerHTML = 'Please, wait ...';
	var clicked = evt.coordinate;
    var coord4326 = to4326(clicked);
    var lat_lon = coord4326[1] +','+ coord4326[0];
    //make sure the coord is on street
    getJson(url_osrm_nearest + lat_lon).when({
    	ready: function(response) {
        	console.info(response);
            
            if(response.status === 0){
                var coord_street = response.mapped_coordinate;
                createFeature([coord_street[1], coord_street[0]]);
                var points_length = points.push(coord_street);
                
                if (points_length < 2) {
                	msg_el.innerHTML = 'Click to add another point';
                    return;
                }
                //get the route
                var point1 = points[0].join();
                var point2 = points[1].join();
                getJson(url_osrm_route +point1+'&loc='+point2).when({
     ...