Skip to main content

Add polyline annotations

Show polyline annotations on a map.

There are several ways to add markers, annotations, and other shapes to the map using the Maps SDK. To choose the best approach for your application, read the Markers and annotations guide.

import UIKit
import MapboxMaps

final class LineAnnotationExample: UIViewController, ExampleProtocol {
private var mapView: MapView!
private var cancelables = Set<AnyCancelable>()

override func viewDidLoad() {

let cameraOptions = CameraOptions(center: CLLocationCoordinate2D(latitude: 0, longitude: 0), zoom: 2)
let mapInitOptions = MapInitOptions(cameraOptions: cameraOptions, styleURI: .streets)
mapView = MapView(frame: view.bounds, mapInitOptions: mapInitOptions)
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

// Allows the delegate to receive information about map events.
mapView.mapboxMap.onMapLoaded.observeNext { [weak self] _ in

// Set up the example

// The below line is used for internal testing purposes only.
}.store(in: &cancelables)

private func setupExample() {

var annotations = [PolylineAnnotation]()
let coordinates = [
CLLocationCoordinate2DMake(-2.178992, -4.375974),
CLLocationCoordinate2DMake(-4.107888, -7.639772),
CLLocationCoordinate2DMake(2.798737, -11.439207)
var lineAnnotation = PolylineAnnotation(lineCoordinates: coordinates)
lineAnnotation.lineColor = StyleColor(.red)
lineAnnotation.lineWidth = 5.0

// random add lines across the globe
var randomCoordinates = [CLLocationCoordinate2D]()
for _ in 0..<400 {

for chunk in randomCoordinates.chunked(into: 8) {
// Create the line annotation.
var randomAnnotation = PolylineAnnotation(lineCoordinates: chunk)

// Customize the style of the line annotation
randomAnnotation.lineColor = StyleColor(red: .random(in: 0...255),
green: .random(in: 0...255),
blue: .random(in: 0...255),
alpha: 1)


// Create the PolylineAnnotationManager responsible for managing
// this line annotations (and others if you so choose).
// Annotation managers are kept alive by `AnnotationOrchestrator`
// (`mapView.annotations`) until you explicitly destroy them
// by calling `mapView.annotations.removeAnnotationManager(withId:)`
let lineAnnnotationManager = mapView.annotations.makePolylineAnnotationManager(
// position line annotations layer in a way that line annotations clipped at land borders
layerPosition: .below("pitch-outline")

// Sync the annotation to the manager.
lineAnnnotationManager.annotations = annotations
Was this example helpful?