---
title: Annotations
framework: mapkitjs
role: collectionGroup
role_heading: API Collection
path: mapkitjs/annotations
---

# Annotations

Create annotations to add indicators and additional details for specific locations on a map.

## Overview

Overview Annotations work differently in MapKit JS and native MapKit. In native MapKit, there are annotation objects and annotation views. You decide which annotation view to use for a particular annotation by implementing mapView(_:viewFor:) in the map’s delegate. In MapKit JS, there’s only the annotation, which is both model and view. You can still customize the look of annotations, but MapKit JS requires that you create annotation views explicitly rather than through a delegate. MapKit JS shows single-point annotations on a map. The framework accomplishes this by creating a Annotation object and adding it to a map. The framework provides three built-in objects for your convenience: Annotation, which allows you to position a live DOM element on the map. ImageAnnotation, which allows you to customize the annotation with your own imagery. MarkerAnnotation, which places a defined Apple look-and-feel balloon marker on the map with a title, subtitle, and custom glyph text/image. PlaceAnnotation, which places an annotation for a particular place on a map. MapFeatureAnnotation, which places an image for a particular feature on a map. A callout is a standard or custom element that can give more information about an annotation. A standard callout displays the annotation’s title and subtitle, if you provide them. A callout appears when the user selects an annotation interactively (by clicking or tapping), or programmatically when you set the annotation’s selected property to true. A callout goes away when the user deselects an annotation interactively either by tapping or clicking the map or by selecting another item on the map, or when you deselect it programmatically. Annotation events  |  |   |  |   |  |   |  |   |  |   |  |

## Topics

### Annotations

- [Clustering annotations](mapkitjs/clustering-annotations.md)
- [Annotation](mapkitjs/annotation.md)
- [ImageAnnotation](mapkitjs/imageannotation.md)
- [MarkerAnnotation](mapkitjs/markerannotation.md)
- [PlaceAnnotation](mapkitjs/placeannotation.md)
- [MapFeatureAnnotation](mapkitjs/mapfeatureannotation.md)
- [UserLocationAnnotation](mapkitjs/userlocationannotation.md)

### Customize annotations

- [AnnotationCalloutDelegate](mapkitjs/annotationcalloutdelegate.md)
- [AnnotationCollisionMode](mapkitjs/annotationcollisionmode.md)
- [AnnotationDisplayPriority](mapkitjs/annotationdisplaypriority.md)
- [Size](mapkitjs/size.md)

### Events

- [AnnotationDragEvent](mapkitjs/annotationdragevent.md)

## See Also

### Annotations and overlays

- [Overlays](mapkitjs/overlays.md)