Contents

AnnotationCalloutDelegate

Methods for customizing the behavior and appearance of an annotation callout.

Declaration

interface AnnotationCalloutDelegate

Overview

You can customize an annotation callout by replacing the callout element, or by providing custom content to display inside a standard callout bubble. The callout delegate contains methods you implement to customize the appearance and behavior of the callout. All the methods are optional, enabling you to override any or all of the behavior.

Creating a Custom Callout

This example shows how to replace the standard callout with a custom callout for a MarkerAnnotation.

const calloutDelegate = {

    // Return a div element and populate it with information from the
    // annotation, including a link to a review site.
    calloutElementForAnnotation: function(annotation) {
        const element = document.createElement("div");
        element.className = "review-callout";
        const title = element.appendChild(document.createElement("h1"));
        title.textContent = annotation.title;
        const link = element.appendChild(document.createElement("a"));
        link.href = annotation.data.reviewLink;
        link.textContent = "Review";
        // Add more content.
        element.style.width = "240px";
        element.style.height = "100px";
        return element;
    },
};

// Create an annotation with a link to be displayed in the callout.
const annotation = new mapkit.MarkerAnnotation(
    new mapkit.Coordinate(35.7019272, 139.575628),
    {
        callout: calloutDelegate,
        title: "...",
        data: {
            reviewLink: "http://..."    // Link to review site.
            // More info like address, phone number, etc.
        }
    }
);

Customizing the Content in a Standard Callout

You may want to provide your own content to display inside the callout bubble, without replacing the whole element as in the previous code listing. The following example is similar to the previous one, but uses the standard callout bubble to display custom content.

const calloutDelegate = {
    // Return a div element and populate it with information from the
    // annotation, including a link to a review site.
    calloutContentForAnnotation: function(annotation) {
        const element = document.createElement("div");
        element.className = "review-callout-content";
        const title = element.appendChild(document.createElement("h1"));
        title.textContent = annotation.title;
        const link = element.appendChild(document.createElement("a"));
        link.href = annotation.data.reviewLink;
        link.textContent = "Review";
        // Add more content.
        return element;
    }
};

// Create an annotation with a link to be displayed in the callout.
const annotation = new mapkit.MarkerAnnotation(
    new mapkit.Coordinate(35.7019272, 139.575628),
    {
        callout: calloutDelegate,
        title: "...",
        data: {
            reviewLink: "http://..."    // Link to review site.
            // More info like address, phone number, etc.
        }
    }
);

Topics

Customizing callout appearance

Providing elements

See Also

Customize annotations