Merge pull request #2887 from mapbox/shan/alternative-route-congestion-917

Show congestion levels on alternative route lines

Author: ShanMa1991

CHANGELOG.md

@@ -26,6 +26,7 @@
 * Renamed public property `MBCongestionAttribute` to `CongestionAttribute`. ([#2808](https://github.com/mapbox/mapbox-navigation-ios/pull/2808))
 * `NavigationViewController.mapView` was renamed to `NavigationViewController.navigationMapView`. ([#2808](https://github.com/mapbox/mapbox-navigation-ios/pull/2808))
 * `NavigationMapView.highlightBuildings(at:in3D:)` was renamed to `NavigationMapView.highlightBuildings(at:in3D:completion:)`. ([#2827](https://github.com/mapbox/mapbox-navigation-ios/pull/2827))
+* Add ability to show congestion levels with different colors on alternative route lines, after receiving multiple routes in `RouteResponse` if `NavigationMapView.showsCongestionForAlternativeRoutes` is set to `true`. ([#2887](https://github.com/mapbox/mapbox-navigation-ios/pull/2887))
 
 ### Location tracking
 

Example/ViewController.swift

@@ -57,6 +57,8 @@ class ViewController: UIViewController {
             }
 
             startButton.isEnabled = true
+            // Show congestion levels on alternative route lines if there're multiple routes in the response.
+            navigationMapView.showsCongestionForAlternativeRoutes = true
             navigationMapView.show(routes)
             navigationMapView.showWaypoints(on: currentRoute)
         }

Sources/MapboxNavigation/DayStyle.swift

@@ -29,6 +29,11 @@ extension UIColor {
     class var trafficHeavy: UIColor { get { return #colorLiteral(red: 1, green: 0.3019607843, blue: 0.3019607843, alpha: 1) } }
     class var trafficSevere: UIColor { get { return #colorLiteral(red: 0.5607843137, green: 0.1411764706, blue: 0.2784313725, alpha: 1) } }
 
+    class var alternativeTrafficUnknown: UIColor { get { return defaultAlternateLine } }
+    class var alternativeTrafficLow: UIColor { get { return defaultAlternateLine } }
+    class var alternativeTrafficModerate: UIColor { get { return #colorLiteral(red: 0.75, green: 0.63, blue: 0.53, alpha: 1.0) } }
+    class var alternativeTrafficHeavy: UIColor { get { return #colorLiteral(red: 0.71, green: 0.51, blue: 0.51, alpha: 1.0) } }
+    class var alternativeTrafficSevere: UIColor { get { return #colorLiteral(red: 0.71, green: 0.51, blue: 0.51, alpha: 1.0) } }
     class var defaultBuildingColor: UIColor { get { return #colorLiteral(red: 0.9833194452, green: 0.9843137255, blue: 0.9331936657, alpha: 0.8019049658) } }
     class var defaultBuildingHighlightColor: UIColor { get { return #colorLiteral(red: 0.337254902, green: 0.6588235294, blue: 0.9843137255, alpha: 0.949406036) } }
 }
@@ -153,6 +158,11 @@ open class DayStyle: Style {
         NavigationMapView.appearance().trafficModerateColor = .trafficModerate
         NavigationMapView.appearance().trafficSevereColor = .trafficSevere
         NavigationMapView.appearance().trafficUnknownColor = .trafficUnknown
+        NavigationMapView.appearance().alternativeTrafficHeavyColor = .alternativeTrafficHeavy
+        NavigationMapView.appearance().alternativeTrafficLowColor = .alternativeTrafficLow
+        NavigationMapView.appearance().alternativeTrafficModerateColor = .alternativeTrafficModerate
+        NavigationMapView.appearance().alternativeTrafficSevereColor = .alternativeTrafficSevere
+        NavigationMapView.appearance().alternativeTrafficUnknownColor = .alternativeTrafficUnknown
         NavigationMapView.appearance().buildingDefaultColor = .defaultBuildingColor
         NavigationMapView.appearance().buildingHighlightColor = .defaultBuildingHighlightColor
         NavigationView.appearance().backgroundColor = #colorLiteral(red: 0.764706, green: 0.752941, blue: 0.733333, alpha: 1)

Sources/MapboxNavigation/NavigationMapView+VanishingRouteLine.swift

@@ -217,7 +217,7 @@ extension NavigationMapView {
         })
     }
 
-    func routeLineGradient(_ route: Route, fractionTraveled: Double) -> [Double: UIColor]? {
+    func routeLineGradient(_ route: Route, fractionTraveled: Double, isMain: Bool = true) -> [Double: UIColor]? {
         var gradientStops = [CGFloat: UIColor]()
 
         /**
@@ -250,7 +250,7 @@ extension NavigationMapView {
             // Get congestion color for the stop.
 
             let congestionLevel = feature.properties?[CongestionAttribute] as? String
-            let associatedCongestionColor = congestionColor(for: congestionLevel)
+            let associatedCongestionColor = congestionColor(for: congestionLevel, isMain: isMain)
 
             // Measure the line length of the traffic segment.
             let lineString = feature.geometry.value as? LineString
@@ -267,7 +267,7 @@ extension NavigationMapView {
                 gradientStops[segmentEndPercentTraveled.nextDown] = associatedCongestionColor
 
                 if index + 1 < congestionSegments.count {
-                    gradientStops[segmentEndPercentTraveled.nextUp] = congestionColor(for: congestionSegments[index + 1].properties?["congestion"] as? String)
+                    gradientStops[segmentEndPercentTraveled.nextUp] = congestionColor(for: congestionSegments[index + 1].properties?["congestion"] as? String, isMain: isMain)
                 }
 
                 continue
@@ -297,7 +297,7 @@ extension NavigationMapView {
             gradientStops[segmentEndPercentTraveled.nextDown] = associatedCongestionColor
 
             if index + 1 < congestionSegments.count {
-                gradientStops[segmentEndPercentTraveled.nextUp] = congestionColor(for: congestionSegments[index + 1].properties?["congestion"] as? String)
+                gradientStops[segmentEndPercentTraveled.nextUp] = congestionColor(for: congestionSegments[index + 1].properties?["congestion"] as? String, isMain: isMain)
             }
         }
 
@@ -343,18 +343,18 @@ extension NavigationMapView {
     /**
      Given a congestion level, return its associated color.
      */
-    func congestionColor(for congestionLevel: String?) -> UIColor {
+    func congestionColor(for congestionLevel: String?, isMain: Bool) -> UIColor {
         switch congestionLevel {
         case "low":
-            return trafficLowColor
+            return isMain ? trafficLowColor : alternativeTrafficLowColor
         case "moderate":
-            return trafficModerateColor
+            return isMain ? trafficModerateColor : alternativeTrafficModerateColor
         case "heavy":
-            return trafficHeavyColor
+            return isMain ? trafficHeavyColor : alternativeTrafficHeavyColor
         case "severe":
-            return trafficSevereColor
+            return isMain ? trafficSevereColor : alternativeTrafficSevereColor
         default:
-            return trafficUnknownColor
+            return isMain ? trafficUnknownColor : alternativeTrafficUnknownColor
         }
     }
 

Sources/MapboxNavigation/NavigationMapView.swift

@@ -55,6 +55,12 @@ open class NavigationMapView: UIView {
     public var roadClassesWithOverriddenCongestionLevels: Set<MapboxStreetsRoadClass>? = nil
 
     var cameraAnimator: CameraAnimator!
+    /**
+     Controls whether to show congestion levels on alternative route lines. Defaults to `false`.
+     
+     If `true` and there're multiple routes to choose, the alternative route lines would display the congestion levels at different colors, similar to the main route. To customize the congestion colors that represent different congestion levels, override the `alternativeTrafficUnknownColor`, `alternativeTrafficLowColor`, `alternativeTrafficModerateColor`, `alternativeTrafficHeavyColor`, `alternativeTrafficSevereColor` property for the `NavigationMapView.appearance()`.
+     */
+    public var showsCongestionForAlternativeRoutes: Bool = false
 
     enum IdentifierType: Int {
         case source
@@ -88,6 +94,12 @@ open class NavigationMapView: UIView {
     @objc dynamic public var trafficModerateColor: UIColor = .trafficModerate
     @objc dynamic public var trafficHeavyColor: UIColor = .trafficHeavy
     @objc dynamic public var trafficSevereColor: UIColor = .trafficSevere
+    @objc dynamic public var alternativeTrafficUnknownColor: UIColor = .alternativeTrafficUnknown
+    @objc dynamic public var alternativeTrafficLowColor: UIColor = .alternativeTrafficLow
+    @objc dynamic public var alternativeTrafficModerateColor: UIColor = .alternativeTrafficModerate
+    @objc dynamic public var alternativeTrafficHeavyColor: UIColor = .alternativeTrafficHeavy
+    @objc dynamic public var alternativeTrafficSevereColor: UIColor = .alternativeTrafficSevere
+    
     @objc dynamic public var routeCasingColor: UIColor = .defaultRouteCasing
     @objc dynamic public var routeAlternateColor: UIColor = .defaultAlternateLine
     @objc dynamic public var routeAlternateCasingColor: UIColor = .defaultAlternateLineCasing
@@ -635,6 +647,9 @@ open class NavigationMapView: UIView {
         lineLayer.layout?.lineJoin = .constant(.round)
         lineLayer.layout?.lineCap = .constant(.round)
 
+        if showsCongestionForAlternativeRoutes, let gradientStops = routeLineGradient(route, fractionTraveled: 0.0, isMain: false) {
+            lineLayer.paint?.lineGradient = .expression((Expression.routeLineGradientExpression(gradientStops)))
+        }
         mapView.style.addLayer(layer: lineLayer, layerPosition: LayerPosition(below: parentLayerIndentifier))
 
         return layerIdentifier