MapKit JS: Show "cursor pointer" when hovering over annotation

Question

I'm using Apple's MapKit JS, and I'm wondering how I can configure it to show a "cursor pointer" when hovering over the annotations in the map? Now they are clickable, but the cursor never changes.

I'd like to show a cursor like this:

My map:

Answer 1

You can create fully custom annotations like so:

let opts = { title: "hi" };
let pin = new window.mapkit.Annotation(
    new window.mapkit.Coordinate(latitude, longitude),
    (coord, opts) => {
        let div = document.createElement("div");
        div.classList.add("custom-pin");
        // Customize div, add img, etc
        return div;
    },
    opts
);
map.addAnnotation(pin);

Then you can target your custom class e.g. .custom-pin { cursor:pointer; }