[GLJS-647] Added configuration for waypoint instructions (#313)

API.md

@@ -38,6 +38,8 @@ The Directions control
         -   `options.controls.inputs` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Hide or display the inputs control. (optional, default `true`)
         -   `options.controls.instructions` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Hide or display the instructions control. (optional, default `true`)
         -   `options.controls.profileSwitcher` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Hide or display the default profile switch with options for traffic, driving, walking and cycling. (optional, default `true`)
+    -   `options.instructions` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)?** 
+        -   `options.instructions.showWaypointInstructions` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Hide or display instructions for waypoints in the route. (optional, default `true`)
     -   `options.zoom` **[Number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** If no bbox exists from the geocoder result, the zoom you set here will be used in the flyTo. (optional, default `16`)
     -   `options.language` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** The language of returned turn-by-turn text instructions. See supported languages : <https://docs.mapbox.com/api/navigation/#instructions-languages> (optional, default `"en"`)
     -   `options.placeholderOrigin` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** If set, this text will appear as the placeholder attribute for the origin input element. (optional, default `"Choose a starting place"`)

src/controls/instructions.js

@@ -28,17 +28,21 @@ export default class Instructions {
   render() {
     this.store.subscribe(() => {
       const { hoverMarker, setRouteIndex } = this.actions;
-      const { routeIndex, unit, directions, error, compile } = this.store.getState();
+      const { routeIndex, unit, directions, error, compile, instructions: instructionsOptions } = this.store.getState();
       const shouldRender = !isEqual(directions[routeIndex], this.directions);
 
       if (error) {
         this.container.innerHTML = errorTemplate({ error });
         return;
       }
 
+      const filterStepsBy = instructionsOptions.showWaypointInstructions 
+        ? undefined 
+        : (step) => step.maneuver.type !== 'waypoint';
+
       if (directions.length && shouldRender) {
         const direction = this.directions = directions[routeIndex];
-        const allSteps = utils.getAllSteps(direction);
+        const allSteps = utils.getAllSteps(direction, filterStepsBy);
 
         if (compile) {
           direction.legs.forEach(function(leg) {

src/directions.js

@@ -31,6 +31,8 @@ import Instructions from './controls/instructions';
  * @param {Boolean} [options.controls.inputs=true] Hide or display the inputs control.
  * @param {Boolean} [options.controls.instructions=true] Hide or display the instructions control.
  * @param {Boolean} [options.controls.profileSwitcher=true] Hide or display the default profile switch with options for traffic, driving, walking and cycling.
+ * @param {Object} [options.instructions]
+ * @param {Boolean} [options.instructions.showWaypointInstructions=true] Hide or display instructions for waypoints in the route
  * @param {Number} [options.zoom=16] If no bbox exists from the geocoder result, the zoom you set here will be used in the flyTo.
  * @param {String} [options.language="en"] The language of returned turn-by-turn text instructions. See supported languages : https://docs.mapbox.com/api/navigation/#instructions-languages
  * @param {String} [options.placeholderOrigin="Choose a starting place"] If set, this text will appear as the placeholder attribute for the origin input element.

src/reducers/index.js

@@ -24,6 +24,10 @@ const getInitialState = () => ({
     instructions: true
   },
 
+  instructions: {
+    showWaypointInstructions: true
+  },
+
   // Optional setting to pass options available to mapbox-gl-geocoder
   geocoder: {},
 

src/utils.js

@@ -35,14 +35,20 @@ function createPoint(coordinates, properties) {
   };
 }
 
-function getAllSteps(feature) {
+function getAllSteps(feature, filterBy) {
   return feature.legs.reduce((steps, leg, idx) => {
     if (idx > 0) {
       steps[steps.length - 1].maneuver.type = 'waypoint';
       leg.steps[0].maneuver.type = '';
     }
 
-    return steps.concat(leg.steps)
+    const allSteps = steps.concat(leg.steps);
+
+    if (filterBy) {
+      return allSteps.filter(filterBy);
+    } else {
+      return allSteps;
+    }
   }, []);
 }
 

test/test.instructions.js

@@ -45,6 +45,37 @@ test('Directions#instructionControl', tt => {
     directions.setDestination([-79.39708375091327, 43.677009321432536]);
   });
 
+  tt.test('hide waypoint instructions if showWaypointInstructions equals false', t => {
+    const { directions, container } = setup({
+      instructions: {
+        showWaypointInstructions: false
+      }
+    });
+
+    directions.on('route', once(() => {
+      directions.on('route', once((e) => {
+        t.ok(e.route, 'route is emitted');
+        t.false(
+          container.querySelector('.directions-icon-waypoint'),
+          'instructions for waypoint not shown'
+        );
+        t.end();
+      }));
+
+      directions.addWaypoint(0, {
+        type: 'Feature',
+        geometry: {
+            type: 'Point',
+            coordinates: [-79.41523694152666, 43.68393045837692]
+        },
+        properties: {}
+      });
+    }));
+
+    directions.setOrigin([-79.4486679946892, 43.66968384056892])
+    directions.setDestination([-79.39708375091327, 43.677009321432536]);
+  });
+
   tt.test('error', t => {
     const { directions } = setup();
     t.plan(1);