Draw Polyline With Border Mapbox, iOS

Question

I'm using Mapbox iOS SDK and trying to draw a polyline without geojson. I tried to get the route with this method:

func calculateRoute() {

    ...

    let options = NavigationRouteOptions(waypoints: [origin, destination], profileIdentifier: .automobileAvoidingTraffic)
    Directions.shared.calculate(options) { (waypoints, routes, error) in 
        guard let route = routes?.first else { return }
        self.showPreview(route: route)
    }
}

Then I tried to draw a route.

func showPreview(route: Route) {

    guard let steps = route.legs.first?.steps else { return }
    var points = [CLLocationCoordinate2D]()
    for step in steps {
        points.append(step.maneuverLocation)
    }
    let line = MGLPolyline(coordinates: &points, count: UInt(points.count))
    mapView?.addAnnotation(line)
}

It draws a polyline on the map view. I could change the color and the width of the polyline with two delegate methods (MGLMapViewDelegate):

func mapView(_ mapView: MGLMapView, lineWidthForPolylineAnnotation annotation: MGLPolyline) -> CGFloat {
    return 10
}

func mapView(_ mapView: MGLMapView, strokeColorForShapeAnnotation annotation: MGLShape) -> UIColor {
    return .blue
}

but I can't find a method to set a border width and border color around the polyline. Is there any way to do that?

Answer 1

It looks like I had a similar use case to you (i.e. not using geojson) and ended up with something like this. By associating your route with an MGLLineStyleLayer you can control the visual parameters of the line.

func showPreview(route: Route) {
    guard route.coordinateCount > 0 else { return }
    // Convert the route’s coordinates into a polyline
    var routeCoordinates = route.coordinates!
    let polyline = MGLPolylineFeature(coordinates: &routeCoordinates, count: route.coordinateCount)

    // If there's already a route line on the map, reset its shape to the new route
    if let source = mapView.style?.source(withIdentifier: "route-source") as? MGLShapeSource {
        source.shape = polyline
    } else {
        let source = MGLShapeSource(identifier: "route-source", features: [polyline], options: nil)

        // Customize the route line color and width
        let lineStyle = MGLLineStyleLayer(identifier: "route-style", source: source)
        lineStyle.lineColor = NSExpression(forConstantValue: UIColor.blue)
        lineStyle.lineWidth = NSExpression(forConstantValue: 3)

        // Add the source and style layer of the route line to the map
        mapView.style?.addSource(source)
        mapView.style?.addLayer(lineStyle)
    }
}

You want to add a border and control how that looks. If you take a look at this example on the Mapbox website: Line style Example they do what you want by creating a second MGLLineStyleLayer and inserting it below the first one. They call the second layer casingLayer. This is their code so you can see it is formed the same way as the first layer.

let casingLayer = MGLLineStyleLayer(identifier: "polyline-case", source: source)
    // Add your formatting attributes here. See example on website.

Then they insert it below the first line and because it has a wider width, shows as a border.

style.insertLayer(casingLayer, below: lineStyle)

Hope this helps.