[WIP] Add text instruction parsing via osrm-text-instructions

css/site.css

@@ -155,7 +155,7 @@
 .leaflet-routing-container {
   position: fixed;
   width: 33.3333%;
-  max-width: 300px;
+  max-width: 340px;
   min-width: 200px;
   padding-right: 0px;
 }
@@ -273,7 +273,7 @@
   right: 0px;
   top: 60px;
   width: 45%;
-  max-width: 300px;
+  max-width: 340px;
   min-width: 200px;
   height: 95%;
   overflow: scroll;
@@ -548,6 +548,10 @@
 	background-color: white;
 }
 
+td.distance {
+  min-width: 60px;
+}
+
 .leaflet-routing-icon {
     background-image: url('../images/osrm.directions.icons.color.svg');
     -webkit-background-size: 455px 20px;
@@ -561,6 +565,10 @@
     height: 20px;
 }
 
+.leaflet-routing-icon.lanes.invalid {
+    filter: invert(50%);
+}
+
 .leaflet-routing-alt-minimized .leaflet-routing-icon {
     background-image: url('../images/osrm.directions.icons.color.svg');
 }

package.json

@@ -36,6 +36,7 @@
     "leaflet-routing-machine": "^3.1.0",
     "leaflet.locatecontrol": "^0.44.0",
     "local-storage": "^1.4.2",
+    "osrm-text-instructions": "^0.0.1",
     "qs": "^6.1.0"
   }
 }

src/index.js

@@ -3,6 +3,7 @@
 var L = require('leaflet');
 var Geocoder = require('leaflet-control-geocoder');
 var LRM = require('leaflet-routing-machine');
+var itineraryBuilder = require('./itinerary_builder');
 var locate = require('leaflet.locatecontrol');
 var options = require('./lrm_options');
 var links = require('./links');
@@ -126,8 +127,10 @@ var plan = new ReversablePlan([], {
   }
 });
 
+L.extend(L.Routing, itineraryBuilder);
+
 // add marker labels
