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

# Add a view annotation

![Add view annotation on a map click.](https://docs.mapbox.com/ios/ja/assets/ideal-img/maps-examples-view-annotation-basic.cc436ba.480.png)

This example demonstrates [`ViewAnnotation`](https://docs.mapbox.com/ios/maps/api/latest/documentation/mapboxmaps/viewannotation/) in the **Mapbox Maps SDK for iOS**. The example initializes a [`MapView`](https://docs.mapbox.com/ios/maps/api/latest/documentation/mapboxmaps/mapview/) and listens for map loaded event and map tap gesture using [`onMapLoaded`](https://docs.mapbox.com/ios/maps/api/latest/documentation/mapboxmaps/mapboxmap/onmaploaded/) and [`onMapTap`](https://docs.mapbox.com/ios/maps/api/latest/documentation/mapboxmaps/gesturemanager/onmaptap/). The example adds a custom view annotation, based on user interaction, to the map at a given coordinate and displays it with details like latitude and longitude. Interaction events such as `close` and `selection` on the annotation view are also handled within the implementation.

View annotations are added via [`ViewAnnotation`](https://docs.mapbox.com/ios/maps/api/latest/documentation/mapboxmaps/viewannotation/) objects, controlled by methods like [`remove()`](https://docs.mapbox.com/ios/maps/api/latest/documentation/mapboxmaps/viewannotation/remove()/) for closing an annotation and [`setNeedsUpdateSize()`](https://docs.mapbox.com/ios/maps/api/latest/documentation/mapboxmaps/viewannotation/setneedsupdatesize()/) for adjusting the annotation's size.

> **Note (warning): Add AnnotationView class to your project**
> 
> This example uses [`AnnotationView`](https://github.com/mapbox/mapbox-maps-ios/blob/main/Sources/Examples/All%20Examples/Annotations/AnnotationView.swift/). To use this code snippet, you must also add the [AnnotationView class](https://github.com/mapbox/mapbox-maps-ios/blob/main/Sources/Examples/All%20Examples/Annotations/AnnotationView.swift/), a custom class defined in the Maps SDK for the [iOS Examples App](https://github.com/mapbox/mapbox-maps-ios/tree/main/Sources/Examples/).

> **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.28.4/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: `ViewAnnotationBasicExample.swift`

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

```swift
import UIKit
import MapboxMaps
import CoreLocation

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

    override func viewDidLoad() {
        super.viewDidLoad()

        let centerCoordinate = CLLocationCoordinate2D(latitude: 39.7128, longitude: -75.0060)
        let options = MapInitOptions(cameraOptions: CameraOptions(center: centerCoordinate, zoom: 7))

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

        addViewAnnotation(at: mapView.mapboxMap.coordinate(for: mapView.center))

        mapView.mapboxMap.onMapLoaded.observeNext { [weak self] _ in
            guard let self = self else { return }
            
        }.store(in: &cancelables)

        mapView.mapboxMap.addInteraction(TapInteraction { [weak self] context in
            self?.addViewAnnotation(at: context.coordinate)
            return true
        })
    }

    private func addViewAnnotation(at coordinate: CLLocationCoordinate2D) {
        let annotationView = AnnotationView(frame: CGRect(x: 0, y: 0, width: 100, height: 80))
        annotationView.title = String(format: "lat=%.2f\nlon=%.2f", coordinate.latitude, coordinate.longitude)
        let annotation = ViewAnnotation(coordinate: coordinate, view: annotationView)
        annotation.allowOverlap = true
        annotationView.onClose = { [weak annotation] in annotation?.remove() }
        annotationView.onSelect = { [weak annotation] selected in
            annotation?.priority = selected ? 1 : 0
            annotation?.setNeedsUpdateSize()
        }
        mapView.viewAnnotations.add(annotation)
    }
}
```