Annotations
Create annotations to add indicators and additional details for specific locations on a map.
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
Event | Interface | Summary |
|---|---|---|
| MapKit JS sets the annotation’s selected property to | |
| MapKit JS sets the annotation’s selected property to | |
| The user initiates a drag for an annotation. A long press or click without movement isn’t a drag. | |
| The user is dragging an annotation. This event has an extra coordinate property for the coordinate of the annotation at the time the event occurs. Note: This is different from the annotation’s own coordinate property because that property doesn’t update until the user drops the annotation. | |
| The user ends a drag for an annotation. |
Topics
Annotations
Clustering annotationsAnnotationImageAnnotationMarkerAnnotationPlaceAnnotationMapFeatureAnnotationUserLocationAnnotation