CODEWITHSUNDEEP
swiftmapbox
Srikanth Srinivas
Srikanth Srinivas

Reputation: 127

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.

Upvotes: 1

Views: 1036

Answers (3)

Nuca Beriashvili
Nuca Beriashvili

Reputation: 1

private lazy var polyLineAnnotationManager = mapView.mapView.annotations.makePolylineAnnotationManager(layerPosition: .below(pointAnnotationManager.layerId))

this was the solution for my case but I'm using MapBox v10.18

Upvotes: 0

Serj Rubens
Serj Rubens

Reputation: 638

I found that instead of adding layer you can insert it under last layer. So in your drawRoute(route: Route) function you have to change last line to:

if let style = mapView.style, let last = style.layers.last {
    mapView.style?.insertLayer(lineStyle, below: last)
}
else {
    mapView.style?.addLayer(lineStyle)
}

It's looking a bit like hack cause there is no confidence that last layer is exactly layer with annotations but in case you got only one route on the map then this code probably will work.

This example only represents that there is quick and easy possibility to solve the problem but in the end it need to be done safely

Upvotes: 3

Srikanth Srinivas
Srikanth Srinivas

Reputation: 127

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.

Upvotes: 0

Related Questions