Skip to main content

Add polyline annotations

Additional Developer Resources
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.

LineAnnotationExample.swift
github View on GitHub
import UIKit
import MapboxMaps

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

    override func viewDidLoad() {
        super.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]
        view.addSubview(mapView)

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

            // Set up the example
            self?.setupExample()

            
            
        }.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
        annotations.append(lineAnnotation)

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

        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)

            annotations.append(randomAnnotation)
        }

        // 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
    }
}
Additional Developer Resources
Was this example helpful?