Skip to content

Commit 7bf96cb

Browse files
freenerdfreenerd
authored
Merge pull request #187 from Project-OSRM/osrm-text-instructions
[WIP] Add text instruction parsing via osrm-text-instructions
2 parents 4e54a79 + 6a43796 commit 7bf96cb

File tree

8 files changed

+627
-66
lines changed

8 files changed

+627
-66
lines changed

‎bundle.js

Lines changed: 8 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎bundle.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎bundle.raw.js

Lines changed: 467 additions & 16 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/site.css

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@
155155
.leaflet-routing-container {
156156
position: fixed;
157157
width: 33.3333%;
158-
max-width: 300px;
158+
max-width: 340px;
159159
min-width: 200px;
160160
padding-right: 0px;
161161
}
@@ -273,7 +273,7 @@
273273
right: 0px;
274274
top: 60px;
275275
width: 45%;
276-
max-width: 300px;
276+
max-width: 340px;
277277
min-width: 200px;
278278
height: 95%;
279279
overflow: scroll;
@@ -548,6 +548,10 @@
548548
background-color: white;
549549
}
550550

551+
td.distance {
552+
min-width: 60px;
553+
}
554+
551555
.leaflet-routing-icon {
552556
background-image: url('../images/osrm.directions.icons.color.svg');
553557
-webkit-background-size: 455px 20px;
@@ -561,6 +565,10 @@
561565
height: 20px;
562566
}
563567

568+
.leaflet-routing-icon.lanes.invalid {
569+
filter: invert(50%);
570+
}
571+
564572
.leaflet-routing-alt-minimized .leaflet-routing-icon {
565573
background-image: url('../images/osrm.directions.icons.color.svg');
566574
}

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"leaflet-routing-machine": "^3.1.0",
3737
"leaflet.locatecontrol": "^0.44.0",
3838
"local-storage": "^1.4.2",
39+
"osrm-text-instructions": "^0.0.1",
3940
"qs": "^6.1.0"
4041
}
4142
}

‎src/index.js

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
var L = require('leaflet');
44
var Geocoder = require('leaflet-control-geocoder');
55
var LRM = require('leaflet-routing-machine');
6+
var itineraryBuilder = require('./itinerary_builder');
67
var locate = require('leaflet.locatecontrol');
78
var options = require('./lrm_options');
89
var links = require('./links');
@@ -126,8 +127,10 @@ var plan = new ReversablePlan([], {
126127
}
127128
});
128129

