> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/ios/ja/maps/llms.txt)

# Add circle annotations

![Show circle annotations on a map.](https://docs.mapbox.com/ios/ja/assets/ideal-img/maps-examples-circle-annotations.f5c73eb.480.png)

This example demonstrates using [`CircleAnnotation`](https://docs.mapbox.com/ios/maps/api/latest/documentation/mapboxmaps/circleannotation/) with the **Mapbox Maps SDK for iOS**. The code sets up a map view with circle annotations that are draggable and interactive. The [`CircleAnnotationManager`](https://docs.mapbox.com/ios/maps/api/latest/documentation/mapboxmaps/circleannotationmanager/) is utilized to handle and manage the circle annotations on the map. Each annotation features tap and long press gesture handlers, along with dragging effects implemented through specific handlers ([`dragBeginHandler`](https://docs.mapbox.com/ios/maps/api/latest/documentation/mapboxmaps/circleannotation/dragbeginhandler/), [`dragChangeHandler`](https://docs.mapbox.com/ios/maps/api/latest/documentation/mapboxmaps/circleannotation/dragchangehandler/), and [`dragEndHandler`](https://docs.mapbox.com/ios/maps/api/latest/documentation/mapboxmaps/circleannotation/dragendhandler/)/).

> **Note: iOS Examples App Available**
> 
> This example code is part of the **Maps SDK for iOS Examples App**, a working iOS project [available on Github](https://github.com/mapbox/mapbox-maps-ios/tree/11.29.0/Sources/Examples). 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](https://docs.mapbox.com/help/tutorials/maps-sdk-ios-examples-app/) tutorial for step-by-step instructions.

**Swift**

Title: `CircleAnnotationExample.swift`

[View on GitHub](https://github.com/mapbox/mapbox-maps-ios/blob/main/Sources/Examples/All%20Examples/Annotations/CircleAnnotationExample.swift)

```swift
import UIKit
import MapboxMaps

final class ViewController: UIViewController {
    private lazy var mapView: MapView = MapView(frame: view.bounds)

    override func viewDidLoad() {
        super.viewDidLoad()

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

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

        var annotations = [CircleAnnotation]()
        for i in 0...2000 {
            var annotation = CircleAnnotation(centerCoordinate: .random)
            if i % 2 == 0 {
                annotation.circleColor = StyleColor(.random)
                annotation.circleStrokeColor = StyleColor(UIColor.black)
                annotation.circleOpacity = 0.7
            }
            annotation.isDraggable = true

            /// The following handlers add tap and longpress gesture handlers. The `context` parameter
            /// contains the `point` of the gesture in view coordinate system and a geographical `coordinate`.
            annotation.tapHandler = { [id = annotation.id] context in
                let latlon = String(format: "lat: %.3f, lon: %.3f", context.coordinate.latitude, context.coordinate.longitude)
                print("annotation tap: \(id), \(latlon)")
                return true // don't propagate tap to annotations below
            }
            annotation.longPressHandler = { [id = annotation.id] context in
                let latlon = String(format: "lat: %.3f, lon: %.3f", context.coordinate.latitude, context.coordinate.longitude)
                print("annotation longpress: \(id), \(latlon)")
                return true // don't propagate tap to annotations below
            }

            /// The following gesture handlers create the dragging effect.
            /// The dragged annotation becomes larger and receives a stroke.
            ///
            /// - Important: In order to modify the annotation while it is being dragged,
            /// use the inout `annotation` that comes as the first argument to the handler.
            /// Don't use the source annotation that you used to configure it initially.
            /// The annotations are value types.
            ///
            /// The second `context` argument is similar to tap and longpress gestures.
            annotation.dragBeginHandler = { annotation, _ in
                annotation.circleRadius = 22
                annotation.circleStrokeWidth = 2
                print("annotation drag begin: \(annotation.id)")
                return true // allow drag gesture begin
            }
            annotation.dragChangeHandler = { annotation, context in
                let latlon = String(format: "lat: %.3f, lon: %.3f", context.coordinate.latitude, context.coordinate.longitude)
                print("annotation drag: \(annotation.id), \(latlon)")
            }
            annotation.dragEndHandler = { annotation, _ in
                annotation.circleRadius = 12
                annotation.circleStrokeWidth = 4
                print("annotation drag ended: \(annotation.id)")
            }
            annotations.append(annotation)
        }

        circleAnnotationManager.annotations = annotations
        circleAnnotationManager.circleColor = StyleColor(UIColor.blue)
        circleAnnotationManager.circleStrokeColor = StyleColor(UIColor.white)
        circleAnnotationManager.circleStrokeWidth = 4
        circleAnnotationManager.circleRadius = 12
        circleAnnotationManager.circleOpacity = 0.3
        circleAnnotationManager.circleStrokeOpacity = 0.8
        
        
    }
}
```