MapKit JS add annotation on user click?

Question

Created Oct ’18

Replies 7

Boosts 0

Views 4k

Participants 6

I looked through supported events for mapkit.Map, however I couldn't find anything that would allow me to setup an event listener that adds an annotation on the location of user mouse click.

I understand that MapKit JS is still in beta, but I really expected this to be in the very first alpha release of annotations. Will this be supported?

Answered by Eric G in 335763022

MapKit JS relies as much as possible on existing DOM events. Here is an example using native DOM events to add annotations to a map on user click:

map.element.addEventListener("click", function(event) {
    if (event.target.parentNode !== map.element) {
        // This condition prevents clicks on controls. Binding to a 
        // secondary click is another option to prevent conflict
        return;
    }
    var domPoint = new DOMPoint(event.pageX, event.pageY);
    var coordinate = map.convertPointOnPageToCoordinate(domPoint);
    map.addAnnotation(new mapkit.MarkerAnnotation(coordinate));
});

If there are ways you would like to see this improved during or after the Beta, please file an enhancement request via Apple Bug Reporter.

Boost

Answer 1

Eric G OP

Oct ’18

Accepted Answer

MapKit JS relies as much as possible on existing DOM events. Here is an example using native DOM events to add annotations to a map on user click:

map.element.addEventListener("click", function(event) {
    if (event.target.parentNode !== map.element) {
        // This condition prevents clicks on controls. Binding to a 
        // secondary click is another option to prevent conflict
        return;
    }
    var domPoint = new DOMPoint(event.pageX, event.pageY);
    var coordinate = map.convertPointOnPageToCoordinate(domPoint);
    map.addAnnotation(new mapkit.MarkerAnnotation(coordinate));
});

If there are ways you would like to see this improved during or after the Beta, please file an enhancement request via Apple Bug Reporter.

1

Answer 2

Eimantas OP

Nov ’18

Thanks, for your reply, Eric and I appologise for the late response. I will definitely try this out.

0

Answer 3

Eimantas OP

Nov ’18

This approach works with one bug - the annotation gets added each time the finger is lifted from the button - including ending of a drag. But it's a good start nonetheless. Thanks again!

0

Answer 4

Hoshi OP

Sep ’19

Hi Eimantas, did you find a solution to prevent the firing of the click event at the end of a drag?

0

Answer 5

keyvan1 OP

Feb ’20

Hi,

How can I remove the annotations when added

        map.annotations[0].removeAnnotation;
        map.removeAnnotation[0];
map.removeAnnotations;

i tried these but none work

please help

0

Answer 6

Frameworks Engineer OP

Apple

Feb ’20

The Add Annotations example at https://developer.apple.com/maps/web/shows how to add annotations on click and also how to remove annotations.

0

Answer 7

PaulPlay OP

Jun ’24

Any updates on this?

Why does dragging the map and then releasing the mouse button count as a click event?

Also, I can't get "single-tap" to work with Mouse inputs. I assume it is for touch only (?)

0