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: falsetooptionswhich does not work -- It does prevents the animation, but it also prevents ALL user interactivity, so no customeventListeners()can be created or fired. - adding
e.stopPropagation()ore.preventDefault()to the eventListener callback which does not work - adding
e.target.selected = falseto 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?