How to draw a line under street name using MapBox - ios

Question

I would like to draw a route using Mapbox. I've tried adding polyline:
let polyline = MGLPolyline(coordinates: &coords, count: UInt(coords.count))
mapView?.add(polyline)
But it keeps drawing on top of street names. How can I move below street names?

Answer 1

If you add an MGLPolyline directly to an MGLMapView, you’re adding it as an annotation; currently the Mapbox iOS SDK only supports adding annotations on top of everything.
However, the SDK has a separate API called runtime styling, which allows you to place data under or above any layer of the map. From this example, you can use code like the following to add a shape source to the map’s style and a line layer that renders the shape source. (MGLLineStyleLayer is reminiscent of MapKit’s MKOverlayPathRenderer.)
let routeFeature = MGLPolylineFeature(coordinates: &coords, count: UInt(coords.count))
let routeSource = MGLShapeSource(identifier: "route", shape: routeFeature, options: nil)
mapView.style?.addSource(routeSource)
let routeLayer = MGLLineStyleLayer(identifier: "route", source: routeSource)
// Set properties like lineColor, lineWidth, lineCap, and lineJoin
mapView.style?.insertLayer(routeLayer, above: roadLayer) // or below: labelLayer
The code above works if you know the identifier of the road or label layer. You can obtain the identifier by opening the style in Mapbox Studio. For something more robust, you could iterate over all the layers in the map style, inserting the route layer above the first non-symbol layer you find. (Labels and icons are rendered using symbol layers.)
for layer in style.layers.reversed() {
if !(layer is MGLSymbolStyleLayer) {
style.insertLayer(routeLayer, above: layer)
break
}
}
By the way, if you need more than just a route line, Mapbox Navigation SDK for iOS comes with a complete turn-by-turn navigation UI, including a map that’s optimized for displaying a route.