MarkerAnnotation
An annotation that displays a balloon-shaped marker at the designated location.
Declaration
class MarkerAnnotation extends AnnotationMentioned in
Overview
A marker is a balloon-shaped annotation that contains a glyph or text. On the map, the marker appears when its coordinate is in view.
The following example shows a customized marker that specifies a color for the balloon background and the glyph, and provides custom glyph images. Color properties accept either a color name, here “brown” and “green”, or the equivalent hexadecimal color value such as “#A52A2A” and “#008000”, respectively. Or, you can use a specific color that matches your app’s specific design. For more information on standardized colors, see the CSS working group’s list of common color names and values.
const portland = new mapkit.Coordinate(45.514956, -122.679187); // Portland City Hall, Portland, OR
const customMarker = new MarkerAnnotation(portland, {
color: "green",
glyphColor: "brown",
glyphImage: { 1: "glyphImage.png" },
selectedGlyphImage: { 1: "detailedIcon.png", 2: "detailedIcon_2x.png", 3: "detailedIcon_3x.png" }
});The following example shows a marker annotation with a custom callout implemented by the callout delegate. In this example, the annotation is a dot when selected because selectedGlyphImage isn’t used.
const calloutDelegate = {
calloutRightAccessoryForAnnotation: function() {
const accessoryViewRight = document.createElement("a");
accessoryViewRight.className = "right-accessory-view";
accessoryViewRight.href = "https://www.nps.gov/stli/index.htm";
accessoryViewRight.target = "_blank";
accessoryViewRight.appendChild(document.createTextNode("ⓘ"));
return accessoryViewRight;
}
};
const annotation = new mapkit.MarkerAnnotation(new mapkit.Coordinate(40.6892, -74.0445), {
title: "Title",
subtitle: "Subtitle",
callout: calloutDelegate
});