Annotation
The base annotation object for creating custom annotations.
Declaration
class Annotation extends MapKitEventTargetOverview
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);
});