---
title: Annotation
framework: mapkitjs
role: symbol
role_heading: Class
path: mapkitjs/annotation
---

# Annotation

The base annotation object for creating custom annotations.

## Declaration

```data
class Annotation extends EventTarget
```

## Mentioned in

Migrating from Version 5 to Version 6

## Overview

Overview An annotation represents data that you want to display on the map’s surface. Associate each annotation with a coordinate on the map. Use the extended objects MarkerAnnotation and ImageAnnotation to create annotations on the map, or Annotation to customize a view beyond the presentation that ImageAnnotation or MarkerAnnotation provide. The examples below create a custom annotation using a person’s initials to show them on the map. The following CSS style encloses the initials in a gray circle: .circle-annotation {     width: 32px;     height: 32px;     border-radius: 50%;     color: #FFF;     background-color: #CCC;     text-align: center;     line-height: 32px; } The following code creates the annotation: const people = [     { title: "Juan Chavez",       coordinate: new mapkit.Coordinate(37.3349, -122.0090201),       role: "developer",       building: "HQ" },     { title: "Anne Johnson",       coordinate: new mapkit.Coordinate(37.722319, -122.434979),       role: "manager",       building: "HQ" } ];

const factory = function(coordinate, options) {     const div = document.createElement("div"),         name = options.title,           // "Juan Chavez"         parts = name.split(' ');        // ["Chavez", "Juan"]     div.textContent = parts[0].charAt(0) + parts[1].charAt(0);    // "JA"     div.className = "circle-annotation";     return div; };

people.forEach(function(person) {     const options = {         title: person.title,         data: { role: person.role, building: person.building }     };     const annotation = new mapkit.Annotation(person.coordinate, factory, options);     map.addAnnotation(annotation); });

## Topics

### Creating an annotation

- [new Annotation(location, factory, options)](mapkitjs/annotation/annotationconstructor.md)
- [AnnotationConstructorOptions](mapkitjs/annotationconstructoroptions.md)

### Getting the map and element

- [map](mapkitjs/annotation/map.md)
- [element](mapkitjs/annotation/element.md)

### Getting the Place ID

- [id](mapkitjs/annotation/id.md)

### Getting and setting data, titles, and the accessibility label

- [data](mapkitjs/annotation/data.md)
- [title](mapkitjs/annotation/title.md)
- [subtitle](mapkitjs/annotation/subtitle.md)
- [accessibilityLabel](mapkitjs/annotation/accessibilitylabel.md)

### Getting and setting annotation appearance

- [coordinate](mapkitjs/annotation/coordinate.md)
- [anchorOffset](mapkitjs/annotation/anchoroffset.md)
- [appearanceAnimation](mapkitjs/annotation/appearanceanimation.md)
- [displayPriority](mapkitjs/annotation/displaypriority-data.property.md)
- [padding](mapkitjs/annotation/padding.md)
- [size](mapkitjs/annotation/size.md)
- [visible](mapkitjs/annotation/visible.md)

### Getting and setting interaction behavior

- [animates](mapkitjs/annotation/animates.md)
- [draggable](mapkitjs/annotation/draggable.md)
- [selected](mapkitjs/annotation/selected.md)
- [enabled](mapkitjs/annotation/enabled.md)

### Managing callouts

- [callout](mapkitjs/annotation/callout.md)
- [calloutEnabled](mapkitjs/annotation/calloutenabled.md)
- [calloutOffset](mapkitjs/annotation/calloutoffset.md)

### Managing clustering

- [memberAnnotations](mapkitjs/annotation/memberannotations.md)
- [clusteringIdentifier](mapkitjs/annotation/clusteringidentifier.md)
- [collisionMode](mapkitjs/annotation/collisionmode-data.property.md)

### Managing selection accessories

- [selectionAccessory](mapkitjs/annotation/selectionaccessory.md)
- [selectionAccessoryOffset](mapkitjs/annotation/selectionaccessoryoffset.md)

### Deprecated

- [CollisionMode](mapkitjs/annotation/collisionmode-data.var.md)
- [DisplayPriority](mapkitjs/annotation/displaypriority-data.var.md)

## Relationships

### Inherits From

- EventTarget

### Inherited By

- [ImageAnnotation](mapkitjs/imageannotation.md)
- [MarkerAnnotation](mapkitjs/markerannotation.md)
- [UserLocationAnnotation](mapkitjs/userlocationannotation.md)

## See Also

### Annotations

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