130+
L.extend(L.Routing, itineraryBuilder);
131+
129132
// add marker labels
130-
var lrmControl = L.Routing.control({
133+
var controlOptions = {
131134
plan: plan,
132135
routeWhileDragging: options.lrm.routeWhileDragging,
133136
lineOptions: options.lrm.lineOptions,
@@ -142,7 +145,30 @@ var lrmControl = L.Routing.control({
142145
serviceUrl: leafletOptions.services[0].path,
143146
useZoomParameter: options.lrm.useZoomParameter,
144147
routeDragInterval: options.lrm.routeDragInterval
145-
}).addTo(map);
148+
};
149+
var router = (new L.Routing.OSRMv1(controlOptions));
150+
router._convertRouteOriginal = router._convertRoute;
151+
router._convertRoute = function(responseRoute) {
152+
// monkey-patch L.Routing.OSRMv1 until it's easier to overwrite with a hook
153+
var resp = this._convertRouteOriginal(responseRoute);
154+
155+
if (resp.instructions && resp.instructions.length) {
156+
var i = 0;
157+
responseRoute.legs.forEach(function(leg) {
158+
leg.steps.forEach(function(step) {
159+
// abusing the text property to save the origina osrm step
160+
// for later use in the itnerary builder
161+
resp.instructions[i].text = step;
162+
i++;
163+
});
164+
});
165+
};
166+
167+
return resp;
168+
};
169+
var lrmControl = L.Routing.control(Object.assign(controlOptions, {
170+
router: router
171+
})).addTo(map);
146172
var toolsControl = tools.control(localization.get(mergedOptions.language), localization.getLanguages(), options.tools).addTo(map);
147173
var state = state(map, lrmControl, toolsControl, mergedOptions);
148174

‎src/itinerary_builder.js

Lines changed: 112 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,114 @@
1-
'use strict';
2-
3-
/*
4-
* Creats a itinerary container that contains the instructions.
5-
* This will override the LRM internal build that uses a table as container.
6-
* However using a table does not work with our theme.
7-
*/
8-
9-
var L = require('leaflet');
10-
11-
var ItineraryBuilder = L.Class.extend({
12-
options: {
13-
containerClassName: ''
14-
},
15-
initialize: function (options) {
16-
L.setOptions(this, options);
17-
},
18-
createContainer: function () {
19-
return L.DomUtil.create('div', this.options.containerClassName);
20-
},
21-
createStepsContainer: function () {
22-
return L.DomUtil.create('ol', '');
23-
},
24-
createStep: function (text, distance, icon, steps) {
25-
var row = L.DomUtil.create('li', 'osrm-directions-step', steps),
26-
td;
27-
L.DomUtil.create('span', 'osrm-directions-icon osrm-'+icon+'-icon', row);
28-
td = L.DomUtil.create('div', 'osrm-directions-step-maneuver', row);
29-
td.appendChild(document.createTextNode(text));
30-
td = L.DomUtil.create('div', 'osrm-directions-step-distance', row);
31-
td.appendChild(document.createTextNode(distance));
32-
return row;
1+
(function() {
2+
'use strict';
3+
4+
var osrmTextInstructions = require('osrm-text-instructions')();
5+
6+
function stepToText(step) {
7+
try {
8+
return osrmTextInstructions.compile(step);
9+
} catch(err) {
10+
console.log('Error when compiling text instruction', err, step);
11+
return undefined;
12+
}
3313
}
34-
});
3514

36-
module.exports = function (options) {
37-
return new ItineraryBuilder(options);
38-
};
15+
function stepToLanes(step) {
16+
var lanes = step.intersections[0].lanes;
17+
18+
if (!lanes) return [];
19+
20+
return lanes.map(function(l) {
21+
var classes = [ 'leaflet-routing-icon', 'lanes'];
22+
if (!l.valid) classes.push(['invalid']);
23+
24+
var icon;
25+
switch (l.indications[0]) {
26+
case 'right':
27+
case 'sharp right':
28+
icon = 'turn-right';
29+
break;
30+
case 'slight right':
31+
icon = 'bear-right';
32+
break;
33+
case 'left':
34+
case 'slight-left':
35+
icon = 'turn-left';
36+
break
37+
case 'sharp-left':
38+
icon = 'bear-left';
39+
break;
40+
case 'straight':
41+
case 'none':
42+
default:
43+
icon = 'continue';
44+
break;
45+
}
46+
classes.push('leaflet-routing-icon-' + icon);
47+
48+
return L.DomUtil.create('span', classes.join(' '));
49+
});
50+
}
51+
52+
var L = require('leaflet');
53+
L.Routing = L.Routing || {};
54+
55+
L.Routing.ItineraryBuilder = L.Class.extend({
56+
options: {
57+
containerClassName: ''
58+
},
59+
60+
initialize: function(options) {
61+
L.setOptions(this, options);
62+
},
63+
64+
createContainer: function(className) {
65+
var table = L.DomUtil.create('table', className || ''),
66+
colgroup = L.DomUtil.create('colgroup', '', table);
67+
68+
L.DomUtil.create('col', 'leaflet-routing-instruction-icon', colgroup);
69+
L.DomUtil.create('col', 'leaflet-routing-instruction-text', colgroup);
70+
L.DomUtil.create('col', 'leaflet-routing-instruction-distance', colgroup);
71+
72+
return table;
73+
},
74+
75+
createStepsContainer: function() {
76+
return L.DomUtil.create('tbody', '');
77+
},
78+
79+
createStep: function(text, distance, icon, steps) {
80+
var row = L.DomUtil.create('tr', '', steps),
81+
span,
82+
td;
83+
84+
// icon
85+
td = L.DomUtil.create('td', '', row);
86+
span = L.DomUtil.create('span', 'leaflet-routing-icon leaflet-routing-icon-'+icon, td);
87+
td.appendChild(span);
88+
89+
// text instruction
90+
td = L.DomUtil.create('td', '', row);
91+
td.appendChild(document.createTextNode(stepToText(text)));
92+
93+
// lanes
94+
var l = stepToLanes(text);
95+
if (l) {
96+
td.appendChild(document.createElement('br'));
97+
l.forEach(function(laneIcon) {
98+
td.appendChild(laneIcon);
99+
});
100+
}
101+
102+
// distance steps
103+
// filter distance after arrival
104+
if (distance !== '0 m') {
105+
td = L.DomUtil.create('td', 'distance', row);
106+
td.appendChild(document.createTextNode(distance));
107+
}
108+
109+
return row;
110+
}
111+
});
112+
113+
module.exports = L.Routing;
114+
})();

‎src/lrm_options.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ module.exports = {
2929
stepClassName: 'osrm-directions-step',
3030
geocodersClassName: 'osrm-directions-inputs',
3131
createGeocoder: createGeocoder,
32-
itineraryBuilder: 'osrm-directions-steps',
3332
showAlternatives: true,
3433
useZoomParameter: false,
3534
routeDragInterval: 200

0 commit comments

Comments
 (0)