swiftmapbox

How to get annotation image over the drawn route in mapbox iOS


Annotations show under the drawn route

my code to calculate a route is the following;

func calculateRoute(waypoints: [Waypoint],
                    completion: @escaping (Route?, Error?) -> ()) {

    // Coordinate accuracy is the maximum distance away from the waypoint that the route may still be considered viable, measured in meters. Negative values indicate that a indefinite number of meters away from the route and still be considered viable.
    let startPoint = Waypoint(coordinate: currentLocation, coordinateAccuracy: -1, name: "Origin")
    var waypointsWithCurrentLoc = waypoints
    waypointsWithCurrentLoc.insert(startPoint, at: 0)

    let options = NavigationRouteOptions(waypoints: waypointsWithCurrentLoc, profileIdentifier: .automobile)
    // Generate the route object and draw it on the map
    _ = Directions.shared.calculate(options) { [unowned self] (waypoints, routes, error) in
        if error != nil{
            print("Error occured:", error)
        }
        else{
            self.directionsRoute = routes?.first
            // Draw the route on the map after creating it
            self.drawRoute(route: self.directionsRoute!)
        }
    }
}

And my code to draw a route is the following;

func drawRoute(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 = map.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 = MGLStyleValue(rawValue: #colorLiteral(red: 0.2796384096, green: 0.4718205929, blue: 1, alpha: 1))
        lineStyle.lineWidth = MGLStyleValue(rawValue: 8)

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

What is wrong with my code? it returns a longer polyline because i am calcuating an optimized route where the annotation is just a stop to make on the way.


Solution

  • The answer was that its not possible to add Z index control to a mapstyle, Youd have to create a polyline, and then add annotations as indiviual MapStyle elements on top of the layer.