How to change marker for locations other than destination in Mapbox?

Question

For navigation feature in my app, I am using Mapbox SDK. Following is a snippet that I am using.

func showNavigationMap() {

    let origin = Waypoint(coordinate: currentLocation.coordinate, name: "Your Location")

    guard pickUpCoordinate != nil, dropOffCoordinate != nil else {
        showAlertMessage("Locations not generated")
        return
    }

    let pickUpLocation = Waypoint(coordinate: pickUpCoordinate, name: "Pickup Location")
    let deliveryLocation = Waypoint(coordinate: dropOffCoordinate, name: "Delivery Location")

    let options = NavigationRouteOptions(waypoints: [origin, pickUpLocation, deliveryLocation])

    Directions.shared.calculate(options) { (waypoints, routes, error) in
        guard let route = routes?.first else {
            self.showAlertMessage("No possible routes detected")
            return
        }

        self.mapNavigationViewController = NavigationViewController(for: route)

        self.mapNavigationViewController.delegate = self

        self.present(self.mapNavigationViewController, animated: true, completion: {
            print("Navigation shown")   
        })
    }
}

The sample screen is as shown below.

The first stop location is indicated as "1". I would like this location to be represented by some custom marker image. I have tried the mapbox documentation (https://www.mapbox.com/ios-sdk/navigation/examples/custom-destination-marker/). However, I could change the destination marker only. Is it possible to change the marker for the desired location?

Answer 1

Here is the workaround, I have tested it and it works.

extension NavigationManager: NavigationViewControllerDelegate {

  public func navigationViewController(_ navigationViewController: NavigationViewController, waypointStyleLayerWithIdentifier identifier: String, source: MGLSource) -> MGLStyleLayer? {
    let waypointStyleLayer = MGLCircleStyleLayer(identifier: identifier, source: source)

    // Way to custom waypoint style
    //waypointStyleLayer.circleColor = NSExpression(forConstantValue: UIColor.yellow)
    //waypointStyleLayer.circleRadius = NSExpression(forConstantValue: 12)
    //waypointStyleLayer.circleStrokeColor = NSExpression(forConstantValue: UIColor.black)
    //waypointStyleLayer.circleStrokeWidth = NSExpression(forConstantValue: 2)

    // Hides waypoint
    waypointStyleLayer.circleOpacity = NSExpression(forConstantValue: 0)
    waypointStyleLayer.circleStrokeOpacity = NSExpression(forConstantValue: 0)

    return waypointStyleLayer
  }

  public func navigationViewController(_ navigationViewController: NavigationViewController, waypointSymbolStyleLayerWithIdentifier identifier: String, source: MGLSource) -> MGLStyleLayer? {
    let waypointSymbolStyleLayer = MGLSymbolStyleLayer(identifier: identifier, source: source)

    // Way to custom waypoint symbol
    //waypointSymbolStyleLayer.text = NSExpression(forKeyPath: "title")
    //waypointSymbolStyleLayer.textColor = NSExpression(forConstantValue: UIColor.white)

    return waypointSymbolStyleLayer
  }

}

Reference: https://github.com/mapbox/mapbox-navigation-ios/issues/1893