Merge pull request #137 from mapbox/congestion

Congestion

Author: willwhite

API.md

@@ -28,7 +28,8 @@ The Directions control
     -   `options.accessToken` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Required unless `mapboxgl.accessToken` is set globally (optional, default `null`)
     -   `options.interactive` **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Enable/Disable mouse or touch interactivity from the plugin (optional, default `true`)
     -   `options.profile` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Routing profile to use. Options: `driving-traffic`, `driving`, `walking`, `cycling` (optional, default `"driving-traffic"`)
-    -   `options.alternatives` **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Whether to enable alternatives. (optional, default `true`)
+    -   `options.alternatives` **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Whether to enable alternatives. (optional, default `false`)
+    -   `options.congestion` **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Whether to enable congestion along the route line. (optional, default `false`)
     -   `options.unit` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Measurement system to be used in navigation instructions. Options: `imperial`, `metric` (optional, default `"imperial"`)
     -   `options.geocoder` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)?** Pass options available to mapbox-gl-geocoder as [documented here](https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#mapboxglgeocoder).
     -   `options.controls` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)?** 

src/actions/index.js

@@ -52,13 +52,14 @@ function setHoverMarker(feature) {
 
 function fetchDirections() {
   return (dispatch, getState) => {
-    const { api, accessToken, routeIndex, profile, alternatives } = getState();
+    const { api, accessToken, routeIndex, profile, alternatives, congestion } = getState();
     const query = buildDirectionsQuery(getState);
 
     // Request params
     var options = [];
     options.push('geometries=polyline');
     if (alternatives) options.push('alternatives=true');
+    if (congestion) options.push('annotations=congestion');
     options.push('steps=true');
     options.push('overview=full');
     if (accessToken) options.push('access_token=' + accessToken);

src/directions.js

@@ -24,7 +24,8 @@ import Instructions from './controls/instructions';
  * @param {String} [options.accessToken=null] Required unless `mapboxgl.accessToken` is set globally
  * @param {Boolean} [options.interactive=true] Enable/Disable mouse or touch interactivity from the plugin
  * @param {String} [options.profile="mapbox/driving-traffic"] Routing profile to use. Options: `mapbox/driving-traffic`, `mapbox/driving`, `mapbox/walking`, `mapbox/cycling`
- * @param {Boolean} [options.alternatives=true] Whether to enable alternatives.
+ * @param {Boolean} [options.alternatives=false] Whether to enable alternatives.
+ * @param {Boolean} [options.congestion=false] Whether to enable congestion along the route line.
  * @param {String} [options.unit="imperial"] Measurement system to be used in navigation instructions. Options: `imperial`, `metric`
  * @param {Function} [options.compile=null] Provide a custom function for generating instruction, compatible with osrm-text-instructions.
  * @param {Object} [options.geocoder] Pass options available to mapbox-gl-geocoder as [documented here](https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#mapboxglgeocoder).
@@ -112,7 +113,7 @@ export default class MapboxDirections {
   }
 
   mapState() {
-    const { profile, alternatives, styles, interactive, compile } = store.getState();
+    const { profile, alternatives, congestion, styles, interactive, compile } = store.getState();
 
     // Emit any default or option set config
     this.actions.eventEmit('profile', { profile });
@@ -167,20 +168,45 @@ export default class MapboxDirections {
       if (directions.length) {
         directions.forEach((feature, index) => {
 
-          const lineString = {
-            geometry: {
-              type: 'LineString',
-              coordinates: decode(feature.geometry, 5).map((c) => {
-                return c.reverse();
-              })
-            },
-            properties: {
-              'route-index': index,
-              route: (index === routeIndex) ? 'selected' : 'alternate'
+          const features = [];
+
+          const decoded = decode(feature.geometry, 5).map(function(c) {
+            return c.reverse();
+          });
+
+          decoded.forEach(function(c, i) {
+            var previous = features[features.length - 1];
+            var congestion = feature.legs[0].annotation && feature.legs[0].annotation.congestion && feature.legs[0].annotation.congestion[i - 1];
+
+            if (previous && (!congestion || previous.properties.congestion === congestion)) {
+              previous.geometry.coordinates.push(c);
+            } else {
+              var segment = {
+                geometry: {
+                  type: 'LineString',
+                  coordinates: []
+                },
+                properties: {
+                  'route-index': index,
+                  route: (index === routeIndex) ? 'selected' : 'alternate',
+                }
+              };
+
+              // New segment starts with previous segment's last coordinate.
+              if (previous) segment.geometry.coordinates.push(previous.geometry.coordinates[previous.geometry.coordinates.length - 1]);
+
+              segment.geometry.coordinates.push(c);
+
+              if (congestion) {
+                segment.properties.congestion = feature.legs[0].annotation.congestion[i - 1];
+              }
+
+              features.push(segment);
             }
-          };
+          });
+
+          geojson.features = geojson.features.concat(features);
 
-          geojson.features.push(lineString);
           if (index === routeIndex) {
             // Collect any possible waypoints from steps
             feature.legs[0].steps.forEach((d) => {

src/directions_style.js

@@ -16,16 +16,44 @@ const style = [{
     ['in', 'route', 'alternate']
   ]
 }, {
-  'id': 'directions-route-line',
+  'id': 'directions-route-line-casing',
   'type': 'line',
   'source': 'directions',
   'layout': {
     'line-cap': 'round',
     'line-join': 'round'
   },
   'paint': {
-    'line-color': '#3bb2d0',
-    'line-width': 4
+    'line-color': '#2d5f99',
+    'line-width': 12
+  },
+  'filter': [
+    'all',
+    ['in', '$type', 'LineString'],
+    ['in', 'route', 'selected']
+  ]
+}, {
+  'id': 'directions-route-line',
+  'type': 'line',
+  'source': 'directions',
+  'layout': {
+    'line-cap': 'butt',
+    'line-join': 'round'
+  },
+  'paint': {
+    'line-color': {
+      'property': 'congestion',
+      'type': 'categorical',
+      'default': '#4882c5',
+      'stops': [
+        ['unknown', '#4882c5'],
+        ['low', '#4882c5'],
+        ['moderate', '#f09a46'],
+        ['heavy', '#e34341'],
+        ['severe', '#8b2342']
+      ]
+    },
+    'line-width': 7
   },
   'filter': [
     'all',

src/reducers/index.js

@@ -6,6 +6,7 @@ const initialState = {
   api: 'https://api.mapbox.com/directions/v5/',
   profile: 'mapbox/driving-traffic',
   alternatives: false,
+  congestion: false,
   unit: 'imperial',
   compile: null,
   proximity: false,