-var lrmControl = L.Routing.control({
+var controlOptions = {
   plan: plan,
   routeWhileDragging: options.lrm.routeWhileDragging,
   lineOptions: options.lrm.lineOptions,
@@ -142,7 +145,30 @@ var lrmControl = L.Routing.control({
   serviceUrl: leafletOptions.services[0].path,
   useZoomParameter: options.lrm.useZoomParameter,
   routeDragInterval: options.lrm.routeDragInterval
-}).addTo(map);
+};
+var router = (new L.Routing.OSRMv1(controlOptions));
+router._convertRouteOriginal = router._convertRoute;
+router._convertRoute = function(responseRoute) {
+  // monkey-patch L.Routing.OSRMv1 until it's easier to overwrite with a hook
+  var resp = this._convertRouteOriginal(responseRoute);
+
+  if (resp.instructions && resp.instructions.length) {
+    var i = 0;
+    responseRoute.legs.forEach(function(leg) {
+      leg.steps.forEach(function(step) {
+        // abusing the text property to save the origina osrm step
+        // for later use in the itnerary builder
+        resp.instructions[i].text = step;
+        i++;
+      });
+    });
+  };
+
+  return resp;
+};
+var lrmControl = L.Routing.control(Object.assign(controlOptions, {
+  router: router
+})).addTo(map);
 var toolsControl = tools.control(localization.get(mergedOptions.language), localization.getLanguages(), options.tools).addTo(map);
 var state = state(map, lrmControl, toolsControl, mergedOptions);
 

src/itinerary_builder.js

@@ -1,38 +1,114 @@
-'use strict';
-
-/*
- * Creats a itinerary container that contains the instructions.
- * This will override the LRM internal build that uses a table as container.
- * However using a table does not work with our theme.
- */
-
-var L = require('leaflet');
-
-var ItineraryBuilder = L.Class.extend({
-  options: {
-    containerClassName: ''
-  },
-  initialize: function (options) {
-    L.setOptions(this, options);
-  },
-  createContainer: function () {
-    return L.DomUtil.create('div', this.options.containerClassName);
-  },
-  createStepsContainer: function () {
-    return L.DomUtil.create('ol', '');
-  },
-  createStep: function (text, distance, icon, steps) {
-    var row = L.DomUtil.create('li', 'osrm-directions-step', steps),
-      td;
-    L.DomUtil.create('span', 'osrm-directions-icon osrm-'+icon+'-icon', row);
-    td = L.DomUtil.create('div', 'osrm-directions-step-maneuver', row);
-    td.appendChild(document.createTextNode(text));
-    td = L.DomUtil.create('div', 'osrm-directions-step-distance', row);
-    td.appendChild(document.createTextNode(distance));
-    return row;
+(function() {
+  'use strict';
+
+  var osrmTextInstructions = require('osrm-text-instructions')();
+
+  function stepToText(step) {
+    try {
+      return osrmTextInstructions.compile(step);
+    } catch(err) {
+      console.log('Error when compiling text instruction', err, step);
+      return undefined;
+    }
   }
-});
 
-module.exports = function (options) {
-  return new ItineraryBuilder(options);
-};
+  function stepToLanes(step) {
+    var lanes = step.intersections[0].lanes;
+
+    if (!lanes) return [];
+
+    return lanes.map(function(l) {
+      var classes = [ 'leaflet-routing-icon', 'lanes'];
+      if (!l.valid) classes.push(['invalid']);
+
+      var icon;
+      switch (l.indications[0]) {
+      case 'right':
+      case 'sharp right':
+        icon = 'turn-right';
+        break;
+      case 'slight right':
+        icon = 'bear-right';
+        break;
+      case 'left':
+      case 'slight-left':
+        icon = 'turn-left';
+        break
+      case 'sharp-left':
+        icon = 'bear-left';
+        break;
+      case 'straight':
+      case 'none':
+      default:
+        icon = 'continue';
+        break;
+      }
+      classes.push('leaflet-routing-icon-' + icon);
+
+      return L.DomUtil.create('span', classes.join(' '));
+    });
+  }
+
+  var L = require('leaflet');
+  L.Routing = L.Routing || {};
+
+  L.Routing.ItineraryBuilder = L.Class.extend({
+    options: {
+      containerClassName: ''
+    },
+
+    initialize: function(options) {
+      L.setOptions(this, options);
+    },
+
+    createContainer: function(className) {
+      var table = L.DomUtil.create('table', className || ''),
+        colgroup = L.DomUtil.create('colgroup', '', table);
+
+      L.DomUtil.create('col', 'leaflet-routing-instruction-icon', colgroup);
+      L.DomUtil.create('col', 'leaflet-routing-instruction-text', colgroup);
+      L.DomUtil.create('col', 'leaflet-routing-instruction-distance', colgroup);
+
+      return table;
+    },
+
+    createStepsContainer: function() {
+      return L.DomUtil.create('tbody', '');
+    },
+
+    createStep: function(text, distance, icon, steps) {
+      var row = L.DomUtil.create('tr', '', steps),
+        span,
+        td;
+
+      // icon
+      td = L.DomUtil.create('td', '', row);
+      span = L.DomUtil.create('span', 'leaflet-routing-icon leaflet-routing-icon-'+icon, td);
+      td.appendChild(span);
+
+      // text instruction
+      td = L.DomUtil.create('td', '', row);
+      td.appendChild(document.createTextNode(stepToText(text)));
+
+      // lanes
+      var l = stepToLanes(text);
+      if (l) {
+        td.appendChild(document.createElement('br'));
+        l.forEach(function(laneIcon) {
+          td.appendChild(laneIcon);
+        });
+      }
+
+      // distance steps
+      // filter distance after arrival
+      if (distance !== '0 m') {
+        td = L.DomUtil.create('td', 'distance', row);
+        td.appendChild(document.createTextNode(distance));
+      }
+
+      return row;
+    }
+  });
+
+  module.exports = L.Routing;
+})();

src/lrm_options.js

@@ -29,7 +29,6 @@ module.exports = {
     stepClassName: 'osrm-directions-step',
     geocodersClassName: 'osrm-directions-inputs',
     createGeocoder: createGeocoder,
-    itineraryBuilder: 'osrm-directions-steps',
     showAlternatives: true,
     useZoomParameter: false,
     routeDragInterval: 200