jsrouting: mouseover an instruction, highlight the route segment

app/assets/javascripts/routing.js.erb

@@ -10,6 +10,12 @@ var ROUTING_POLYLINE={
     weight: 10
 };
 
+var ROUTING_POLYLINE_HIGHLIGHT={
+    color: '#ff0',
+    opacity: 0.5,
+    weight: 12
+};
+
 
 OSM.RoutingEngines={
     list: []
@@ -171,7 +177,7 @@ OSM.Routing=function(map,name,jqSearch) {
     };
 
     // Take directions and write them out
-    // data = { steps: array of [latlng, sprite number, instruction text, distance in metres] }
+    // data = { steps: array of [latlng, sprite number, instruction text, distance in metres, highlightPolyline] }
     // sprite numbers equate to OSRM's route_instructions turn values
     r.setItinerary=function(data) {
         // Create base table
@@ -200,8 +206,9 @@ OSM.Routing=function(map,name,jqSearch) {
             row.append("<td class='direction i"+step[1]+"'> ");
             row.append("<td class='instruction'>"+step[2]);
             row.append("<td class='distance'>"+dist);
-            with ({ num: i, ll: step[0] }) {
+            with ({ num: i, ll: step[0], lineseg: step[4] }) {
                 row.on('click',function(e) { r.clickTurn(num, ll); });
+                row.hover(function(e){r.highlightSegment(lineseg);}, function(e){r.unhighlightSegment();});
             };
             $('#turnbyturn').append(row);
             cumulative+=step[3];
@@ -212,6 +219,13 @@ OSM.Routing=function(map,name,jqSearch) {
     r.clickTurn=function(num,latlng) {
         r.popup=L.popup().setLatLng(latlng).setContent("<p>"+(num+1)+"</p>").openOn(r.map);
     };
+    r.highlightSegment=function(lineseg){
+        if (r.highlighted) map.removeLayer(r.highlighted);
+        r.highlighted=L.polyline(lineseg, ROUTING_POLYLINE_HIGHLIGHT).addTo(r.map);
+    }
+    r.unhighlightSegment=function(){
+        if (r.highlighted) map.removeLayer(r.highlighted);
+    }
     r.formatDistance=function(m) {
         if      (m < 1000 ) { return Math.round(m) + "m"; }
         else if (m < 10000) { return (m/1000.0).toFixed(1) + "km"; }

app/assets/javascripts/routing_engines/graphhopper.js

@@ -42,7 +42,7 @@ GraphHopperEngine.prototype.createConfig = function() {
                 instrText += instr.descriptions[i];
                 var latlng = instr.latLngs[i];
                 var distInMeter = instr.distances[i];
-                steps.push([{lat: latlng[0], lng: latlng[1]}, instrCode, instrText, distInMeter]);
+                steps.push([{lat: latlng[0], lng: latlng[1]}, instrCode, instrText, distInMeter, []]); // TODO does graphhopper map instructions onto line indices?
             }
             router.setItinerary({ steps: steps, distance: data.route.distance, time: data.route['time']/1000 });
             return true;

app/assets/javascripts/routing_engines/mapquest.js

@@ -60,14 +60,27 @@ MapQuestEngine.prototype.createConfig = function() {
             }
             router.setPolyline(poly);
 
-            // data.shape.maneuverIndexes links turns to polyline positions
+            // data.route.shape.maneuverIndexes links turns to polyline positions
-            // data.legs[0].maneuvers is list of turns
+            // data.route.legs[0].maneuvers is list of turns
             var steps=[];
             var mq=data.route.legs[0].maneuvers;
             for (var i=0; i<mq.length; i++) {
                 var s=mq[i];
-                var d=(i==mq.length-1) ? 15: this.MQ_SPRITE_MAP[s.turnType];
+                var d;
-                steps.push([L.latLng(s.startPoint.lat, s.startPoint.lng), d, s.narrative, s.distance*1000]);
+                var linesegstart, linesegend, lineseg;
+                linesegstart = data.route.shape.maneuverIndexes[i];
+                if (i==mq.length-1) {
+                    d = 15;
+                    linesegend = linesegstart + 1;
+                } else {
+                    d = this.MQ_SPRITE_MAP[s.turnType];
+                    linesegend = data.route.shape.maneuverIndexes[i+1] + 1;
+                }
+                lineseg = [];
+                for (var j=linesegstart; j<linesegend; j++) {
+                    lineseg.push(L.latLng(data.route.shape.shapePoints[j*2], data.route.shape.shapePoints[j*2+1]));
+                }
+                steps.push([L.latLng(s.startPoint.lat, s.startPoint.lng), d, s.narrative, s.distance*1000, lineseg]);
             }
             router.setItinerary( { steps: steps, distance: data.route.distance*1000, time: data.route['time'] });
             return true;

app/assets/javascripts/routing_engines/osrm.js

@@ -38,12 +38,18 @@ OSRMEngine.prototype.createConfig = function() {
             var steps=[];
             for (i=0; i<data.route_instructions.length; i++) {
                 var s=data.route_instructions[i];
+                var linesegend;
                 var instCodes=s[0].split('-');
                 var instText="<b>"+(i+1)+".</b> ";
                 instText+=TURN_INSTRUCTIONS[instCodes[0]];
                 if (instCodes[1]) { instText+="exit "+instCodes[1]+" "; }
                 if (instCodes[0]!=15) { instText+=s[1] ? "<b>"+s[1]+"</b>" : I18n.t('javascripts.directions.instructions.unnamed'); }
-                steps.push([line[s[3]], s[0].split('-')[0], instText, s[2]]);
+                if ((i+1)<data.route_instructions.length) {
+                    linesegend = data.route_instructions[i+1][3] + 1;
+                } else {
+                    linesegend = s[3] + 1;
+                }
+                steps.push([line[s[3]], s[0].split('-')[0], instText, s[2], line.slice(s[3], linesegend)]);
             }
             if (steps.length) router.setItinerary({ steps: steps, distance: data.route_summary.total_distance, time: data.route_summary.total_time });
             return true;