Add traversed route line layer to customize traversedRouteColor (#4106)

Author: ShanMa1991

CHANGELOG.md

@@ -22,6 +22,7 @@
 * Fixed an issue where the map would cut off a continuous alternative route to appear as if it began after the deviation point. ([#4085](https://github.com/mapbox/mapbox-navigation-ios/pull/4085))
 * Fixed an issue where the callout annotating a continuous alternative route appeared far away from the route and contained an inaccurate travel time. ([#4085](https://github.com/mapbox/mapbox-navigation-ios/pull/4085))
 * Fixed an issue where some roads were shown as restricted on the route line even if public access is allowed for “local traffic only”. ([#4085](https://github.com/mapbox/mapbox-navigation-ios/pull/4085))
+* Fixed an issue where the `NavigationMapView.traversedRouteColor` property had no effect on the traversed part of the route line. ([#4106](https://github.com/mapbox/mapbox-navigation-ios/pull/4106))
 
 ### Guidance Instructions
 

Sources/MapboxNavigation/NavigationMapView.swift

@@ -297,6 +297,10 @@ open class NavigationMapView: UIView {
             parentLayerIdentifier = addRouteCasingLayer(route,
                                                         below: parentLayerIdentifier,
                                                         isMainRoute: index == 0)
+            
+            if index == 0 && routeLineTracksTraversal {
+                parentLayerIdentifier = addTraversedRouteLayer(route, below: parentLayerIdentifier)
+            }
         }
 
         continuousAlternatives?.forEach { routeAlternative in
@@ -336,6 +340,7 @@ open class NavigationMapView: UIView {
             sourceIdentifiers.insert($0.element.identifier(.restrictedRouteAreaSource))
             layerIdentifiers.insert($0.element.identifier(.route(isMainRoute: $0.offset == 0)))
             layerIdentifiers.insert($0.element.identifier(.routeCasing(isMainRoute: $0.offset == 0)))
+            layerIdentifiers.insert($0.element.identifier(.traversedRoute))
             layerIdentifiers.insert($0.element.identifier(.restrictedRouteAreaRoute))
         }
 
@@ -362,14 +367,6 @@ open class NavigationMapView: UIView {
         mapView.mapboxMap.style.removeSources(sourceIdentifiers)
     }
 
-    func removeRestrictedRouteArea() {
-        guard let sourceIdentifier = routes?.first?.identifier(.restrictedRouteAreaSource),
-              let layerIdentifier = routes?.first?.identifier(.restrictedRouteAreaRoute) else { return }
-        
-        mapView.mapboxMap.style.removeLayers(Set([layerIdentifier]))
-        mapView.mapboxMap.style.removeSources(Set([sourceIdentifier]))
-    }
-    
     /**
      Shows the step arrow given the current `RouteProgress`.
 
@@ -625,7 +622,7 @@ open class NavigationMapView: UIView {
         let shape = delegate?.navigationMapView(self, shapeFor: route) ?? defaultShape
 
         let geoJSONSource = self.geoJSONSource(shape)
-        let sourceIdentifier = route.identifier(.source(isMainRoute: isMainRoute, isSourceCasing: true))
+        let sourceIdentifier = route.identifier(.source(isMainRoute: isMainRoute, isSourceCasing: false))
 
         do {
             if mapView.mapboxMap.style.sourceExists(withId: sourceIdentifier) {
@@ -719,7 +716,7 @@ open class NavigationMapView: UIView {
         let shape = delegate?.navigationMapView(self, casingShapeFor: route) ?? defaultShape
 
         let geoJSONSource = self.geoJSONSource(shape)
-        let sourceIdentifier = route.identifier(.source(isMainRoute: isMainRoute, isSourceCasing: isMainRoute))
+        let sourceIdentifier = route.identifier(.source(isMainRoute: isMainRoute, isSourceCasing: true))
 
         do {
             if mapView.mapboxMap.style.sourceExists(withId: sourceIdentifier) {
@@ -787,6 +784,65 @@ open class NavigationMapView: UIView {
         return layerIdentifier
     }
 
+    @discardableResult func addTraversedRouteLayer(_ route: Route, below parentLayerIndentifier: String? = nil) -> String? {
+        guard let defaultShape = route.shape else { return nil }
+        
+        // The traversed route layer should have the source as the main route casing source.
+        let sourceIdentifier = route.identifier(.source(isMainRoute: true, isSourceCasing: true))
+        
+        if !mapView.mapboxMap.style.sourceExists(withId: sourceIdentifier) {
+            let shape = delegate?.navigationMapView(self, casingShapeFor: route) ?? defaultShape
+            let geoJSONSource = self.geoJSONSource(shape)
+            do {
+                try mapView.mapboxMap.style.addSource(geoJSONSource, id: sourceIdentifier)
+            } catch {
+                Log.error("Failed to add route casing source \(sourceIdentifier) for traversed route with error: \(error.localizedDescription).",
+                          category: .navigationUI)
+            }
+        }
+        
+        var lineLayer: LineLayer? = nil
+        let layerIdentifier = route.identifier(.traversedRoute)
+        
+        let layerAlreadyExists = mapView.mapboxMap.style.layerExists(withId: layerIdentifier)
+        if layerAlreadyExists {
+            lineLayer = try? mapView.mapboxMap.style.layer(withId: layerIdentifier) as? LineLayer
+        }
+        
+        if lineLayer == nil {
+            lineLayer = LineLayer(id: layerIdentifier)
+            lineLayer?.source = sourceIdentifier
+            lineLayer?.lineColor = .constant(.init(traversedRouteColor))
+            // The traversed route layer should have the same width as the main route casing layer.
+            lineLayer?.lineWidth = .expression(Expression.routeLineWidthExpression(1.5))
+            lineLayer?.lineJoin = .constant(.round)
+            lineLayer?.lineCap = .constant(.round)
+        }
+        
+        if let lineLayer = lineLayer {
+            do {
+                var layerPosition: MapboxMaps.LayerPosition? = nil
+                if let parentLayerIndentifier = parentLayerIndentifier, mapView.mapboxMap.style.layerExists(withId: parentLayerIndentifier) {
+                    layerPosition = .below(parentLayerIndentifier)
+                } else {
+                    layerPosition = self.layerPosition(for: layerIdentifier, route: route)
+                }
+                if layerAlreadyExists {
+                    if let layerPosition = layerPosition {
+                        try mapView.mapboxMap.style.moveLayer(withId: layerIdentifier, to: layerPosition)
+                    }
+                } else {
+                    try mapView.mapboxMap.style.addPersistentLayer(lineLayer, layerPosition: layerPosition)
+                }
+            } catch {
+                Log.error("Failed to add traversed route layer \(layerIdentifier) with error: \(error.localizedDescription).",
+                          category: .navigationUI)
+            }
+        }
+        
+        return layerIdentifier
+    }
+    
     func geoJSONSource(_ shape: LineString) -> GeoJSONSource {
         var geoJSONSource = GeoJSONSource()
         geoJSONSource.data = .geometry(.lineString(shape))
@@ -1750,6 +1806,7 @@ open class NavigationMapView: UIView {
             LayerIdentifier.buildingExtrusionLayer,
             route?.identifier(.routeCasing(isMainRoute: false)),
             route?.identifier(.route(isMainRoute: false)),
+            route?.identifier(.traversedRoute),
             route?.identifier(.routeCasing(isMainRoute: true)),
             route?.identifier(.route(isMainRoute: true)),
             route?.identifier(.restrictedRouteAreaRoute)

Sources/MapboxNavigation/Route.swift

@@ -142,6 +142,8 @@ extension Route {
             return "\(identifier).\(isMainRoute ? "main" : "alternative").route_line"
         case .routeCasing(isMainRoute: let isMainRoute):
             return "\(identifier).\(isMainRoute ? "main" : "alternative").route_line_casing"
+        case .traversedRoute:
+            return "\(identifier).traversed_route"
         case .restrictedRouteAreaSource:
             return "\(identifier).restricted_area_source"
         case .restrictedRouteAreaRoute:

Sources/MapboxNavigation/RouteLineType.swift

@@ -8,6 +8,8 @@ enum RouteLineType {
 
     case routeCasing(isMainRoute: Bool)
 
+    case traversedRoute
+    
     case restrictedRouteAreaSource
 
     case restrictedRouteAreaRoute

Tests/MapboxNavigationTests/RouteLineLayerPositionTests.swift

@@ -238,9 +238,11 @@ class RouteLineLayerPositionTests: TestCase {
         navigationMapView.show([multilegRoute], layerPosition: customRouteLineLayerPosition)
         navigationMapView.removeWaypoints()
         navigationMapView.showsRestrictedAreasOnRoute = false
+        navigationMapView.routeLineTracksTraversal = true
 
         expectedLayerSequence = [
             buildingLayer["id"]!,
+            multilegRoute.identifier(.traversedRoute),
             multilegRoute.identifier(.routeCasing(isMainRoute: true)),
             multilegRoute.identifier(.route(isMainRoute: true)),
             roadTrafficLayer["id"]!,
@@ -296,6 +298,7 @@ class RouteLineLayerPositionTests: TestCase {
         navigationMapView.showWaypoints(on: multilegRoute)
         navigationMapView.show([multilegRoute])
         navigationMapView.showsRestrictedAreasOnRoute = true
+        navigationMapView.routeLineTracksTraversal = false
 
         expectedLayerSequence = [
             buildingLayer["id"]!,