Skip to main content

Add a polygon annotation

Additional Developer Resources

This example demonstrates how to add a polygon annotation to a map using the PolygonAnnotation and PolygonAnnotationManager classes in the Mapbox Maps SDK for iOS. The annotation includes customizable styling by setting fillColor and fillOpacity properties. It also demonstrates annotation interactivity by enabling the isDraggable property and registering a tapHandler.

iOS Examples App Available

This example code is part of the Maps SDK for iOS Examples App, a working iOS project available on Github. iOS developers are encouraged to run the examples app locally to interact with this example in an emulator and explore other features of the Maps SDK.

See our Run the Maps SDK for iOS Examples App tutorial for step-by-step instructions.

PolygonAnnotationExample.swift
github View on GitHub
import MapboxMaps
import UIKit

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

    override func viewDidLoad() {
        super.viewDidLoad()

        let centerCoordinate = CLLocationCoordinate2D(latitude: 25.04579, longitude: -88.90136)
        let options = MapInitOptions(cameraOptions: CameraOptions(center: centerCoordinate, zoom: 5.0))

        mapView = MapView(frame: view.bounds, mapInitOptions: options)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.addSubview(mapView)

        // Allows the delegate to receive information about map events.
        mapView.mapboxMap.onMapLoaded.observeNext { _ in
            self.setupExample()

            
            
        }.store(in: &cancelables)
    }

    // Wait for the map to load before adding an annotation.
    private func setupExample() {

        // Create the PolygonAnnotationManager
        // Annotation managers are kept alive by `AnnotationOrchestrator`
        // (`mapView.annotations`) until you explicitly destroy them
        // by calling `mapView.annotations.removeAnnotationManager(withId:)`
        let polygonAnnotationManager = mapView.annotations.makePolygonAnnotationManager()

        // Create the polygon annotation
        var polygonAnnotation = PolygonAnnotation(polygon: makePolygon())

        // Style the polygon annotation
        polygonAnnotation.fillColor = StyleColor(.red)
        polygonAnnotation.fillOpacity = 0.8

        // Enable the polygon annotation to be dragged
        polygonAnnotation.isDraggable = true

        polygonAnnotation.tapHandler = { _ in
            print("polygon is tapped")
            return true
        }

        // Add the polygon annotation to the manager
        polygonAnnotationManager.annotations = [polygonAnnotation]
    }

    private func makePolygon() -> Polygon {

        // Describe the polygon's geometry
        let outerRingCoords = [
            CLLocationCoordinate2DMake(24.51713945052515, -89.857177734375),
            CLLocationCoordinate2DMake(24.51713945052515, -87.967529296875),
            CLLocationCoordinate2DMake(26.244156283890756, -87.967529296875),
            CLLocationCoordinate2DMake(26.244156283890756, -89.857177734375),
            CLLocationCoordinate2DMake(24.51713945052515, -89.857177734375)
        ]

        // This polygon has an intererior polygon which represents a hole in the shape.
        let innerRingCoords = [
            CLLocationCoordinate2DMake(25.085598897064752, -89.20898437499999),
            CLLocationCoordinate2DMake(25.085598897064752, -88.61572265625),
            CLLocationCoordinate2DMake(25.720735134412106, -88.61572265625),
            CLLocationCoordinate2DMake(25.720735134412106, -89.20898437499999),
            CLLocationCoordinate2DMake(25.085598897064752, -89.20898437499999)
        ]

        /// Create the Polygon with the outer ring and inner ring
        let outerRing = Ring(coordinates: outerRingCoords)
        let innerRing = Ring(coordinates: innerRingCoords)

        return Polygon(outerRing: outerRing, innerRings: [innerRing])
    }
}
Additional Developer Resources
Was this example helpful?