Prevent Balloon Animation when mouse-clicking/selecting MarkerAnnotation

I am trying to prevent the default mouse-click markerAnnotation animation, in which a clicked Balloon expands to a larger size. You can see a demo link of the behavior I wish to prevent at the following link (apple wouldn't let me embed it)

gifyu(DOT)com/image/Smhl1

Lets say the code is something like...

// helper vars
let coordinate = new mapkit.Coordinate(37.33182, -122.03118)
let options = { title: "My Custom Title", subtitle: "Anno's Address", color: "#0000FF" }

// create the annotation
let annotation = new mapkit.MarkerAnnotation(coordinate, options)

// add custom click behavior in the eventListener callback
annotation.addEventListener("select", (e) => {
  let clickedAnnotation = e.target
  clickedAnnotation.color = "#FF0000" // red
})

// add to map
map.showItems(annotation)

After reviewing the mapkitjs annotation documentation

I have tried:

  • Adding enabled: false to options which does not work -- It does prevents the animation, but it also prevents ALL user interactivity, so no custom eventListeners() can be created or fired.
  • adding e.stopPropagation() or e.preventDefault() to the eventListener callback which does not work
  • adding e.target.selected = false to the eventListener callback which does not work... I'm surprised this didn't work. My guess its due to attempting to override the ~1 second animation after it already has started asyncronously(?) see docs here.

TLDR: How do you prevent mouse-click animations on markerAnnotations?

Bump! I really hope someone out there can help me! This seems like a basic issue.

Prevent Balloon Animation when mouse-clicking/selecting MarkerAnnotation
 
 
Q